IE rounded corners and background images
I have an element on my page:
<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 in FF and safari (and in opera) .. but IE does nothing (as I hate IE) I did a little work and found the DD_roundies solution. http://www.filamentgroup.com/lab/achieving_rounded_corners_in_internet_explorer_for_jquery_ui_with_dd_roundi/ but unfortunately it just casts away the background and thus displays the list and title of the text with a transparent background - works fine when opacity or bg images are not used, but it clearly not relevant to my problem ... does anyone know of a solution to this? I could, of course, tear the bg image, but this seemed to be the most reliable way to get opacity working in browsers.
. , ,
..
, , , , , , .
.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)
}
- opcatiy - div, - .. ..
? - , alpha'd, /.
, M $, , , , ? tossers - , IE, .
, , Firefox Webkit. , , - . jQuery, , , Internet Explorer , . : http://jquery.malsup.com/corner/
EDIT: CSS3 , , - IE: http://www.w3.org/TR/css3-background/#the-border-radius