Topic: Stupid IE Pages that link to <a href="https://ozoneasylum.com/backlink?for=30477" title="Pages that link to Topic: Stupid IE" rel="nofollow" >Topic: Stupid IE\

 
Author Thread
bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

IP logged posted posted 08-08-2008 01:05 Edit Quote

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 ]:.

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 08-10-2008 18:42 Edit Quote

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

Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 08-11-2008 12:02 Edit Quote

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 08-11-2008 13:43 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu