IE6 floating problem causing wrapping
Posted on Aug 11, 2009 by
Paul WhiteThere come a time when every developer plays an game of cat and mouse
with
CSS. Its not so much the
CSS but figuring out how to make it look
the same in IE 6, as IE 7 and Firefox. Well I came across one of
these moments tonight. Very interesting discovery.
For a particular website I had floated a bunch of a tags. The result was the last one kept going down to the next line. I played with widths of the container Divs, and it didn't affect it. Finally after reading countless blogs, and message board with people having the same problem, I came across a link that helped me discover the problem. It turns out when IE6 reads
HTML, all it wants to see is
HTML. If you throw any XHTML into the mix it won't be happy.
The code I had before that caused the problem looked like this
<div id="banneractions">
<a rel="nofollow" href="/heating/" class="heating"/>
<a rel="nofollow" href="air_conditioning/" class="cooling"/>
<a rel="nofollow" href="/plumbing/" class="plumbing"/>
<a rel="nofollow" href="/kithen_remodeling/" class="kitchen"/>
<a rel="nofollow" href="/bathroom_remodeling/" class="bathroom"/>
</div>
What corrected the problem was to do this
<div id="banneractions">
<a rel="nofollow" href="/heating/" class="heating"></a>
<a rel="nofollow" href="air_conditioning/" class="cooling"></a>
<a rel="nofollow" href="/plumbing/" class="plumbing"></a>
<a rel="nofollow" href="/kithen_remodeling/" class="kitchen"></a>
<a rel="nofollow" href="/bathroom_remodeling/" class="bathroom"></a>
</div>
I hope this helps others out that might have done something similar.
Discussion
No Comments have been submitted
WhiteSites Blog