SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering in Firefox

    Can someone explain to me why this won't center the "navbar2" in Firefox? Trying to learn and not sure what I'm doing wrong.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    <head>
    
    <style type="text/css">	<!--
    	body {
    		margin: 5px;
    		padding: 5px;
    		font-family: Arial, Helvetica, sans-serif;
    	}
    	div#outer {
    		text-align: center;
    		border: thin solid Black;
    	}
    	div#navbar2 {
    		height: 30px;
    		width: 400px;
    		border-top: solid #000 1px;
    		border-bottom: solid #000 1px;
    		background-color: #336699;
    	}
    	div#navbar2 ul {
    		margin: 0px;
    		padding: 0px;
    		color: #FFF;
    		line-height: 30px;
    		white-space: nowrap;
    		font-weight: bold;
    		font-size: 12px;
    	}
    	div#navbar2 li {
    		list-style-type: none;
    		display: inline;
    	}
    	div#navbar2 li a {
    		text-decoration: none;
    		padding: 7px 10px;
    		color: #FFF;
    	}
    	div#navbar2 li a:link {
    		color: #FFF:
    	}
    	div#navbar2 li a:visited {
    		color: #CCC;
    	}
    	div#navbar2 li a:hover {
    		font-weight: bold;
    		color: #FFF;
    		background-color: #3366FF;
    	}
    	-->
    </style>
    <title>Horizontal CSS Button</title>
    </head>
    
    <body>
    <div id="outer">
    	<div id="navbar2">
    		<ul>
    			<li><a href="link1.html">link one</a></li>
    			<li><a href="link1.html">link two</a></li>
    			<li><a href="link1.html">link three</a></li>
    			<li><a href="link1.html">link four</a></li>
    			<li><a href="link1.html">link five</a></li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Manchester
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try Using,

    div#navbar2 {
    margin: auto;
    height: 30px;
    width: 400px;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color: #336699;
    }

  3. #3
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok but why does margin: auto; make it work?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    ok but why does margin: auto; make it work?
    Because thats what is was designed for

    Well thats not exactly correct its actually margin-left:auto and margin-right:auto that does the centering.

    (ie mac likes the longhand version better than margin:auto anyway)

    Setting the left and right margins to auto is the same as saying let them be equal in length. So the margins will be equalised and this will automatically centre the element. (The element needs to have a specified width for this to work).

    If the left expands as much as it can and the right expands as much as it can then the element must be centred.

    See the faq for some notes on ie5 and 5.5. that need text-align:center to center elements.

    Paul

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2004
    Location
    Minneapolis, MN
    Posts
    1,924
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use margin: 0 auto so it only centers horizontally, otherwise it centers perfectly in the page which messes up most designs.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by charmedlover
    I would use margin: 0 auto so it only centers horizontally, otherwise it centers perfectly in the page which messes up most designs.
    I'm afraid that top and bottom margins with auto don't work in the same way as left and right margins do (unfortunately) so it would make no difference.

    Margin:auto will not center the element vertically so its no different from margin:0 auto. The only difference is that you will probably upset ie5 mac that likes the longhand version (if anyone still cares about ie5 mac ).

    Paul

  7. #7
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks guys


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •