[RESOLVED] simple navbar problems

L

liunx

Guest
I'm doing a navbar that I derived from 'IE HACK for "Eric Meyer's Strengthening the links"' at <!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/vertical18.htm">http://css.maxdesign.com.au/listamatic/vertical18.htm</a><!-- m -->. I want to align the box from the left to the right, change the colors and width. I played around with the code and got just about everything to work except that the width is still funny.

Here's my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Navlist experiments</title>
<meta name="generator" content="TSW WebCoder">
<style type="text/css">

ul#navlist {
width: 150px;
\width: 170px;
w\idth: 150px;
padding: 0px;
border: 0px solid #808080;
border-top: 0px;
margin: 0px;
font: bold 12px verdana,helvetica,arial,sans-serif;
background: #808080;
}

ul#navlist li {
list-style: none;
margin: 0px;
border: 0px;
border-top: 0px solid #808080;
width: 150px;
}

ul#navlist li a {
display: block;
width: 150px;
\width: 150px;
w\idth: 150px;
padding: 4px 8px 4px 8px;
border: 0px;
border-right: 20px solid #aaaabb;
background: #ccccdd;
text-decoration: none;
text-align: left;
}

ul#navlist li a:link { color: #666677; }
div#navcontainer li a:visited { color: #666677; }

ul#navlist li a:hover {
border-color: #ffffff;
color: #ffffff;
background: #000d33;
}

div#navcontainer {
width: 150px;
\width: 170px;
w\idth: 150px;
}

</style>
</head>

<body>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>

</body>
</html>


Then, here's the code on the website:

CSS
ul#navlist
{
width: 158px;
\width: 160px;
w\idth: 158px;
padding: 0px;
border: 1px solid #808080;
border-top: 0px;
margin: 0px;
font: bold 12px verdana,helvetica,arial,sans-serif;
background: #808080;
}

ul#navlist li
{
list-style: none;
margin: 0px;
border: 0px;
border-top: 1px solid #808080;
}

ul#navlist li a
{
display: block;
width: 122px;
\width: 158px;
w\idth: 122px;
padding: 4px 8px 4px 8px;
border: 0px;
border-left: 20px solid #aaaabb;
background: #ccccdd;
text-decoration: none;
text-align: right;
}

ul#navlist li a:link { color: #666677; }
div#navcontainer li a:visited { color: #666677; }

ul#navlist li a:hover
{
border-color: #ff9000;
color: #ffffff;
background: #000d33;
}

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li>
</ul>
</div>

I think it has to do with w\idth and \width. I don't know exactly what they are so I just made an inference and crossed my fingers. I learned quickly that inferences and/or crossing your fingers is not something to rely completely on.The example you linked to is far more complicated than it needs to be.
<!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" xml:lang="en" lang="en">
<head>
<title>Vertical Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
ul#navlist {
width: 158px; /* Width for Standard box model */
\width: 160px; /* Botched width of IE5-Win */
w\idth: 158px; /* Width for Standard box model */
padding: 0;
border: 1px solid #808080;
border-top: 0;
margin: 0;
font: bold 12px verdana,helvetica,arial,sans-serif;
background: #808080;
}

ul#navlist li {
list-style: none;
margin: 0;
border: 0;
border-top: 1px solid #808080;
}

ul#navlist li a {
display: block;
padding: 4px 8px 4px 8px;
border: 0;
border-left: 20px solid #aaaabb;
background: #ccccdd;
text-decoration: none;
text-align: right;
zoom: 1; /* Invokes hasLayout in IE-Win, makes whole link clickable */
}

ul#navlist li a:link { color: #666677; }
div#navcontainer li a:visited { color: #666677; }

ul#navlist li a:hover {
border-color: #ff9000;
color: #ffffff;
background: #000d33;
}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">Item one</a></li
><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item two</a></li
><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item three</a></li
><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item four</a></li
><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item five</a></li
></ul>
</div>
</body>
</html>
Read the forum post I link to in my signature, entitled "Gappy Lists in Internet Explorer"What if I wanted a width of 150px. I don't quite how you calculate the \width attribute.border: 1px solid #808080; will add 1px on each side, so for left and right side it纾
 
You must log in or register to reply here.
Top