Ie8 and clearfloat problems

Question

Hi,
I'm using
ie
tester to test my css and I've run into a problem with ie8. For
some reason it appears to be ignoring my clearfloat style. Here's
the page:
http://www.esc-online.com/neher/linecard.html
Notice how in ie8 the lists are sitting below the spry tab
content area and also below the outer wrapper area. My footer is
also crammed over to the right. In all the other browsers I don't
get this problem.
I think it comes down to how ie8 interprets this line of code
(basically a hack) which I have used to keep the content inside the
defined areas:
<br class="clearfloat"/>
The style for this is as follows:
.clearfloat {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
Seeing as ie8 is supposed to be more css compliant than the
rest, is there a better way to be keeping content contained within
a defined area than doing it this way?
Thanks
LA Gooner.

Answer 1

.oO(LAGooner10)
> I'm using
http://www.my-debugbar.com/wiki/IETester/HomePage
ie tester to test
>my css and I've run into a problem with ie8. For some
reason it appears to be
>ignoring my clearfloat style. Here's the page:
>
>
http://www.esc-online.com/neher/linecard.html
>
> Notice how in ie8 the lists are sitting below the spry
tab content area and
>also below the outer wrapper area. My footer is also
crammed over to the
>right. In all the other browsers I don't get this
problem.
>
> I think it comes down to how ie8 interprets this line of
code (basically a
>hack) which I have used to keep the content inside the
defined areas:
>
> <br class="clearfloat"/>
>
> The style for this is as follows:
>
> .clearfloat {
> font-size: 1px;
> line-height: 0px;
> clear: both;
> height: 0px;
> }
>
> Seeing as ie8 is supposed to be more css compliant than
the rest, is there a
>better way to be keeping content contained within a
defined area than doing it
>this way?
There are various ways to clear a float (you could just
google for that
term). Personally I prefer to simply apply an "overflow:
hidden" to the
floated element. It's a very elegant way and works well in
almost every
browser, but is not recognized by DW yet.
http://www.quirksmode.org/css/clearing.html
Also remember that IE 8 is still beta. Passing the ACID tests
is nice,
but doesn't necessarily mean that it will work well in
practice yet.
I've even seen reports about IE 8 totally screwing up
websites which
worked in IE 7, so the developers still have a lot to do. I
wouldn't add
any specific hacks or workarounds until an RC (release
candidate) is
published.
Micha