I'm having trouble with a layout in IE7 that behaves fine in both IE6 and Firefox and only has minor issues in
Safari and Opera.
I put two floating divs as two columns in a containing div so that as either column expanded vertically the wrapping div would expand to the height of which ever was greater.
Then I put a footer div below this with clear:both just for good measure. If you look at http://www.stevenson.uk.com you'll hopefully see that in IE7 only the footer div appears way up the page and I don't know why.
Can anyone explain why, or contribute a hack that only IE7 and not IE6 will read so I can force the footer down maybe using absolute positioning as a last resort?
I really struggle when it comes to getting wrapping divs to expand nicely when nested divs inside them expand, what's the secret?
IE7 Hack?
Moderator: General Moderators
- Skittlewidth
- Forum Contributor
- Posts: 389
- Joined: Wed Nov 06, 2002 9:18 am
- Location: Kent, UK
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
Conditional comments are only read by IE:
In IE you'll see the text; in other browsers you won't. You can put anything between the tags.
Code: Select all
<!--[if IE]><strong>This is internet explorer</strong><![endif]-->- Skittlewidth
- Forum Contributor
- Posts: 389
- Joined: Wed Nov 06, 2002 9:18 am
- Location: Kent, UK
Yeah I tried that as:
but didn't seem to get a result. Maybe if I remove the space between IE and 7. Its only IE7 that a fix needs to apply to, not IE6.
I've been playing with the stylesheet and worked out that IE7 is simply ignoring the "clear:both" in the #footer declaration, cos if I remove that, then Firefox does exactly the same thing. Not sure how I can work around that!
Code: Select all
<!--[if IE 7]>link to alternative stylesheet here<![endif]-->I've been playing with the stylesheet and worked out that IE7 is simply ignoring the "clear:both" in the #footer declaration, cos if I remove that, then Firefox does exactly the same thing. Not sure how I can work around that!
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
Code: Select all
<!--[if IE gt 6]>- Skittlewidth
- Forum Contributor
- Posts: 389
- Joined: Wed Nov 06, 2002 9:18 am
- Location: Kent, UK
In case anyone is interested, I solved my IE7 problem.
It seems that IE7 ignores clear:both if the object it is supposed to be clearing is wrapped in another div.
Unlike in IE6, the wrapping div does not expand to the height of the floating div, and since my footer div came right after the wrapper it placed itself right below the unexpanded wrapper. In firefox the wrapper div doesn't expand around the floated divs either, but in this case Firefox understood that it was trying to clear the contents of the wrapper and not the wrapper itself.
I abandoned the wrapper and put my footer div right after the right floated column div and all seems to be correct in all browsers including IE7....for the time being
It seems that IE7 ignores clear:both if the object it is supposed to be clearing is wrapped in another div.
Unlike in IE6, the wrapping div does not expand to the height of the floating div, and since my footer div came right after the wrapper it placed itself right below the unexpanded wrapper. In firefox the wrapper div doesn't expand around the floated divs either, but in this case Firefox understood that it was trying to clear the contents of the wrapper and not the wrapper itself.
I abandoned the wrapper and put my footer div right after the right floated column div and all seems to be correct in all browsers including IE7....for the time being