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

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
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