<< Supernanny | Home | RSS Updated >>

IE CSS Bug: 'clear: both'

With the new look and feel, I've noticed that if I throw a picture in there and align it to the right, sort of like I do in some entries, if the picture is longer than the entry, you get some odd overlapping and such.

I've tried to fix it, but IE's rendering engine just can't seem to handle the CSS 'clear: both' directive correctly. That is, I tried to say "each entry should clear on both sides so you don't get overlapping entries," but when I do that, IE loads the page up then the top entry on the page blinks out of existence until you scroll it off the screen, then back on... then after a few seconds, it just blinks out of existence again. Obvious rendering engine bug. (Works on Firefox just fine, though.)

Long and short of it is, I'm not sure if there's anything I can do about the overlap in a browser-independent fashion (which is what I was hoping to achieve). I'll keep plugging away at it, but for now, I'll just have to watch my image sizes.

posted on Thursday, September 29, 2005 8:29 AM | Filed Under [ GeekSpeak ]

Comments

Gravatar # re: IE CSS Bug: 'clear: both'
by Gavs at 7/19/2008 1:06 AM
Hi,
See this link. Holly 'n John clearly posting the solution.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Gravatar # re: IE CSS Bug: 'clear: both'
by awake at 11/7/2008 12:48 PM
add this property "height: 100%;" in the parent layer holding the layers you want contained in the same space.

For example: Using below HTML and CSS code, any content in the main-content layer and side-content layer will not float outside of the #content-container layer.

<div id="container-content">
<div class="side-content">
side content goes here
</div>
<div class="main-content">
main content goes here
</div>
</div>

#container-content
{
margin: 5px 0 5px 0;
background-color: White;
border:thin #999999 solid;
border-width: 1px;
padding: 10px;
height: 100%;
}

.side-content
{
float: right; /* since this element is floated, a width must be given */
width: 225px;
padding: 5px;
font-size: 12px;
}
.main-content
{
width: 600px;
text-align: justify;
padding: 5px;
}
Comments have been closed on this topic.