Rounded corners in IE 9?

HTML & CSS
1

Hi guys,

Cross browser testing my latest project I ran into an odd inconsistency in IE9. I have designed this page to degrade gracefully in IE, and figured that IE9 is pretty compliant and supports most CSS3 ( am disappointed in the lack of text shadow , but that’s not the issue ) so my conditional comments target IE8 and bellow.

IE9 works as expected EXCEPT… for the rounded corners in the drop down menu. This is made ever so much more curious as rounded corners work EVERYWHERE ELSE , including the hover effect of the main menu. The drop down menus are supposed to be curved at the bottom but not the top, and sub sub menus should curve in 3 corners but not one.

I am thinking I either missed something in the barrage of vendor specific border-radius declarations. OR that IE9 only supports one value , but I haven’t found any documented reports of the latter.

Maybe I just need a fresh pair of eyes to spot the error?

I think the relevant code is:


#mainNav{  float:left; width:100%;border-bottom-style: solid; border-top: solid 7px  #98a8b4; border-bottom:solid 7px  #98a8b4;background:#234e6f; }
#mainNav ul.hNav{ left:-.5em ; position: relative; padding-left:0}
#mainNav a{display:block; padding:.25em; border:2px solid transparent;}
#mainNav li { margin: .5em; position:relative}
#mainNav li:hover { background-color:#e8e7df ;color:#371f1b ; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; -moz-box-shadow:1px 0px 1px #000;-webkit-box-shadow:1px 0px 1px #000; box-shadow:1px 0px 1px #000}
#mainNav li ul  {  -moz-border-radius:0 .5em .5em .5em;-webkit-border-radius:0 .5em .5em .5em; border-radius:0 .5em .5em .5em; padding:.5em 0   }
#mainNav li li{ float:none; padding:0; margin:0}
#mainNav li:hover ul {  -moz-box-shadow: 2px 2px 2px #000;-webkit-box-shadow: 2px 2px 2px #000; box-shadow: 2px 2px 2px #000 }
#mainNav li:hover li{  -moz-box-shadow:none;-webkit-box-shadow:none; box-shadow:none;}
#mainNav li li a{padding:.33em 1em}
#mainNav li li:hover a { color:#e8e7df; }
#mainNav .menu:hover{  -moz-border-radius:.5em .5em 0 0  ;-webkit-border-radius:.5em .5em 0 0  ; border-radius:.5em .5em 0 0  ;}
#mainNav .menu li:hover{background-color:#3c2923; color:#e8e7df}
#mainNav .menu li, #mainNav .menu li.menu:hover{ -moz-border-radius:0  ;-webkit-border-radius:0  ; border-radius:0  ;}
#mainNav li ul { background-color:#e8e7df; position:absolute; width:10em; }/*change inherit*/
#mainNav .menu li:hover li{ background:none ;}
#mainNav .menu ul {   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e7df', endColorstr='#b8b5a4');	background:-ms-linear-gradient(top,#e8e7df 1.5em , #b8b5a4 );background:-moz-linear-gradient(center top,#e8e7df 1.5em , #b8b5a4 );background:-o-linear-gradient(center top,#e8e7df 1.5em , #b8b5a4 );background:-webkit-gradient(linear, center top, center bottom, color-stop(.1, #e8e7df), color-stop(1, #b8b5a4 ));background:linear-gradient(center top,#e8e7df 1.5em , #b8b5a4 );}
#mainNav .menu ul ul, #mainNav .menu ul ul  ul{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c2923', endColorstr='#231410')background:-ms-linear-gradient(top,#3c2923 1.5em , #231410 ); background-color:#3c2923;background:-moz-linear-gradient(top ,#3c2923 1.5em , #231410 );background:-o-linear-gradient(top ,#3c2923 1.5em , #231410 );background:-webkit-gradient(linear , center top , center bottom, color-stop(.1,#3c2923 ), color-stop(1,#231410 )); background:linear-gradient(center top,#3c2923 1.5em , #231410 );}
#mainNav .menu li:hover>ul {top:0; left:100%  }
#mainNav .menu:hover>ul {left:auto;  }
#mainNav li li li:hover> a { color:orange;}
#mainNav .menu  li.sub, #mainNav .menu  li.sub:hover .sub   {background-image: url(../images/design/arrow_menu1.png); background-repeat: no-repeat; background-position:right center;  }
#mainNav .menu  li.sub  li.sub:hover  {background-image: url(../images/design/arrow_menu2.png); }
#mainNav .menu  li.sub:hover, #mainNav .menu  li.sub:hover .sub {background-image: url(../images/design/arrow_menu.png); }

my full stylesheet is here :Nobium_style.css

2

It looks like the rounded corners are working, but that the background color is sticking out over the top of them. Sigh. I’m sure someone will have tried a fix for this.

I think Microsoft left text-shadow out of IE9 to help alleviate the shock designers would experience when they realized how otherwise up-to-date this browser is. :smiley:

3

It looks like the rounded corners are working, but that the background color is sticking out over the top of them. Sigh. I’m sure someone will have tried a fix for this.

that doesn’t make sense, the way I dealt with that problem in other browsers was to add padding to the ULs so the LIs shouldn’t stick out at all in fact they shoulnt even reach the edge of the UL.

4

Yeah, the background color is on the UL, though, which will normally extend into the padding area anyhow. It’s disappointing that IE has an issue with this, though. What happens if the gradient is turned off?

5

So am a 'lil confused. Its the UL has the BG color, but it also has the border-radius properties, so how could the UL’s background escape itself?

Or did you mean the filter:bg is conflicting with my border radius? That would be disappointing but fixable.

6

That’s why I wonder if the gradient is causing a conflict, but I’ve got no idea, really. You can see that the shadow is rounded, so I don’t know why the bg isn’t. :frowning:

7

Well I will experiment with that. Modern or not , IE is still 90% of my headaches. I only put that filter in there to try to emulate bg-gradients available in the other 4 major browsers. I suppose I will have to add the filters in the IE<9 stylesheet and drop the gradients all together in IE9. :frowning:

8

Yes its an old problem that i ran into also when IE9 first came out and others have documented.

The gradient filters work on the element as a whole (like the opacity filters) and kill the border-radius.

I managed to use gradients and border-radius for these nice buttons in IE9 but I made the gradient at the top transparent and accentuated the border radius with a shadow. That stopped the bleed effect because it was actually transparent where the radius was and the inset shadow still followed the border-radius.

9

I think I’ll take the Design Festival view and say farewell to CSS3 Gradients!