1,105,331 Community Members

navigation bar won't center in all browsers

Member Avatar
rizla777
Newbie Poster
11 posts since Oct 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

okay so i've been at this for 2 days. i've tried recoding the entire site but nothing seems to work. It's only 1 navigation bar that is giving me a problem.
ul#sub-nav.

I can get it to align horizontally in firefox except sometimes it works in IE and sometimes. you'll notice a few display:inline;. this is the thing that's causing the problem.


Take it out and it works sometimes, put it back in and something else messes up.
If i use float, it works in firefox but not in IE. If you use float somewhere else like the ul#sub-nav li a span{float:left} it works again in firefox but not IE.
I have also tried clearing other remaining floats and made sure i added a width to any float i used but i just can't get anything.
Could anyone out there please help. It's really starting to make me hate web development -- A LOT!!!!!!
I am honestly out of ideas. I've tried googlling this thing like crazy but just can't find a solution.


Thanks
Riz

<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" href="assets/templates/site/style/site-ie9.css" /><![endif]-->
<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <meta name="viewport" content="width=320">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">


  <link rel="stylesheet" href="assets/templates/site/style/common.css">
    


  <script src="assets/js/libs/modernizr-1.7.min.js"></script>

</head>

<!-- ## set body color to the light grey behind the pig -->
<body>
<!-- ## header-wrapper set to width:100% - background belongs here-->
	<div id="header-wrapper">
<!-- ## header set to width:960px; margin:0 auto; this will center the header within the wrapper-->
		<div id="header">
			<a href=""><img src="assets/templates/site/style/images/logo-bayer-cross.png" alt="Bayer" id="bayer-logo"/></a>
			<a href="#"><img src="assets/templates/site/style/images/logo-main.png" alt="Bayer Piglet Health" id="main-logo"/></a>
			<div id="search-bar">
				<form method="post" action="#">
				<input type="image" src="assets/templates/site/style/images/btn-search.png" value="Search" alt="Search" id="search-button"/><input type="text" id="search" name="search" value="" />				
				</form>
			</div>
<!-- ## for navs use first and last classes to modify the vertical nav dividers -->
			<ul id="language-nav">
				<li class="first"><a href="#"><img src="assets/templates/site/style/images/flag-canada.png" alt="Canada"/></a></li>
				<li><a href="#">English</a></li>
				<li class="last"><a href="#">French</a></li>
			</ul>
			
		
			<ul id="main-nav">
				<li class="first"><a href="#">Home</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Register for Updates</a></li>
				<li><a href="#">Search</a></li>
				<li class="last"></li>
			</ul>
		</div>
	</div>
	
	<div id="content-wrapper">
<!-- ## bg-home is the background for the main content section -->
	    <div id="content">
<!-- ## use the arrow image as a non-repeating background with the background color set to grey -->
			<a href="#" class="callout-button"><span class="callout-text">Bayer Solution</span></a>
		 </div>
		<ul id="sub-nav">
<!-- ## use the spans to display the little arrows using them as backgrounds
ul#subnav li a span { background:url(ARROWIMAGE) no repeat; width:x; height:x; float:left; }

 -->
			<li class="first"><a href="#">Economic Effects<span class="first"></span></a></li><!---->
			<li><a href="#">Treatment and Control<span></span></a></li><!---->
			<li><a href="#">Diagnosis<span></span></a></li><!---->                     
			<li><a href="#">Cause<span></span></a></li><!---->
			<li><a href="#">Symptoms<span></span></a></li><!---->
		</ul>
	
	</div>
<!-- ## footer-wrapper set to width:100% -->
	<div id="footer-wrapper">
<!-- ## footer set to width:960px; margin:0 auto; this will center the header within the wrapper-->
		<div id="footer">
		<ul id="footer-nav">
			<li class="copyright"><sup>&copy;</sup>2011 Bayer Inc.</li>
			
				<li class="first"><a href="#">Privacy policy</a></li>
				<li><a href="#">General conditions of use</a></li>
				<li><a href="#">Imprint</a></li>
				<li><a href="#">CE Accredited Training</a></li>
				<li><a href="#">Animal Health Today</a></li>
			</ul>
			<p class="copyright2"><sup>&copy;</sup>Bayer and the Bayer Cross are registered trademarks of Bayer AG, used under license of Bayer Inc.</p>
		</div>
	</div>		


  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='assets/js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>


  <script src="assets/js/plugins.js"></script>
  <script src="assets/js/script.js"></script>


  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
  <![endif]-->


  <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
  <script>
    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
  </script>

</body>
</html>
/*This is a base css class for regular layout*/

h1, h2, h3, h4, h5, h6,
ul, li, p, a, div, body
{
   margin:0;
   padding:0;
   font-family:Arial;
   text-decoration:none;
   color:#fff;
   
}

ul, li{
   list-style:none;
}

a{
   text-decoration:none;
}
img{
   border: none;
}
body{
   background-color:#F3F3F3;
}

#header-wrapper{
   width:100%;
   background:url('images/bg-header.png') top repeat-x;
   height:109px; 
   
}

#header{
   width:960px;
   margin:0 auto;
}

ul#language-nav{
   list-style:none;
   width:145px;
   margin-top:20px;
   float:left; 
   clear:both; 
   margin-right:50px;
   width:200px;
       
}

#language-nav li{
   display:inline;
   
}
	#language-nav .first{
	  padding-right:5px;
	}
	
	#language-nav .last{
	  background:url('images/main-menu-divider.gif') no-repeat;
	  background-size:2px 22px;
	  padding-left:5px;
	  
	}
	
	#language-nav a{
      
   }

#search-bar{
   float:right; 
   width:345px;
   top:25px;
   left:5px;
   position:relative;
   clear:right;
   
}

   #search-button{
      /*display:inline;*/
      /*position:relative;*/
      float:left;
      clear:both;
   }

   #search{
      display:inline;
      position:relative;
      height:22px;
      width:261px;
   }

   #main-nav {
      float:right;
      width:365px;
      /*position:relative;*/
      margin-top:20px;
      clear:right;
      
      
   }

   #main-nav li{
     float:left;/*display:inline;*/
     font-family:Arial;
     background:url('images/main-menu-divider.gif') no-repeat;
	  background-size:2px 22px;
	  padding-left:5px;
      
   }

   
#bayer-logo{
   float:left;
   width:67px;
}

#main-logo{
   
   margin:auto;
   float:left;
   clear:right;
   margin-top:15px;
   margin-left:5px;
   width:297px;
   
}

#content-wrapper{
   width:100%;

     
}
#content{
   background:url('images/bg-home.png') top center no-repeat;
   background-color:#fff;
   height:480px;
   width:960px;
   margin:0 auto;
   padding:0;
   
   
}



ul#sub-nav{
   
  width:100%;
  float:left;
  margin:0 0 1em 0;
  padding:0;
  border-bottom:1px blue solid;
   
   
           
}

ul#sub-nav ul{
   width:960px;
   margin: 0 auto;
   padding:0;
   
}

   #sub-nav li{
   
      float:left;
      background:url('images/bg-subnav.png') top left;
      background-repeat:repeat-x;   
      
   }

   #sub-nav li a{
      color:#000;
      font-size:14px;
      display:block;
      padding:8px 15px;

   }
   
   #sub-nav li a span { 
      background:url('images/bg-subnav-arrow.png') #777 no-repeat;
      width:6px;
      height:8px; 
      padding:3px;
      float:right;
      
      
            
   }
   
   ul#sub-nav li a span.first { 
      
   }
   
   


#footer-wrapper{
   width:100%;
   background-color:#fff;
   font-size:10px;
   color:#A0A0A0;
   padding-bottom:100px;
   
   
   
}

#footer{
   width:960px;
   margin:0 auto;
  
   
}

ul#footer-nav{
   
   
}
   #footer-nav li{
      list-style:none;
      display:inline;
      padding-right:7px;
      padding-left:7px;
      
   }

   #footer-nav li.first{
   
   }

   #footer-nav a{
      color:#a0a0a0;
      font-size:10px;
      font-family:Arial;
   }

p.copyright{

}

p.copyright2{
   padding-left:5px;
   font-family:Arial;
   font-size:10px;
   color:#a0a0a0;
}

.callout-button{
   float:right;
   clear:both;
   margin-top:406px;
   left:603px;
   background:url('images/btn-bg-arrow.gif') #808080 left no-repeat;
   padding:9px;
   text-align:center;
   
}

.callout-text{
   padding-left:52px;
   padding-right:37px;
   color:#fff;
   font-family:Arial;
   
}

ul#footer-nav li.copyright{
   color:#A0A0A0;
   
}
Member Avatar
Dandello
Posting Whiz in Training
258 posts since May 2010
Reputation Points: 8 [?]
Q&As Helped to Solve: 23 [?]
Skill Endorsements: 0 [?]
 
0
 

Okay - there are in CSS two types of 'center'.
One centers text within a block: "text-align:center". This will center text or whatever (like images) within a table or a P or a div, etc. But it won't center the entire block as a unit.

The other centers the block element itself. By setting the right and left margins for the block to 'auto' as in "margin:0 auto", the margins are balanced to create a centered display. This works on centering entire tables and divs.

Hope this helps but without an actual page to look at, it's hard to guess what's happening.

Member Avatar
rizla777
Newbie Poster
11 posts since Oct 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I tried the margin-left:auto and margin-right:auto and that works but now the other problem is that the li elements don't line up horizontally in one straight line. It works in firefox but not IE.
This is THE biggest problem I'm having.

thanks though for the clarification of text-align center. i saw that it was used in a page that i googled so i thought i'd try it but it didn't seem to be the right solution.

Member Avatar
Dandello
Posting Whiz in Training
258 posts since May 2010
Reputation Points: 8 [?]
Q&As Helped to Solve: 23 [?]
Skill Endorsements: 0 [?]
 
0
 

Okay - I assume you mean the li elements aren't lining up vertically - as in the markers are all over the place instead of nicely lined up.

That's a tougher one. One solution is to put the list inside a div that's just wide enough for it, center the div using margin auto, but left align the text. You might also try margin centering the ul but left aligning the li.

Member Avatar
rizla777
Newbie Poster
11 posts since Oct 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

allright finally figured it out. i went back to basics and it worked in getting the elements to line up horizontally but i think other nav's that had a float didn't have a clear or had it where it didn't need to be. let's just say that i finally got it. now i hope it works in IE 7, and 8. IE is by far the worst browser ever and should be banned from all computers. if IE 10 doesn't get any better microsquash will officially rest in a million pieces with browsers.

Member Avatar
Dandello
Posting Whiz in Training
258 posts since May 2010
Reputation Points: 8 [?]
Q&As Helped to Solve: 23 [?]
Skill Endorsements: 0 [?]
 
0
 

Well, MSIE does things badly on so many levels.

Glad you got it working.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: