+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Quick tip for vertical menu button styles and IE 7

Quick tip for vertical menu button styles and IE 7

1 posts, 0 answered
  1. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    15 Jun 2012
    Link to this post
    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!
1 posts, 0 answered