Tech Support Guy banner
  • Please post in our Community Feedback thread for help with the new forum software! If you are having trouble logging in, please Contact Us for assistance.
Status
Not open for further replies.
1 - 6 of 6 Posts

·
Registered
Joined
·
337 Posts
Discussion Starter · #1 ·
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.
 

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

:)

amx
 

·
Registered
Joined
·
337 Posts
Discussion Starter · #3 ·
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
{
cursor:pointer;
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 */
 

·
Registered
Joined
·
690 Posts
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
 

·
Registered
Joined
·
690 Posts
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;
}

:)
 

·
Registered
Joined
·
337 Posts
Discussion Starter · #6 ·
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
 
1 - 6 of 6 Posts
Status
Not open for further replies.
Top