alright here is the problem im trying to get a certain menu to have a thin border but in firefox the only way I could do this was to set it to .1em which makes it look chunky in IE so i tried to do some conditional comments to link to an IE styles page but it isnt working here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LeftNavBar</title>
<!--[if IE]>
<link rel="Stylesheet" href="ie_style.css" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
/* --------GLOBAL Elements*/
body {
margin-top: 10px;
}
/* --------VERTICAL NAV BAR Elements*/
#top {
margin: 0px;
font-family: verdana, arial, helvetical, sans-serif;
height: 22px;
width: 202px;
font-size: 12px;
}
#top a {
display: block;
background-image: url(images/navert_top.gif);
background-repeat:no-repeat;
color: #FFFFFF;
padding: 4px 12px;
width: 202px; /*was 178, image is 202px */
/*background-color: #4f70ac;*/
text-decoration: none;
font-weight: bold;
}
#top a:hover {
display: block;
background-image: url(images/navert_top_.gif);
color: #003366;
}
#navcontainer {
margin-left: 0px;
font-family: verdana, arial, helvetical, sans-serif;
width: 200px; /* moved jw */
list-style-type: none;
border-right: 1px solid #4f70ac;
border-left: 1px solid #4f70ac;
border-bottom: 1px solid #4f70ac;
}
#navcontainer ul {
margin: 0;
padding: 0;
font-size: 12px;
}
#navcontainer li {
margin:0;
list-style-type: none;
font-size: 12px;
}
#navcontainer li a {
display: block;
padding: 5px 12px 5px;
width: 176px;
color: #fff;
background-color: #4f70ac;
text-decoration: none;
font-weight: bold;
border-bottom: .1em solid #fff; /*William*/
}
#navcontainer li a:hover {
color: #003366;
background-color: #e0e1e1;
text-decoration: none;
border-bottom: .1em solid #fff;/*William*/
font-weight: bold;
}
#navcontainer ul ul li {
margin: 0 0 0 0;
font-size: 10px;
color: #000;
text-indent: -12px;
}
#navcontainer ul ul a {
display: block;
padding: 2px 6px 2px 24px;
width: 170px;
color: #000;
background-color: #fff;
text-decoration: none;
font-weight: bold;
}
#navcontainer ul ul a:hover {
background-color: #fff;
text-decoration: none;
color: #FF0000;
}
/*Candice and William*/
#endtab {
margin: 0 0 0 0;
font-family: arial, helvetical, sans-serif;
width: 190px; /* moved jw */
line-height: 2em;
align: left;
border-left: 1px solid #4f70ac;
padding-top:2px;
padding-left:8px;
}
#endtab p {
margin-top: 0.5em;
margin-bottom: 0.5em;
line-height: 1.3em;
align: left;
height: 1.5em;
text-align: center;
vertical-align: middle;
background-color: #ed7f0c;
}
#endtab p a {
width: 185px;
padding:0;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 12px;
}
-->
</style>
</head>
<body>
<p>
<div id="top"><a href="#">Educational Technology </a></div>
<div id="navcontainer" >
<ul id="navlist">
<!-- <li id="active"><a href="#" id="current">Educational Technology </a>-->
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">> Computer Labs </a></li>
<li><a href="#">> Distance Education </a></li>
<li><a href="#">> Web Course Tools/WebCT </a></li>
<li><a href="#">> Media Services </a></li>
<li><a href="#">> Library </a></li>
<li><a href="#">> Adaptive Technologies</a></li>
<li><a href="#">> Consulting Services & Training Faculty</a></li>
</ul>
<li id="active"><a href="#">Communication Services </a></li>
<li id="active"><a href="#">Hardware & Software </a></li>
<li id="active"><a href="#">UMass Web Services </a></li>
<li id="active"><a href="#">Computer Viruses & Security </a></li>
<li id="active"><a href="#">Information Systems</a></li>
<li id="active"><a href="#">About Information Services </a></li>
</ul>
</div>
<div id="endtab">
<p><a href="#">:: CURRENT Help Issues ::</a></p>
<p style="background-color:#309D66;"><a href="#">:: IT Forms ::</a></p>
</div>
</p>
<p>
and then the ie css
/* --------GLOBAL Elements*/
body {
margin-top: 10px;
}
/* --------VERTICAL NAV BAR Elements*/
#top {
margin: 0px;
font-family: verdana, arial, helvetical, sans-serif;
height: 22px;
width: 202px;
font-size: 12px;
}
#top a {
display: block;
background-image: url(images/navert_top.gif);
background-repeat:no-repeat;
color: #FFFFFF;
padding: 4px 12px;
width: 202px; /*was 178, image is 202px */
/*background-color: #4f70ac;*/
text-decoration: none;
font-weight: bold;
}
#top a:hover {
display: block;
background-image: url(images/navert_top_.gif);
color: #003366;
}
#navcontainer {
margin-left: 0px;
font-family: verdana, arial, helvetical, sans-serif;
width: 200px; /* moved jw */
list-style-type: none;
border-right: 1px solid #4f70ac;
border-left: 1px solid #4f70ac;
border-bottom: 1px solid #4f70ac;
}
#navcontainer ul {
margin: 0;
padding: 0;
font-size: 12px;
}
#navcontainer li {
margin:0;
list-style-type: none;
font-size: 12px;
}
#navcontainer li a {
display: block;
padding: 5px 12px 5px;
width: 176px;
color: #fff;
background-color: #4f70ac;
text-decoration: none;
font-weight: bold;
border-bottom: .5px solid #fff;
}
#navcontainer li a:hover {
color: #003366;
background-color: #e0e1e1;
text-decoration: none;
border-bottom: .5px solid #fff;
font-weight: bold;
}
#navcontainer ul ul li {
margin: 0 0 0 0;
font-size: 10px;
color: #000;
text-indent: -12px;
}
#navcontainer ul ul a {
display: block;
padding: 2px 6px 2px 24px;
width: 170px;
color: #000;
background-color: #fff;
text-decoration: none;
font-weight: bold;
}
#navcontainer ul ul a:hover {
background-color: #fff;
text-decoration: none;
color: #FF0000;
}
/*Candice and William*/
#endtab {
margin: 0 0 0 0;
font-family: arial, helvetical, sans-serif;
width: 190px; /* moved jw */
line-height: 2em;
align: left;
border-left: 1px solid #4f70ac;
padding-top:2px;
padding-left:8px;
}
#endtab p {
margin-top: 0.5em;
margin-bottom: 0.5em;
line-height: 1.3em;
align: left;
height: 1.5em;
text-align: center;
vertical-align: middle;
background-color: #ed7f0c;
}
#endtab p a {
width: 185px;
padding:0;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 12px;
}