HTML and CSS

CSS seperator problem

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: May 2004

Posts: 1,478

Reputation: mikeandike22 is an unknown quantity at this point

Solved Threads: 18

mikeandike22 mikeandike22 is offline

Offline

Nearly a Posting Virtuoso

CSS seperator problem

Jul 28th, 2006

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
[HTML]<!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>



<style type="text/css">

</style>

</head>

<body>
<p>
<div id="top"><a href="#">Educational Technology </a></div>
<div id="navcontainer" >
<ul id="navlist">

<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>[/HTML]

and then the ie css
[HTML]/* --------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;
}[/HTML]

My Daniweb Blog: This,That, and Everything Else (Blog contest winner)

GetFirefox!
GetOpera!

•

Join Date: Jul 2004

Posts: 166

Reputation: Lafinboy is an unknown quantity at this point

Solved Threads: 7

Lafinboy

Offline

Junior Poster

Re: CSS seperator problem

Jul 29th, 2006

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.

If I've been a help please confirm by clicking the Add to Lafinboy's Reputation link in the header of this reply.

Lafinboy Productions
:: Website Design :: Website Development ::

•

Join Date: May 2004

Posts: 1,478

Reputation: mikeandike22 is an unknown quantity at this point

Solved Threads: 18

mikeandike22 mikeandike22 is offline

Offline

Nearly a Posting Virtuoso

Re: CSS seperator problem

Jul 29th, 2006

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