rounded corners IE and background images...

Question

hi all

I have an item in my page thus:

<div class="rounded">
<h2>Heading Text</h2>
<ul>
    <li><a href="/default.aspx">Summary link</a></li>
    <li><a href="/default.aspx">Summary link</a></li>
    <li><a href="/default.aspx">Summary link</a></li>
</ul>
<p>or... some text or whatever</p>
</div>

the styles associated with this block are:

.rounded{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url("10x10.50percentalpha_white.png") repeat scroll left top transparent;
height:270px;
overflow:hidden;
padding:0 0 5px;
}

.rounded h2{
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-right-radius:5px;
border-top-left-radius:5px;
background:url("wide_rl_fade.png") repeat-y scroll right top transparent;
color:#C4161C;
font-size:130%;
padding:10px 20px;
text-align:left;
text-transform:uppercase;
}

of course this works a treat in FF and safari (and opera).. but IE doesnt do anything (how i hate IE) i have done a bit of searching around and found the DD_roundies solution.. http://www.filamentgroup.com/lab/achieving_rounded_corners_in_internet_explorer_for_jquery_ui_with_dd_roundi/ but sadly this just drops the backgrounds and thus renders the list and heading text with a transparent background - works fine when opacity or bg images are not used, but that doesnt suit my problem obviously... does anyone know of a solution to this? i could of course ditch the bg image, but this seemed to be the most reliable way to get the opacity working across browsers..

thanks

nat

Answer 1

The style you use for rounded corners is only recognised by Firefox and Webkit browsers. The only other solution you have really is the use of background images. There is a jQuery plugin I used that was quite nice but again, for Internet Explorer it just places images over the corners to achieve a rounded illusion. Here it is: http://jquery.malsup.com/corner/

EDIT: CSS3 will have a tag that achieves this, but it still is not supported by any current IE version: http://www.w3.org/TR/css3-background/#the-border-radius

Answer 2

Look up http://css3pie.com/ it uses attached behaviors to give IE some css3 capabilities.

Answer 3

not actually an answer.. dont shoot me but needed more chars than the comments would allow

thanks for the replys..

again though this does not seem to work with the backgrounds being alpha'd png's which is a shame as that appeared to be just what i needed.. tried

.rounded{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url("10x10.50percentalpha_white.png") repeat scroll left top transparent;
height:270px;
overflow:hidden;
padding:0 0 5px;
behaviour: url(path/to/PIE.htc)
}

I am using an alpha'd background image as putting opcatiy or whatever on the div, then alphas the content too.. dont want that..

any other suggestions? unless someone can explain a way to get the background nicely alpha'd without affecting the alphaness of the contained text/content.

with all the funding that M$ have why cant they get rounded corners working like everyoe else has.. eh? tossers - always spend so much time getting things to work in IE that work fine everywhere else..