Quick tip for vertical menu button styles and IE 7

Posted by Community Admin on 05-Aug-2018 15:17

Quick tip for vertical menu button styles and IE 7

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 15-Jun-2012 00:00

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!

This thread is closed