Forums

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.


<div id=\"headertop\">
      <div id=\"leftside\">{SESSION}</div>
      <div id=\"rightside\">{SHOPPING_CART}</div>
</div>

CSS




#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:


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:


<a href=\"...\" alt=\"...\">
     <img src=\"...\" alt=\"...\" />
</a>

whereas, this takes care of it:


<a href=\"...\" alt=\"...\"><img src=\"...\" alt=\"...\" /></a>

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

treehouse : what would you like to learn today?

Forums

IE 7 Float Bug (missing bottom border)