Can someone explain to me why this page:
<!-- m --><a class="postlink" href="http://yoda.nerds.net/development/css_layout.html">http://yoda.nerds.net/development/css_layout.html</a><!-- m -->
Renders fine with Firefox but IE decides to hide the text of the "columnContent" DIVs if it does not reach the height of the "columnImage" DIV. Once the text is the height of the "columnImage", the text shows. Let me know if you get something different.
Thanks
CraigYou've been reading Complex Spiral (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/containing-floats/#fn1">http://www.complexspiral.com/publicatio ... loats/#fn1</a><!-- m -->)
The empty div should be clear:left;
As for the 'disappearing' text I noticed that if you scroll the page it partially reappears in IE.
This is always indicates to me that an element needs position.
Add position:relative; to .columnContent and .columnImage
Now to tweak the image alignment:
add padding-left:0; to .columnContent
and change margin:-5px 5px -5px 0px; in .columnImage
That should give you the desired result.
Opera shows a little gap under the image, but a little tweaking of the padding/margin should clear that up.Originally posted by Fang
As for the 'disappearing' text I noticed that if you scroll the page it partially reappears in IE.
This is always indicates to me that an element needs position.
What I've found also works is setting that element's height to 1px, then hiding the style from standards browsers and IE5-Mac. IE will stretch it to the proper length. I found this page linked from positioniseverything.net: hasLayout Property (<!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp">http://msdn.microsoft.com/workshop/auth ... layout.asp</a><!-- m -->). Apparently IE renders block elements as psuedo-inline/jell-o globs of goo if position, width, height, or display aren't set in a CSS file. Once it has, low-and-behold IE tends to behave (more) correctly.
But then again, we've known for a long time that IE miscalculates things unless you give it a blatantly wrong calculation that causes IE to recalculate something. The second time's the charm, I guess.
<!-- m --><a class="postlink" href="http://yoda.nerds.net/development/css_layout.html">http://yoda.nerds.net/development/css_layout.html</a><!-- m -->
Renders fine with Firefox but IE decides to hide the text of the "columnContent" DIVs if it does not reach the height of the "columnImage" DIV. Once the text is the height of the "columnImage", the text shows. Let me know if you get something different.
Thanks
CraigYou've been reading Complex Spiral (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/containing-floats/#fn1">http://www.complexspiral.com/publicatio ... loats/#fn1</a><!-- m -->)
The empty div should be clear:left;
As for the 'disappearing' text I noticed that if you scroll the page it partially reappears in IE.
This is always indicates to me that an element needs position.
Add position:relative; to .columnContent and .columnImage
Now to tweak the image alignment:
add padding-left:0; to .columnContent
and change margin:-5px 5px -5px 0px; in .columnImage
That should give you the desired result.
Opera shows a little gap under the image, but a little tweaking of the padding/margin should clear that up.Originally posted by Fang
As for the 'disappearing' text I noticed that if you scroll the page it partially reappears in IE.
This is always indicates to me that an element needs position.
What I've found also works is setting that element's height to 1px, then hiding the style from standards browsers and IE5-Mac. IE will stretch it to the proper length. I found this page linked from positioniseverything.net: hasLayout Property (<!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp">http://msdn.microsoft.com/workshop/auth ... layout.asp</a><!-- m -->). Apparently IE renders block elements as psuedo-inline/jell-o globs of goo if position, width, height, or display aren't set in a CSS file. Once it has, low-and-behold IE tends to behave (more) correctly.
But then again, we've known for a long time that IE miscalculates things unless you give it a blatantly wrong calculation that causes IE to recalculate something. The second time's the charm, I guess.