Question

I have nav buttons on this site: http://www.dermatologypartners.com which have rounded corners, a gradient, and a 2px border.

IE9 curves the border but not the box. Any suggestions?

If I wanted to just not have the white borders just for IE9, what would I add to the CSS? (I’ve never quite got the hang of conditional comments.)

Here’s the nav code – this is a responsive site, written “desk-top first”, so the nav code for the desktop version is:

#nav {
float:none;
width:19%;
clear:left;
margin:0;
padding:0;
}

#nav ul {
margin-left:-20px;
padding-left:10px;
}

#nav li {
list-style:none;
width:90%;
border:2px solid #fff;
background:linear-gradient(top,#adb0be0%,#ffffff45%,#ffffff55%,#adb0be100%,#ffffff100%,#adb0be100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#adb0be',endColorstr='#adb0be',GradientType=0);
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
text-align:center;
margin:10px;
padding:7px;
}

#nav a:link {
color:#162357;
font:bold 14px/28px 'Gentium Book Basic',"Times New Roman", Times, serif;
text-decoration:none;
display:block;
}

#nav a:hover {
color:#990d24;
font:bold 14px/28px 'Gentium Book Basic',"Times New Roman", Times, serif;
text-decoration:none;
}

#nav a:visited,#nav a:active {
color:#162357;
font:bold 14px/28px 'Gentium Book Basic',"Times New Roman", Times, serif;
text-decoration:none;
}

Help greatly appreciated!

Answer 1

I was able to remove the white border using a conditional comment. Not best solution but decent.