IE menu/header position?

andywd7 / 2009-09-07 13:43:36   

I know there are a lot of issues with getting IE to display 'properly' but my site almost works in explorer except for one problem!

My site is wrapped to centre it and the content displays in the right position but the menu and header are positioned shifted to the right where the content starts and over the top of the content?

what I've edited in the ie.css file is shown below?

Any help or suggestions would be really helpful!?

Thank you

www.andrewdenham.com/work/test

  1.  
  2. #wrapper { 
  3. width: 1000px; 
  4. margin: 0 auto;
  5. text-align: left; 
  6. background: #FFF;
  7. }

#header {
width: 980px;
top: 0px;
position: absolute;
background: #FFF;
padding: 0px 0px 37px 20px;
margin: 0px 0px 0px 0px;
z-index: 1;
}

#info {
font: normal 11px Arial, sans-serif;
text-align: right;
border-top-width: 1px;
border-top-color: #2D2D2D;
border-top-style: solid;
border-bottom-width: 4px;
border-bottom-color: #2D2D2D;
border-bottom-style: solid;
padding: 4px 0px 4px 0px;
width: 960px;
top: 0px;
position: absolute;
background: #FFF;
margin: 115px 0px 10px 20px;
z-index: 3;
}

#menu {
float: left;
width: 142px;
overflow: auto;
top: 0;
height: 100%;
background-color: #F8F8F8;
padding: 0px 0px 0px 0px;
margin: 130px 20px 15px 20px;
}

  1. #content {
  2.     height: 100%;
  3.     margin: 130px 22px 15px 174px;
  4.     top: 0;
  5. }
lemathieu A / 2009-09-07 15:27:43   

Lots of errors in your code.
Could be a lot of things.
Try to validate and see how it work…

btw, love your site (again)…

andywd7 / 2009-09-07 17:32:47   

Thanks lemathieu!

I validated this page an unfortunately it changed nothing! I have changed the image captions back after validating because I couldn't find a way to get them to work properly, but that's a different problem!

I think the menu and header position have something to do with the wrap I've used!? I just don't understand how the content can be positioned correctly but not the menu or header! Something to do with the positioning?

Thank you?

Vaska A / 2009-09-07 18:48:23   

Do you know about box model issues?

I'm not on a PC so I can't really see what's going on here, but I believe you have box model issues to work though. If you aren't sure what this is just Google it...it's not hard to deal with once you know. But you may end up adding more 'container' type divs into some of these divs to give them proper padding/margin.

Just a hunch...

Vaska A / 2009-09-07 18:49:00   

And, I look forward to seeing this completed...it's quite nice already.

andywd7 / 2009-09-07 19:39:41   

Thanks Vaska!

Hopefully it'll be up and running perfectly soon! I'll start reading up on box models but here is a screen shot of what my site looks like in ie.

The header and menu should be over to the left so everything is lined up within the white!? At the moment they are lined up with the left of the content rather than next to it?

ie problem

Thanks again

andywd7 / 2009-09-07 20:12:34   

No matter what I change in my ie.css file nothing changes on my site when I view it on ie!?

For example I reduced the with of the header from 980px to 280px and nothing happened!?

Does this mean I've coded something wrong or not closed something!?

I'm not sure if I'm going to be able to fix this, my html/css knowledge isn't great at the moment!

Vaska A / 2009-09-07 20:28:52   

Shift + Refresh over and over.

And, IE sucks.

;)

lemathieu A / 2009-09-08 07:19:53   

a man could invent a punching ball with the ie logo on it, he will sell tons of it to developpers…
;)

andywd7 / 2009-09-08 09:36:09   

I was starting to feel the rage last night so left it and went to bed! But just out of interest refreshing the page loads of times still doesn't do anything when I've made changes in ie.css?

The only time things change on my site in IE is when I change them in my style.css file?????

Also I managed to move the header and info to the correct place, by adding containers for them like you said Vaska but the menu and content still won't move inline with them!?

Don't worry if you can't help but if you have any other ideas or suggestions they would be really appreciated!?

Thanks

andywd7 / 2009-09-12 23:17:35   

Me again! Still not sorted this!

I was just wondering I am viewing my website in ie7 and firebug says the content container, which is positioned correctly, is surrounded by ?

My menu, header and info line are showing that they are not surrounded by this!? Could this be the problem, something to do with the conditional commenting?

I just need to know if it's worth persuing this or try something else? Thanks

andywd7 / 2009-09-13 13:09:32   

Just to let you know I did it! Finally!

Thank you lemathieu and Vaska for your help!

If anyone has a similar problem I solved it by adding a relative position to my menu, header and info and a fixed position to each of their containers! Then it was just a bit of readjusting my css and sorted (touch wood).

Also thank you to Diogo Aguiar looking at his site to see how he managed to get his to center correctly showed me light!

It really helped to step away from it for a few days and come back to it with fresh eyes!

Thanks again guys!

This thread has been closed, thank you.