Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Dropdown menu problem in IE & Firefox

Posted on 2012-04-01
8
Medium Priority
?
300 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

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!

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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…
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Suggested Courses

636 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