How to align the list in firefox and chrome?

HTML & CSS
1

This is my html 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


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

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.


#navlist li {
	text-transform: uppercase;
	display: inline-block;
	[B]vertical-align:top;[/B]
	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

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.


#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

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.



#navlist{}

<ul id="navList" ...

That of course may just be a typo when you copied the code in here.