SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)

    rounded corners in IE 9?

    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:
    Code:
    #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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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.

    Quote Originally Posted by dresden_phoenix View Post
    IE9 is pretty compliant and supports most CSS3 ( am disappointed in the lack of text shadow ... )
    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.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I think I'll take the Design Festival view and say farewell to CSS3 Gradients!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •