Solved

Dropdown menu problem in IE & Firefox

Posted on 2012-04-01
8
289 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Why won't this text float to the left 8 32
.php tree directory? 5 70
Botom of page is wrong color 5 10
Changing Color of Page Section 4 21
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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 items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

805 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