SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to align the list in firefox and chrome?

    This is my html code
    Code:
    <div class="wrapper">
    		<div id="nav">
    			<ul id="navList" class="grid_24 alpha omega">
    				<li class="selected"><a href="../index.html">HOME</a></li>
    				<li class="non-selected"><a href="services.html">Services</a></li>
    				<li class="non-selected"><a href="#">Blog</a></li>
    				<li class="non-selected"><a href="#">Contact</a></li>
    			</ul>	
    		</div>
    	</div>
    The CSS code is
    Code:
    body{
    	margin: 0;
    	padding: 0;
    	background: transparent url(../img/headerBg.png) repeat-x;
    }
    
    a{
    	text-decoration: none;
    	color: #125a73;
    	font: 20pt "myriad pro", arial, sans-serif;
    	font-weight:bold;
    }
    
    a:hover{
    	text-decoration: underline;
    	color: #2788a9
    }
    
    #nav{
    	background: transparent url(../img/logo.png) no-repeat;
    	background-position: center 15px;
    	height: 150px;
    }
    
    #navlist li{
    	text-transform: uppercase;
    	display: inline-block;
    	margin:25px 0 0 50px;
    }
    The problem is, in chrome the list items are aligned to the center of the background image but in firefox the items are way toward the bottom of the background image.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    It's hard to see from that snippet as they look the same to me in chrome and Firefox but teh problem may be the inline-block as you haven't set the alignment. Some browers align by default to the bottom and some to the middle or top so you need ot be explicit.

    e.g.
    Code:
    #navlist li {
    	text-transform: uppercase;
    	display: inline-block;
    	vertical-align:top;
    	margin:25px 0 0 50px;
    }
    Be careful when using height (as in #nav) as yu rarely want to contain text by using a px height.

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well now that you mentioned I placed the margin in the nav container instead of setting the margin on the list and wolla it worked out.
    Code:
    #nav{
    	background: transparent url(../img/logo.png) no-repeat;
    	background-position: center 15px;
    	height: 150px;
    	margin:50px 0 0 50px;
    }
    But why did that happen??? Is it because different browser render the margin as well differently?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I'd need to see your page to see exactly what's going on but it could be anything from margin-collapse to the default margin padding on the ul that you haven't accounted for. I assume you have a valid doctype as the code above does not work for me because you have mixed the case.

    i.e.
    Code:
    #navlist{}
    
    <ul id="navList" ...
    That of course may just be a typo when you copied the code in here.


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
  •