Malsup curvy corners - My boxes have no borders
I'm using 2.11 malsup jquery curvy corners on my page here:
http://robynrowe.sanscode.com
For some reason in ie, the curvy corners script makes the border disappear.
Can anyone help me fix this?
I just tried some work around where by i wrap the box in a div and set back开发者_高级运维ground colors. No fix. Are curvy corners on IE impossible? has anyone got any ideas?
Here's a jsfiddle if you are interesting in trying it out: http://jsfiddle.net/KZYXH/
Seriously hate IE.
Anyway I had to write up some code to fix it up with jquery.
$(function(){
if($.browser.msie) $('.box').each(function(){
var c = $(this).attr('class').replace('box','');
$(this).wrap('<div class="round-fix '+c+'" />');
});
$('.round-fix').corner();
$('.round-fix .box').corner();
});
Then what was left was some CSS to get it all going
.box{
margin-bottom: 16px;
padding:10px 10px 10px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.border-pink{
border: 2px solid #EB008B;
}
.border-brown{
border: 2px solid #754C28;
background-color: #F4EDE9;
}
.border-green{
border: 2px solid #00AA00;
}
/* IE FIX */
.round-fix{
margin-bottom: 1em;
padding: 2px;
}
.round-fix .box{
background-color: white;
margin-bottom: 0;
}
.round-fix.border-pink{
background-color:#EB008B;
}
.round-fix.border-brown{
background-color:#754C28;
}
.round-fix.border-brown .box{
background-color: #F4EDE9;
}
.round-fix.border-green{
background-color: #00AA00;
}
So basically - I had a bunch of boxes where by the corners wouldn't show up because malsup using background colors and ignores border colors. I wrapped the rounded div in another div and applied the border color from the inner div to the outer div (just through css, this probably could've been done better through jquery though) and then I adding some padding on the outer box. Finally set the inner box to white, or whatever colour you normally use. Obviously this won't work for transparency, but since when does transparency behave in IE anyway :p. Also watch out if you have set a width on the inner box directly on the element, you'll need to set that width on the outer element too. that goes for any css properties that are set directly on the inner element.
精彩评论