jQuery Corners and IE Problems

Question

Hi Guys,

I am using "malsups" jQuery corner plugin - http://jquery.malsup.com/corner/ - and having a bit of nightmare of a time with IE. Basically I have

<ol><li>
    <span class="main">
        <span class="test1"></span>
        <span class="test2"></span> 
        <span class="test3">
        <span id="test4"></span> 
        <span  id="special" class="special">
            <span class="test4">TEXT</span>
        </span>
    </span>
</li></ol>

Basically, in IE when I try and make the id="special" have rounded corners - i get a distorted view. I think its something related to problems with referencing li elements using

    jQuery('#special').corner('5px'); 

Could anyone help :) ?

Edit: Sure the CSS is

ol .special {
background-color:#111;
color:#CCC;
padding:10px;
position:relative;
}

Answer 1

Does the css class 'main' define the background color? Make sure that somewhere in the parent tree, the background color is explicitly set.

ol .main { background-color:#fff; }

Answer 2

Hey Tom,

I actually do not agree with using this implementation. I have found about 3 different ways to do rounded corners.

1. Adding extra markup (div tags) to create the rounded corners
2. Using right and left rounded corner images
3. Using top image and bottom image with rounded corners on both sides of the images

Your implementation is using #1. It is probably the easiest to implement, but at a cost.

In the state that CSS is in right now, there is no easy way to add rounded corners except these 3 ways (that i know of). I believe the first choice is the worst out of the 3 because the extra markup is unnecessary. I usually use the last one, but the second one will load faster.

One more thing, check out that page (http://jquery.malsup.com/corner/) in IE.....It is not working in IE on his implementation either. I believe he is using the FF rounded corners CSS values to do this.

Hope this helps.

Metropolis