vertical navigation help

hi

i have been trying vertical navbar , has driving me mad (so css being easy use!),
i have resorted using list o rama extension width of vertical nav bigger in ie in firefox - how can make same width? -

heres example

html code:
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.htm">dog</a></li>
<li><a href="index.htm">cat</a></li>
<li><a href="index.htm">fish</a></li>
<li><a href="index.htm">rabbit</a></li>
<li><a href="index.htm">hamster</a></li>
</ul>
</div>

css code:

#navcontainer
{
float:left;
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: verdana, lucida, geneva, helvetica, arial, sans-serif;
background-color: #90bade;
color: #333;
}

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#navcontainer li
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #navcontainer li { width: auto; } (ps not sure means!)

#navcontainer li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

you're mixing pixels , ems dimensions:

padding: 5px 5px 5px 0.5em;

that's weird, no?

ems relative font size, pixels not.

then, in general, ems quite different in different browsers because have own
interpretation of em is.

pixels more reliable if want sizes same in different browsers (although
some pixels have drawbacks).
but that's main drawback of ems.

lorna17 wrote:
> hi
>
> have been trying vertical navbar , has driving me mad (so
> css being easy use!),
> have resorted using list o rama extension width of
> vertical nav bigger in ie in firefox - how can make same
> width? -
>
> heres example
>
> html code:
> <div id="navcontainer">
> <ul id="navlist">
>

• <a href="index.htm">dog</a></li>
  >
• <a href="index.htm">cat</a></li>
  >
• <a href="index.htm">fish</a></li>
  >
• <a href="index.htm">rabbit</a></li>
  >
• <a href="index.htm">hamster</a></li>
  >

> </div>
>
> css code:
>
> #navcontainer
> {
> float:left;
> width: 12em;
> border-right: 1px solid #000;
> padding: 0 0 1em 0;
> margin-bottom: 1em;
> font-family: verdana, lucida, geneva, helvetica, arial, sans-serif;
> background-color: #90bade;
> color: #333;
> }
>
> #navcontainer ul
> {
> list-style: none;
> margin: 0;
> padding: 0;
> border: none;
> }
>
> #navcontainer li
> {
> border-bottom: 1px solid #90bade;
> margin: 0;
> }
>
> #navcontainer li
> {
> display: block;
> padding: 5px 5px 5px 0.5em;
> border-left: 10px solid #1958b7;
> border-right: 10px solid #508fc4;
> background-color: #2175bc;
> color: #fff;
> text-decoration: none;
> width: 100%;
> }
>
> html>body #navcontainer li { width: auto; } (ps not sure means!)
>
> #navcontainer li a:hover
> {
> border-left: 10px solid #1c64d1;
> border-right: 10px solid #5ba3e0;
> background-color: #2586d7;
> color: #fff;
> }
>
>
>
>
>



--
seb ( ---@webtrans1.com)
http://webtrans1.com | high-end web design
downloads: slide show, directory browser, mailing list

More discussions in Dreamweaver support forum

adobe