[thelist] [the list] CSS problem with IE

Tue Sep 30 08:39:11 CDT 2003

I have been having a small problem with a horizontal menu list.

The main culprit seems to be this line;

width: auto;

which is inside the

#navcontainer ul li a
{
}

(Full code below)

If I set the width to a fixed amount it works fine, but as I need the 
sizes to be different as some links are quite long, (ie picture 
research).
I have ended up tearing my hair out...

Examples of using both types are here;

<http://nbpictures.art-dept.org/navtest.php> There is a link to the 
second version.

I have tested in NN7, Firebird and Safari on OSX and all is fine with 
width: auto;

On XP with IE the problem is there as well.

Many thanks in advance

Code below;

html;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>*nb pictures - nav</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="/navetest2.css" type="text/css">
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="/index.php" title="Home">home</a></li>
<li><a href="/news/index.php" title="News">news</a></li>
<li><a href="/photographers/index.php" 
title="Photographers">photographers</a></li>
<li><a href="/features/index.php" title="Features">features</a></li>
<li><a href="/portfolios/index.php" 
title="Portfolios">portfolios</a></li>
<li><a href="/printsales/index.php" title="Printsales">print 
sales</a></li>
<li><a href="/picresearch/index.php" title="Picture Research">picture 
research</a></li>
<li><a href="/contact/index.php" title="Contact">contact</a></li>
</ul>
</div>
<a href="navtest.php">first one</a>
</body>
</html>

css;

#navcontainer
{
margin: 10px 0 0 30px;
padding: 0;
height: 20px;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #fff;
width: auto;
height: 18px;
border-top: 1px solid #000099;
border-left: none;
border-bottom: 1px solid #000099;
border-right: 1px solid #000099;
padding: 0 4px 0 4px;
margin: 0 0 0 0;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
font: normal 14px/18px arial, verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #FFFFFF;
background: #000099;
}

#navcontainer a:active
{
background: #000099;
color: #cccccc;
}

#navcontainer li#active a
{
background: #000099;
border: 1px solid #000099;
color: #cccccc;
}