[RESOLVED] simple navbar problems

**crazycoder** · 03-30-2006, 02:02 PM

I'm doing a navbar that I derived from 'IE HACK for "Eric Meyer's Strengthening the links"' at http://css.maxdesign.com.au/listamatic/vertical18.htm. 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:

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="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

</body>
</html>

Then, here's the code on the website:

CSS

Code:

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

Code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">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.

**toicontien** · 03-30-2006, 04:49 PM

The example you linked to is far more complicated than it needs to be.

HTML 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" 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="#" id="current">Item one</a></li
 ><li><a href="#">Item two</a></li
 ><li><a href="#">Item three</a></li
 ><li><a href="#">Item four</a></li
 ><li><a href="#">Item five</a></li
 ></ul>
</div>
</body>
</html>

Read the forum post I link to in my signature, entitled "Gappy Lists in Internet Explorer"

**crazycoder** · 03-30-2006, 05:01 PM

What if I wanted a width of 150px. I don't quite how you calculate the \width attribute.

**jogol** · 03-31-2006, 02:02 AM

border: 1px solid #808080; will add 1px on each side, so for left and right side it´s 2px.

\width = width + 1px left border + 1px right border

**toicontien** · 03-31-2006, 01:47 PM

Learn more about Internet Explorer also doesn't support the CSS box model correctly under certain conditions and certain versions. The Box Model Problem

**crazycoder** · 03-31-2006, 06:27 PM

Got it! Thanks!

Thread: [RESOLVED] simple navbar problems

Thread Tools

Display

[RESOLVED] simple navbar problems

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions