CSS seperator problem

Question

mikeandike22 18 Nearly a Posting Virtuoso

17 Years Ago

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&nbsp;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">&gt; Computer Labs </a></li>
          <li><a href="#">&gt; Distance Education </a></li>
          <li><a href="#">&gt; Web Course Tools/WebCT </a></li>
          <li><a href="#">&gt; Media Services </a></li>
          <li><a href="#">&gt; Library </a></li>
          <li><a href="#">&gt; Adaptive Technologies</a></li>
          <li><a href="#">&gt; Consulting Services & Training Faculty</a></li>
        </ul>
    <li id="active"><a href="#">Communication Services </a></li>
    <li id="active"><a href="#">Hardware &amp; 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;
        }

web-design

2 Contributors
2 Replies
89 Views
1 Day Discussion Span
Latest Post 17 Years Ago Latest Post by mikeandike22

All 2 Replies

Lafinboy 4 Junior Poster

17 Years Ago

There doesn't appear to be anything wrong with your conditional comment, other than it comes before your embedded styles, and so matching definitions in each set will be overwritten by the embedded styles.

Why are you using .1em as a border width? Stick to specifying border widths (especially thin ones) with pixels.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mikeandike22 18 Nearly a Posting Virtuoso · Answer 1 · 2006-07-30T06:18:37+00:00

I fixed it with a conditional comment that said if it is not IE to set the border to 1px instead of .5px which for some reason does not display correctly in firefox and netscape

CSS seperator problem

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers