Solved

Dropdown menu problem in IE & Firefox

Posted on 2012-04-01
8
287 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

920 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