Help with layout problems in IE

views:

answers:

Help with layout problems in IE

I am having some problems getting this layout to work properly in IE (both 6 and 7). It, of course, works fine in Safari and Firefox.

What's going on here:

I have a footer which is fixed to the bottom of the viewport, or under content - whichever is longer.
I have a header above the content which contains a number of centered and floated block items, which is wider then the content area.
I have a centered fixed width content area

The problems

(Main problem) In IE7 a horizontal scroll bar appears because of the floated header.
In IE6 the footer does not snap below content area.

Any insight would be great. Thanks.

http://tinyurl.com/yl2od5s

+1 A:

I see you're positioning the footer by making layout extend the full height and then giving it a negative bottom margin to shift the footer up . . . perhaps getting rid of the negative margin and using relative positioning on the footer to shift it up would be more cross-browser compatible.

I haven't actually tried this out with your page, it's just a thought.

UPDATE: Turns out position: relative isn't all that great . . . it makes the scrollbar extend to where the footer would have been without the repositioning.

But try applying #footer{position: absolute; bottom: 0px; width: 100%} and get rid of the negative bottom margin of layout . . . this works for me at least in Firefox, I haven't yet checked IE.

Tim Goodman 2010-01-20 17:48:53

For instance: `#footer{position: relative; top: -42px}`Alternatively you could use absolute positioning on the footer:`#footer{position:absolute; bottom: 0px}`

Tim Goodman 2010-01-20 17:52:09

Tim, thanks for the reply. Do you have any idea about my first problem - the horizontal scrollbar appearing for ie because of the center floated header? That is the one I am most concerned about.

Louis W 2010-01-21 14:18:21

try this css: `body{overflow-x: hidden;}`For more info on the CSS overflow property, see here: http://www.w3schools.com/Css/pr_pos_overflow.asp

Tim Goodman 2010-01-21 18:18:42

Tried this, no dice in IE7. The example page is updated.

Louis W 2010-01-21 19:21:40

In the CSS, try removing `left: 50%` from `#layout #header` and also removing `left: -50%` from `#layout #header UL#mainmenu`

Tim Goodman 2010-01-21 19:47:49

That would make it not center the floated elements.

Louis W 2010-01-21 19:54:21

You can shift them back to the right by adding something like `left: 5%` to `#layout #header UL#mainmenu`.I'll think about if there's another way to guarantee they're exactly centered (other than just eyeballing it).

Tim Goodman 2010-01-21 19:58:54

Ooh, here's a better idea:Just add `position: relative` to `#layout #header_wrap'.I think with this approach you can leave the centering stuff as you had it originally.

Tim Goodman 2010-01-21 20:16:30

Ahh bingo The position:relative; was the key. Thanks.

Louis W 2010-01-21 20:59:16

Glad I could help

Tim Goodman 2010-01-21 21:10:47

ansaurus

tags:

views:

answers:

Help with layout problems in IE

related questions