# Solved: Fixing CSS nav bar



## Dougj (Sep 17, 2002)

I am using a CSS only nav bar on a site. It has a style sheet property set to

width: 740px 

to force it to that size so that the menu wil not pverlap on itself when the browser is resized smaller. It works great in IE 6 & 7 but in opera 9 and firefox 2 the menu does overlap onto itself.

Is there a style to force it to stay in one row?

Here is the part of the CSS that sizes the nav bar:

#menuh-container /* positions menu on page */
{
position: static; /* forces menu to be placed where i programmed it in code */
width: 740px; /* forces menu bar to fixed width so it will not overlap on itself when browser is resized */

}

D.


----------



## amanxman (Mar 28, 2006)

think u need to give us some more code (or even better live version) of html and css before we can help!



amx


----------



## Dougj (Sep 17, 2002)

Site is here:

http://www.cusegama.ca/Test Site/index.html

and here is the menuh.css:

/* Begin CSS Drop Down Menu */

#menuh-container /* positions menu on page */
{
position: static; /* forces menu to be placed where i programmed it in code */
width: 740px; /* forces menu bar to fixed width so it will not overlap on itself when browser is resized */

}

#menuh
{
font-size: 13px;
font-family: tahoma, arial, sans-serif;
width:100%;
float:left;
margin: 0em;
margin-top: 0em;
}

#menuh a
{
text-align: center;
display:block;
border: 0px solid #000;
white-space:nowrap;
margin:0;
padding: 6px; /* sets nav bar height */
}

#menuh a, #menuh a:visited	/* menu at rest */
{
color: white;
background-color: #ab1113;
text-decoration:none;
}

#menuh a:hover	/* menu at mouse-over */
{
color: white;
background-color: cornflowerblue;
}

#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url("../images/navdown_white.gif");
background-position: right center;
background-repeat: no-repeat;
}

#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url("../images/nav_white.gif");
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:14.28em;	/* width of all menu boxes */
}

#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */


----------



## amanxman (Mar 28, 2006)

I had a look in FF and saw the drop down - i edited the css and found this amend fixed it in FF:

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:14.23em;	/* width of all menu boxes */
}

CHANGE: changed width from 14.28 to 14.23.

Note, im not sure what affect this has on IE, it might hopefully not make any issues.

Also, ideally change the em size to a px size. It's easier to work with cross browser that way and that might be what's causing the problem as different browsers will render em sizes different where as px is standard.

width: 185px seems to be right.

Lemme know how this goes and if it's still ok in IE as px rather than em
Good luck

amx


----------



## amanxman (Mar 28, 2006)

oh and on a side note:

#menuh a:hover /* menu at mouse-over */
{
color: white;
background-color: cornflowerblue;
}


you want to change the color cornflowerblue to an actual hex value - for example #ffffff = white. U might get accessibility issues using color names rather than hex values, and it's also invalid css 

The hex value of the cornflowerblue you are using is: 6495ED

So go for this instead:
#menuh a:hover /* menu at mouse-over */
{
color: white;
background-color: #6495ED;
}


----------



## Dougj (Sep 17, 2002)

changing it from em to 185px seems to do the trcik for most cross browser compatability. Works in Opera 9, FF 2, IE 6 & 7 so thanks for the suggestions..


Doug


----------

