...

View Full Version : IE6 wont display my Div correctly



moss2076
12-29-2007, 10:03 AM
Im designing some rounded corner divs which use several divs for the display of each of the four corner images for part of my site.

I had the issue with with the div called 'box' in IE7 (Mozilla had no problems) until I added "overflow:auto" to its css to make it clear below the other divs inside it.

IE6 however is still suffering from the bottom of the div not clearing the other divs properly. I dont know how to get it to display like all the other 17 browsers which I took screenshots of using browsershots.org. Safari was fine, Opera was fine, etc etc

If anyone has IE6 could they take a look? :)

www.siteoftom.com/testroundedcontent.html


Crappy IE6...

Excavator
12-29-2007, 07:23 PM
Just glancing over your code... your using overflow:auto; to clear your floats... but your not using floats in this layout.

moss2076
12-29-2007, 07:34 PM
Ive removed the overflow:auto not sure how it got in there!

If I give the outer div called "box" a width of 50% everything displays fine in IE6 and IE7 plus Mozilla.

If I remove the width of 50% then IE6 and 7 are ok, but now its Mozilla which isnt displaying correctly!

What could be causing this?

koyama
12-29-2007, 09:44 PM
If I give the outer div called "box" a width of 50% everything displays fine in IE6 and IE7 plus Mozilla.

If I remove the width of 50% then IE6 and 7 are ok, but now its Mozilla which isnt displaying correctly!

What could be causing this?
This is a bug in IE6+7 which may be called the “IE6+7 padding-bottom margin-bottom background bug”. I came across this bug in March 2007, but couldn't find any sources describing it. So here is what I know:

Broken rendering of background (spilling out downwards) occurs for a div satisfying the following:

hasLayout = false and margin-bottom >= 1px
It has a nested div with padding-bottom >= 1px

+ one or more of the following conditions

It is itself nested in a div having hasLayout = false and padding-bottom >= 1px
It is itself nested in a div having hasLayout = false and border-bottom >= 1px
There is a comment node sandwiched between the two mentioned divs above (this case is fixed in IE7, however)


Test page with live examples (http://koyama.dk/demos/CF130394/IE6+7-padding-bottom-background-bug.html). (View in IE6 and IE7 and compare with Firefox 2)

To understand why the bug appears/disappears when you alter the width or overflow properties consider that hasLayout [1] is triggered in both IE6 and IE7 when you set an explicit width. Furthermore, consider that overflow: auto triggers hasLayout in IE7, but not in IE6.

As Excavator notes, setting overflow: auto is redundant for two reasons.

It has really no effect in this case since you are not nesting floats
overflow: auto is not going to work anyway in IE6 for float containment in IE6 because it does not trigger hasLayout (in contrast to IE7).

The reliable way to trigger hasLayout in both IE6 and IE7 is using zoom: 1 instead of using overflow: auto or setting an explicit width. It should do the trick in your case too.


http://www.satzansatz.de/cssd/onhavinglayout.html

Excavator
12-29-2007, 09:57 PM
Hehe, I knew you'd find it koyama - You're the bug-hunter!!:thumbsup:

koyama
12-29-2007, 10:02 PM
Hehe, I knew you'd find it koyama - You're the bug-hunter!!:thumbsup:
Yeah... I think this one was one of the rare ones, but I knew I had seen it before :D

Excavator
12-29-2007, 10:25 PM
Some new avatar ideas for you koyama:
http://www.mtaonline.net/~stewarta/webfiles/BugHunter.jpg http://www.mtaonline.net/~stewarta/webfiles/Safari.gif http://www.mtaonline.net/~stewarta/webfiles/hd_bughunter2.gif

and my favorite:http://www.mtaonline.net/~stewarta/webfiles/BugHunter2.jpg

koyama
12-29-2007, 10:37 PM
Thank you very much. I am overwhelmed. They are really good candidates. The last one even looks like... ehhh... an Excavator :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum