• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 674
  • Last Modified:

CSS drop down menu moving firefox

I've got a horizontal CSS navigation with a single level drop down menu running at the top of my page.
Surprisingly, all happy in IE7
Get to Firefox and when I drop down the content of the page moves to the left.
How to I fix this?

@charset "utf-8";
/* CSS Document */
 
#header {
	background-image:url(../images/mps_images/background.jpg);
	background-position: bottom;
	background-repeat:repeat-x;
	min-height: 150px;
	/*	background-color: #04044C;*/
	background-color:#04044C;
}
 
/*------------------------------------------------NAVIGATION BAR -----------------------------*/
 
/*Navigation menu container*/
#nav_bar {
	margin:auto;
	padding:10px 0px 10px 0px;
	position:relative;
	text-align:center;
	width:90% ;/*positions how far across the page the navigation bar will go */
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	z-index:600;
}
 
#nav_bar ul {
	padding:0;
	margin:0;
	list-style-type: none;
	height:50px;/*need to have the same hight in nav_bar a, nav_bar a:hover and nav_bar [main container] to get the background images to fit properly */
	background:#00297a; /*mps blue*/
	background-image:url(../images/navbar_background.jpg);
	background-repeat:repeat-x;
	background-position:center;
}	
 
#nav_bar li {
	width:12%;/*7em*/
	float:left;
	position:relative;
	line-height:40px;
}
 
#nav_bar a, #menu a:visited {
	display:block;
	font-weight:800;
	text-decoration:none;/*removes the bullet points and the underline in the list */
	color:#FFFFFF;
	height:50px;/*need to have the same hight in nav_bar a, nav_bar a:hover and nav_bar [main container] to get the background images to fit properly */
	background:#00297a; /*mps blue*/
	background-image:url(../images/navbar_background.jpg);
	background-repeat:repeat-x;
	background-position:center;
}
 
 
#nav_bar ul ul {
	display: none;
	}
 
#nav_bar li:hover ul{
	left:auto;	
}	
#nav_bar li li {
position:relative;
width:100%;
margin:0;
}
 
	
#nav_bar li ul a, #nav_bar li ul a:visited {
	line-height:20px;	
}
 
/*Creating the hoverover effect*/
#nav_bar :hover > a, #nav_bar ul ul :hover > a {
	color:#ffffff;
	background-image:url(../images/navbar_background_hover.jpg);
	background-repeat:repeat-x;
	border-left:#FF0000;
	border-left-style:double;
	}
 
/*Allows the submenu to be showen when hovering over*/		
#nav_bar ul li:hover ul{
display:block;
	
	}
	
/*-----------------------------------------END NAVIGATION BAR --------------------------------------------*/

Open in new window

0
dragonlady111
Asked:
dragonlady111
  • 5
  • 5
4 Solutions
 
mstrelanCommented:
check out htmldogs write up on css suckerfish menus
http://htmldog.com/articles/suckerfish/dropdowns/
0
 
dragonlady111Author Commented:
I've added a clear:left to the content css file (seperate from the navigation css), now what I get is everything beutifully lined up, but pushing the content down when hovering over the submenu in firefox (still works find in ie)
0
 
mstrelanCommented:
if you can post your html file (stripped down to just the menu if you like) and your css code i can take a look at it
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.

 
dragonlady111Author Commented:
html on each page:

<link href="/Templates/nav.css" rel="stylesheet" type="text/css" />
<link href="/Templates/content.css" rel="stylesheet" type="text/css" />
<link href="/Templates/footer.css" rel="stylesheet" type="text/css" />

</head>
<body >
<?php
include("/Templates/navigation.html");
?>
<div id="container"> ....
 
the content css gets a little convoluted so I'll only post if truely needed.
Basic file breaks down to:
Body
[navigation gets imported]
<container>
- <sidebar1>
-  -  <sidebar>
-  -  - <sidebarbody>
-  -  - </end sidebar body>
-  -  -  <sidebar footer>
-  -  - </end side bar footer>
-  -  </end side bar>
</end sidebar1>
<sidebar2>
</end sidebar2>
<main content>
</end main content>
[include footer php]
</end container>
</end body>
 

Navigation lives on it's on html file and is brought in via php (css for this is above):
 
	<div id="header"><br />&nbsp; <img src="../Logos/Logo.png" width="198" height="95" /><br />
		<div id="nav_bar">
            <ul>
                <li class="active"><a href="index.html">HOME</a></li>  
              <li class="active"><a href="publications.html">PUBLICATIONS</a></li>
              <li class="active"><a href="mpstv.html">MPS TV</a></li>
              <li class="active"><a href="events.html">EVENTS</a> </li>     
          <li class="on"><a href="investing.html">INVESTING</a>
                    <ul>
                        <li><a href="transactions.html">Transactions</a></li>
                        <li><a href="portfolio.html">Model Portfolio</a> </li>
                        <li><a href="companies.html">Companies we've worked with</a></li>
                    </ul>
              </li>
              <li class="active"><a href="mailing_list.html">MAILING LIST </a></li>
              <li class="active"><a href="links.html">LINKS</a></li>
          <li class="on"><a href="contacts.html">CONTACT</a>
                	<ul>
                	    <li><a href="employment.html">Employment Oppertunities</a></li>
                    </ul>
              </li>
          </ul>
		</div>
	  <!-- end nav_bar div !-->
 <br /><br /> <br />   
 </div>

Open in new window

0
 
mstrelanCommented:
I recreated your file as below and it seems to work flawlessly in firefox and doesn't work at all in ie7. have i missed anything important? code I used is below. do you get the same behaviour if you use just the code below?
<style>
/* CSS Document */
 
#header {
	background-image:url(../images/mps_images/background.jpg);
	background-position: bottom;
	background-repeat:repeat-x;
	min-height: 150px;
	/*	background-color: #04044C;*/
	background-color:#04044C;
}
 
/*------------------------------------------------NAVIGATION BAR -----------------------------*/
 
/*Navigation menu container*/
#nav_bar {
	margin:auto;
	padding:10px 0px 10px 0px;
	position:relative;
	text-align:center;
	width:90% ;/*positions how far across the page the navigation bar will go */
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	z-index:600;
}
 
#nav_bar ul {
	padding:0;
	margin:0;
	list-style-type: none;
	height:50px;/*need to have the same hight in nav_bar a, nav_bar a:hover and nav_bar [main container] to get the background images to fit properly */
	background:#00297a; /*mps blue*/
	background-image:url(../images/navbar_background.jpg);
	background-repeat:repeat-x;
	background-position:center;
}
 
#nav_bar li {
	width:12%;/*7em*/
	float:left;
	position:relative;
	line-height:40px;
}
 
#nav_bar a, #menu a:visited {
	display:block;
	font-weight:800;
	text-decoration:none;/*removes the bullet points and the underline in the list */
	color:#FFFFFF;
	height:50px;/*need to have the same hight in nav_bar a, nav_bar a:hover and nav_bar [main container] to get the background images to fit properly */
	background:#00297a; /*mps blue*/
	background-image:url(../images/navbar_background.jpg);
	background-repeat:repeat-x;
	background-position:center;
}
 
 
#nav_bar ul ul {
	display: none;
	}
 
#nav_bar li:hover ul{
	left:auto;
}
#nav_bar li li {
position:relative;
width:100%;
margin:0;
}
 
 
#nav_bar li ul a, #nav_bar li ul a:visited {
	line-height:20px;
}
 
/*Creating the hoverover effect*/
#nav_bar :hover > a, #nav_bar ul ul :hover > a {
	color:#ffffff;
	background-image:url(../images/navbar_background_hover.jpg);
	background-repeat:repeat-x;
	border-left:#FF0000;
	border-left-style:double;
	}
 
/*Allows the submenu to be showen when hovering over*/
#nav_bar ul li:hover ul{
display:block;
 
	}
 
</style>
 
	<div id="header"><br />&nbsp; <img src="../Logos/Logo.png" width="198" height="95" /><br />
		<div id="nav_bar">
            <ul>
                <li class="active"><a href="index.html">HOME</a></li>
              <li class="active"><a href="publications.html">PUBLICATIONS</a></li>
              <li class="active"><a href="mpstv.html">MPS TV</a></li>
              <li class="active"><a href="events.html">EVENTS</a> </li>
          <li class="on"><a href="investing.html">INVESTING</a>
                    <ul>
                        <li><a href="transactions.html">Transactions</a></li>
                        <li><a href="portfolio.html">Model Portfolio</a> </li>
                        <li><a href="companies.html">Companies we've worked with</a></li>
                    </ul>
              </li>
              <li class="active"><a href="mailing_list.html">MAILING LIST </a></li>
              <li class="active"><a href="links.html">LINKS</a></li>
          <li class="on"><a href="contacts.html">CONTACT</a>
                	<ul>
                	    <li><a href="employment.html">Employment Oppertunities</a></li>
                    </ul>
              </li>
          </ul>
		</div>
	  <!-- end nav_bar div !-->
 <br /><br /> <br />
 </div>

Open in new window

0
 
dragonlady111Author Commented:
Not sure what was changed, but still works fine in ie7 for me and still pushing the page content down when hovering over the dropdown submenu
0
 
mstrelanCommented:
try adding position:absolute to the opened menus
/*Allows the submenu to be showen when hovering over*/
#nav_bar ul li:hover ul{
display:block;
position: absolute;
}

Open in new window

0
 
dragonlady111Author Commented:
well... the works beautifully in firefox, now I've got ie7 doing strange things.
the drop down has indented itself [still displaying at 12% of the total as it's supposed to, but has moved about half again to the right]
added a width - otherwise was going all over the show in ie7
#nav_bar ul li:hover ul{
display:block;
position:absolute;
width:100%;
 }
0
 
dragonlady111Author Commented:
Ok - found a work around for this - is there a better way?
#nav_bar {
 margin:auto;
 padding:10px 0px 10px 0px;
/*text-align:center;*/ [Removed text-align:center:]
 text-align:left;  [Added text-align:left] - this seems to bring all the dropdowns directly underneath where they should be
width:90% ;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;

#nav_bar a, #menu a:visited {
 display:block;
 text-align:center; [Added text align:center here - which seems to put all the links back sitting pretty in the center of things]
 font-weight:800;
 text-decoration:none;
 color:#FFFFFF;
 height:50px;
 background:#00297a; /
 background-image:url(../images/navbar_background.jpg);
 background-repeat:repeat-x;
 background-position:center;
}
 
So far works in ie7 and in firefox - but there surely must be a much better way, as there is just no logic to this actually working
0
 
David S.Commented:
Congratulations on finding a solution.

Actually, it does make sense. IE5-7 let the text-align property affect how left:auto is calculated on absolutely positioned elements.  If you don't like that solution use left:0 instead of left:auto
0
 
mstrelanCommented:
What kravimir said
0

Featured Post

Technology Partners: 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!

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now