Topic: Stupid IE (Page 1 of 1)

So I have this page here:

http://www.bitdamaged.com/test.html

Which is using roundedcornr code from http://www.roundedcornr.com

Works fine in firefox and as long as the div is by itself (as you can see from the second div). But if I put the rounded corner div in a list item then for some reason there's a little line of background color on the top in IE only. I Can't find a way out of this and I need to put this in a list.

Any ideas?



.:[ Never resist a perfect moment ]:.

I don't see anything but little black squares. That's not right is it? I'm on Firefox but I still don't see any rounded corners.

Later,

C:\

Seem's to me to be the png's used - they're little black squares instead of round corners?

The black squares are actually dark grey rounded corners on a slightly darker grey.

In IE7 I see a ~4px padding (or margin) top on the upper rounded corners, for the comment_box DIVs inside a LI. Adding the rule .comment_box{ width:100%; } seems to be enough to fix this with the following markup:
<ul>
<li><div class="comment_box"><div class="comment_top"><div></div></div><div class="comment_content"><p>This be a test</p></div><div class="comment_bottom"><div></div></div></div></li>
<li><div class="comment_box"><div class="comment_top"><div></div></div><div class="comment_content"><p>This be a test</p></div><div class="comment_bottom"><div></div></div></div></li>
</ul>
...
<div class="comment_box"><div class="comment_top"><div></div></div><div class="comment_content"><p>This be a test</p></div><div class="comment_bottom"><div></div></div></div>


FWIW, I'm not fond of the tag soup here. I'd use CSS2's :before and :after pseudo elements, and maybe generated content to achieve the same effect with a single element and have this degrade nicely/squarely in non standard web browsers. No big deal, the content would be accessible.