Quick tip for vertical menu button styles and IE 7 - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Quick tip for vertical menu button styles and IE 7

  • Quick tip for vertical menu button styles and IE 7
  • I styled the vertical menu to output rounded corner buttons in modern browsers and default to rectangular in lower browser versions.  I came across an issue where IE 7 was completely mashing up the buttons so wanted to share what I did that solved my problem.

    First of all, there are several ways to skin a cat so I am not saying this is the only or even best way to do this, but it works for my style of css ;P

    Here is the markup:
    .RadTabStrip_topnav .rtsLI, .RadTabStrip_sidenav .rtsLI 
        margin: 0;
        padding: 9px 12px 11px;
        width: 168px;
        font-weight: bold;
        font-size: 13px; font-size: 1.3rem;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        -moz-box-shadow: 0 7px 10px rgba(50,50,50,.25);
        -webkit-box-shadow: 0 7px 10px rgba(50,50,50,.25);
        box-shadow: 0 7px 10px rgba(50,50,50,.25);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 8px;
        background: #24b364;
        outline: none;
     
    .RadTabStrip_topnav .rtsLink, .RadTabStrip_sidenav .rtsLink
        color: #fff;
        text-align: center;
     
    .RadTabStrip_topnav .rtsLI:hover, .RadTabStrip_sidenav .rtsLI:hover
        background: #2b4b9f !important;
     
    div.RadTabStrip_sidenav
        display:block !important;
        margin: auto;
        width: 180px;
     
    .RadTabStrip_sidenav .rtsLI
        margin: 0 0 15px 0;
        padding: 13px 6px 15px;
     
    .RadTabStrip_sidenav .rtsLink
        font-size: 15px; font-size: 1.5rem;
     
    .RadTabStrip_sidenav .rtsOut, .RadTabStrip_sidenav .rtsIn, .RadTabStrip_sidenav .rtsLink
        padding: 0 !important;
      

    IE 7 was ignoring margins and stacking the buttons on top of each other due to this rule that gets embedded with the Sitefinity resources.
    * + HTML .RadTabStripVertical .rtsLI
         display: inline;

    Fixing this for my solution was quick partly because I am also using modernizr so I already have some extra classes available, but you could also just use a seperate css file for IE7 compatibility issues.
    html.lt-ie9.lt-ie8 .RadTabStrip_sidenav .rtsLI
        display: block !important;

    Hope this helps anyone who might be trying to do something similar!