Solved

Dropdown menu problem in IE & Firefox

Posted on 2012-04-01
8
285 Views
Last Modified: 2012-04-07
I am having a problem with my css menu bar. It looks great in Safari & Chrome, but in IE & Firefox, the dropdown pushes the top level menu items to the right.

I would greatly appreciate any help!

Here is what it looks like in Chrome:

menu in chrome
and here is what it looks like in Firefox:

menu in firefox
Here is my stylesheet for the menu.

			
#navbar, #navbar ul {
	float: left;
	white-space: nowrap;
	width: 681px;
	list-style: none;
	padding: 0px;
	border:none;
	margin:0;
	position: absolute;
	z-index:999;

}
#navbar a 	{
			color: #ffffff;
			font: 13px arial, sans-serif;
			font-weight: bold;
			padding:0;
			text-decoration: none;
			text-align: center;
			display: block;
			}
#navbar li 	{	
			position:relative;
			background-image:none;
			background-color: #07405E;
			float: left;
			margin:0;
			padding: 0;
			}
#navbar li a:hover	{
			color: #FFFFFF;
			text-decoration: none;
			}

#navbar li:hover {
			border:none;
			}			
#navbar li ul a 	{
			font: 13px arial, sans-serif;
			color: #ffffff;
			font-weight: bold;
			text-decoration: none;
			text-align: left;
			padding:0;
			text-indent: 8px;
			}	
	
#navbar li ul a:hover 	{
			background-image: none;
			color: #FFFFFF;
			text-decoration: none;
			}	
#navbar li ul 		{
			float:none;
			position: absolute;
			left: -9999px;
			border:none;
			margin: 0;				
}

#navbar li:hover ul { /* Display the dropdown on hover */
			float:none;
			position:relative;
			width:200px;
			z-index:9999;
			left:0; /* Bring back on-screen when needed */
}	
#navbar li ul li a	{
			background-color: #002441;
			width:200px;
			border: none;
			display:block;	
			padding: 5px 5px;	
			border-bottom:thin  solid #ffffff;	
			}
#navbar  li ul li a:hover {
			background-color: #466A93;				
}

#navbar li li {
	padding-right: 0px;
	width: 200px;
}
#navbar li ul a {
	width: 200px;
}



#navbar a.chapter7 {
	background:url(/images/home_nav_chapter7.jpg) no-repeat 0 0;
	width:95px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
	padding-left:20px;
}
#navbar a.chapter7:hover , #navbar a.chapter7 .active  {
	background:url(/images/home_nav_chapter7_over.jpg) no-repeat 0 0;
}
#navbar a.chapter11 {
	background:url(/images/home_nav_chapter11.jpg) no-repeat 0 0;
	width:91px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
}
#navbar a.chapter11:hover , #navbar a.chapter11 .active  {
	background:url(/images/home_nav_chapter11_over.jpg) no-repeat 0 0;
}
#navbar a.chapter13 {
	background:url(/images/home_nav_chapter13.jpg) no-repeat 0 0;
	width:90px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
}
#navbar a.chapter13:hover , #navbar a.chapter13 .active  {
	background:url(/images/home_nav_chapter13_over.jpg) no-repeat 0 0;
}
#navbar a.practice {
	background:url(/images/home_nav_practice.jpg) no-repeat 0 0;
	width:115px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
}
#navbar a.practice:hover , #navbar a.practice .active  {
	background:url(/images/home_nav_practice_over.jpg) no-repeat 0 0;
}
#navbar a.firm {
	background:url(/images/home_nav_firm.jpg) no-repeat 0 0;
	width:78px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
}
#navbar a.firm:hover , #navbar a.firm .active  {
	background:url(/images/home_nav_firm_over.jpg) no-repeat 0 0;
}
#navbar a.info {
	background:url(/images/home_nav_info.jpg) no-repeat 0 0;
	width:137px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
	padding-right:50px;
}
#navbar a.info:hover , #navbar a.info .active  {
	background:url(/images/home_nav_info_over.jpg) no-repeat 0 0;
}



#navbar a.sub_chapter7 {
	background:url(/images/sub_nav_chapter7.jpg) no-repeat 0 0;
	width:95px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
	padding-left:20px;
}
#navbar a.sub_chapter7:hover , #navbar a.sub_chapter7 .active  {
	background:url(/images/sub_nav_chapter7_over.jpg) no-repeat 0 0;
}
#navbar a.sub_chapter11 {
	background:url(/images/sub_nav_chapter11.jpg) no-repeat 0 0;
	width:91px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
}
#navbar a.sub_chapter11:hover , #navbar a.sub_chapter11 .active  {
	background:url(/images/sub_nav_chapter11_over.jpg) no-repeat 0 0;
}
#navbar a.sub_chapter13 {
	background:url(/images/sub_nav_chapter13.jpg) no-repeat 0 0;
	width:90px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
}
#navbar a.sub_chapter13:hover , #navbar a.sub_chapter13 .active  {
	background:url(/images/sub_nav_chapter13_over.jpg) no-repeat 0 0;
}
#navbar a.sub_practice {
	background:url(/images/sub_nav_practice.jpg) no-repeat 0 0;
	width:115px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
}
#navbar a.sub_practice:hover , #navbar a.sub_practice .active  {
	background:url(/images/sub_nav_practice_over.jpg) no-repeat 0 0;
}
#navbar a.sub_firm {
	background:url(/images/sub_nav_firm.jpg) no-repeat 0 0;
	width:78px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
}
#navbar a.sub_firm:hover , #navbar a.sub_firm .active  {
	background:url(/images/sub_nav_firm_over.jpg) no-repeat 0 0;
}
#navbar a.sub_info {
	background:url(/images/sub_nav_info.jpg) no-repeat 0 0;
	width:137px;	
	height:51px;
	float:left;
	text-align:center;
	color:#FFFFFF;
	text-decoration:none;
	line-height:51px;
	padding-right:50px;
}
#navbar a.sub_info:hover , #navbar a.sub_info .active  {
	background:url(/images/sub_nav_info_over.jpg) no-repeat 0 0;
}

Open in new window

0
Comment
Question by:techbots
  • 4
  • 3
8 Comments
 
LVL 9

Expert Comment

by:suvmitra
ID: 37794469
Since you are using text only in the Menu bar it varies the length in different browsers since each browser has its own default, font size, resolution etc. I would suggest using images for the Menu Bar items and then try the preview in different browsers.
0
 
LVL 1

Author Comment

by:techbots
ID: 37794570
I am using images for the main menu bar items such as " chapter 7" "chapter 11" , etc.
0
 
LVL 9

Expert Comment

by:suvmitra
ID: 37794580
Ok..I just noticed that!

I'm afraid there is always problem viewing the same thing in different browsers! Try adjusting the main page, related Divs etc, Hight, Weight.

First change the values to fit in the Problem browsers. Check in which screeen resolution they are looking good, adjust accordingly etc.
0
 
LVL 1

Author Comment

by:techbots
ID: 37795348
I've got the right height, width values. That isn't the problem. I've spent hours of trial and error already. I suspect there is an issue with the floats, an overflow or display value, but I have no idea where and need some more specific advice.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 9

Expert Comment

by:suvmitra
ID: 37795385
I can only think of revisiting the CSS or HTML tag where you are specifying the list.

I found something similar on other sites, if you have not found this already then may be helpful

Problem in View

CSS Trouble
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 37796995
Do you have the HTML for me or maybe a preview link so that i can test it better?
0
 
LVL 1

Accepted Solution

by:
techbots earned 0 total points
ID: 37797070
After many more hours of trial and error, I solved the problem myself.
0
 
LVL 1

Author Closing Comment

by:techbots
ID: 37818671
Solved myself
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now