Solved

Dropdown menu problem in IE & Firefox

Posted on 2012-04-01
8
295 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

689 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