navigation bar won't center in all browsers

Question

rizla777 0 Newbie Poster

13 Years Ago

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;
   
}

display html-css web-design

2 Contributors
5 Replies
287 Views
14 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Dandello

Dandello 8 Posting Whiz in Training

13 Years Ago

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.

Edited 13 Years Ago by Dandello because: n/a

Dandello 8 Posting Whiz in Training

13 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rizla777 0 Newbie Poster · Answer 1 · 2011-10-14T07:21:39+00:00

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.

rizla777 0 Newbie Poster · Answer 2 · 2011-10-14T10:09:00+00:00

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.

Dandello 8 Posting Whiz in Training · Answer 3 · 2011-10-14T12:12:59+00:00

Well, MSIE does things badly on so many levels.

Glad you got it working.