IE 7 Float Bug (missing bottom border)

[pghtech]

Looking through the posted IE7 Float related bugs on the internet, I haven’t found one that applies to the issue I am seeing with floats and IE7.

I have a few places where I am floating 2 DIVS, and in one case, the left most, and the other case, the last DIV(furthest right) gets pushed 1 px down in IE 7. It is working fine in FireFox 3. It doesn’t matter what I change to the margin, padding, div height..ect.

Ultimately it looses the bottom border of the link. Below is the code of the parent divs and the CSS of the "a link"

Below is the code and website for viewing.

Code:

{SESSION}

{SHOPPING_CART}

CSS

Code:

#rightside {
width: 150px;
position: relative;
float: right;
text-align:center;
}

#leftside {
width:250px;
position:relative;
float:left;
text-align: center;
padding:0px 0px 0px 20px;
}

Inside the div "rightside" is an nested div that has link <a href> with the following CSS:

Code:

color: #573457;
background-color: #F5E3F5;
border: 1px solid #F5E3F5;
font-family:”Lucida Sans”, “Lucida Sans Unicode”, Verdana;
padding: 2px;
line-height: 20px;
text-align: center;
text-decoration: none;

[pghtech]

No one knows why?

[pghtech]

Wow, no one has come across this?

[mikes]

The nearest I’ve seen is when whitespace between <a> and </a> tags causes issues like that. For instance:

This can result in a pixel line between elements before and after it:

Code:

whereas, this takes care of it:

Code:

I don’t expect that will help directly with your problem but maybe it will trigger something :)

[Author]

Posts