List elements not aligning correctly at bottom of ul <1px issue>

[liko]

I've tried a lot , searched a lot , read even more but nothing seems to solve this problem .

I simply want the li elements to align at the bottom of ul just like in this picture : expected.png

Opera and (suprisingly) IE seem to cope well while Chrome ,Mozilla and Safari add this wonderfull ( or more) pixels at the bottom of ul , creating a gap that ruins my design : problem.png

Html code is as follows :

<ul id="nav_menu" >
	        <li><img src="images/inf/search.png" width="25" height="30" alt="search" title="Search"/></li>
	        <li id="active">Home</li>
	        <li><a href="gallery.html">Gallery</a></li>
	        <li><a href="about.html">About us</a></li>
	        <li><a href="contact.html">Contact</a></li>
	        <li><img src="images/inf/settings.png" width="30" height="30" alt="settings" title="Settings"/></li>
</ul>

and respectively the CSS code :

/* NAVIGATION MENU */
#nav_menu {
	min-width:900px;
	background-image:url("images/dec/menu-back-li.png");
	font-size:25px;
	text-align:center;
	color:white;
	clear:both;
	width:100%;
} 
#nav_menu  li{
	display:inline;
	margin-right:30px;
	background-image:url("images/dec/menu-opt-li.png");
	border: 1px solid #666;
	border-bottom:none;	
	border-radius:5px 5px 0 0;
}  
#nav_menu  li a{
	padding: 0 14px 0 14px;
}
#nav_menu img{
	padding: 0 15px 0 15px;
	position:relative;
	top:5px;
}  
#active{
	padding: 7px 15px 0 15px;
	background-image:url("images/dec/active.png");
	background-repeat: repeat-x;
	background-position:top ; 
	color:#36acf5;
}
/*END OF NAVIGATION MENU */

(i didnt post the reset code (margin-paddin 0 etc.)which is included in the .css )

Any help would be more than appreciated.

[ralph.m]

Hi liko. Welcome to SitePoint.

I've reconstructed your page from the code you gave but it doesn't really contain enough for us to see what's causing the gap—unless it's the image in the first LI, but I doubt it. Any chance of a live link? Otherwise, post more code, along with the images.

[liko]

Yes ralph you are right , i should have posted the website . Well here it is INDEX .

I've removed all content except the list .

By the way i should also mention that in different operating system some of the browsers that have the problem ..well .. dont anymore. like mozilla..

Thanks ..

[Paul O'B]

It seems to me that you want the tabs an exact height but you haven't specified a height or line-height and so browsers will vary.

Try setting a height.

#nav_menu{height:41px}

Or at the least control the line-height so that it is consistent between browsers.

BTW this code is redundant.

*,h1,h2,h3,h4,h5,a,li,ul,p,ol,img,table,div,form,fieldset,button,input,body{ margin:0;padding:0;border:none;text-decoration:none;color:white;list-style-type:none;}

The universal selector on its own will do all that *{etc...}.)

However you should be careful with removing padding and borders from form elements because many browsers will not let you re-instate the defaults and indeed the look of form controls will change of you remove borders. That's the reason that the universal selector was rejected in favour of more precise reset systems.

[liko]

@Paul I've tried setting a height before but quickly abandoned becaused it didnt work on all browsers .I tried it again.It seems to solve the problem except Chrome which pushes the ul on the submenu (the dark area below menu) that causes a dark line because of the transparency . But when i set height to auto on mozilla it works but in none of the other browsers .

Line height .. it doesnt work maybe because li are set to inline and i think an inline object cant do much with height or anything else with that has to do with above and below settings .

About the reset code.. the are people who use the universal selector and others that support it would be better using specific tags.. well i thought using both wouldnt cause any trouble . But now i am using the universal one as you said .

I dont know what else to do ..

[Paul O'B]

@Paul I've tried setting a height before but quickly abandoned becaused it didnt work on all browsers

It would work in all browsers because when you give a height then the browser will obey it (apart from Ie6) although you would need ot address the list and anchors also.

The problem is that you are applying background images to inline elements which means that you are leaving it to chance that font-size + padding + line-height is going to be the same cross browser. However it won't be the same as they all vary in the half leading that they add and the way that it is all rounded up together.

When you need elements to be an exact height as in the case of the tabs you are using then you need to use an explicit height and not use inline elements (background images on inline elements are not fully defined in the specs anyway so browsers are allowed to differ).

Therefore you should float the list and anchors or use display:inline-block instead and then you can size the elements exactly. This will ensure that the elements are the same cross browser.

You may be able to increase the line-height on the nav_)menu instead of using the height I mentioned earlier and I get consistent results with this:

#nav_menu {line-height:38px;}

However, the more robust way is to float the list elements and anchors or use display:inline-block and size them to fit.

e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>&lt;transparent&gt; Html/Css Theme Template</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/* MISC */
@font-face {
	font-family: sawasdeeB;
	src: url("http://www.pontikis.com.gr/liko/sawasdeeB.eot");
}
@font-face {
	font-family: sawasdeeB;
	src: url("http://www.pontikis.com.gr/liko/sawasdeeB.ttf");
}
* {
	margin:0;
	padding:0;
}
ul { list-style:none; }
a, img, a img {
	border:none;
	text-decoration:none;
	color:#fff;
}
body {
	letter-spacing:.1em;
	color:white;
	font-family: Sawasdee, sawasdeeB, Tahoma, serif;
	line-height:1.4;
}
.space {
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
#image {
	min-width:500px;
	min-height:500px;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	z-index:-1;
}
/* END OF MISC */
/* NAVIGATION MENU */
#nav_menu {
	min-width:900px;
	background-image:url("http://www.pontikis.com.gr/liko/images/dec/menu-back-li.png");
	font-size:25px;
	text-align:center;
	color:white;
	clear:both;
	width:100%;
	padding-top:1px;
}
#nav_menu li {
	display:inline;
	margin-right:30px;
	background-image:url("http://www.pontikis.com.gr/liko/images/dec/menu-opt-li.png");
	border: 1px solid #666;
	border-bottom:none;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	display:inline-block;
	height:38px;
	vertical-align:bottom;
}
#nav_menu li a {
	padding: 0 14px 0 14px;
	display:inline-block;
	height:38px;
	vertical-align:bottom;
}
* html #nav_menu li a, * html #nav_menu li { display:inline }
*+html #nav_menu li a, *+html #nav_menu li { display:inline }
#nav_menu img {
	padding: 0 15px 0 15px;
	position:relative;
	top:5px;
}
#active {
	padding: 9px 15px 0 15px;
	background-image:url("http://www.pontikis.com.gr/liko/images/dec/active.png");
	background-repeat: repeat-x;
	background-position:top;
	color:#36acf5;
	margin-top:-9px;
}
/*END OF NAVIGATION MENU */
/* NAVIGATION SUBMENU */
#nav_sub {
	font-size:12px;
	height:90px;
	background-image:url("http://www.pontikis.com.gr/liko/images/dec/menu-base.png");
}
#nav_sub1 {
	margin:10px 0 0 10px;
	width:700px;
	height:78px;
	float:left;
}
#nav_sub2 {
	width:210px;
	margin:10px 10px 0 0;
	float:right;
}
#nav_bar {
	width:100%;
	min-width:940px;
	position:fixed;
	bottom:0px;
	font-variant:small-caps;
	clear:both;
	max-height:130px;
}
/*END OF NAVIGATION SUBMENU */
</style>
</head>
<body>
<div> <img src="http://www.pontikis.com.gr/liko/images/dec/dreamfield.jpg" id="image" alt="" /></div>
<div id="nav_bar">
		<ul id="nav_menu" >
				<li><img src="http://www.pontikis.com.gr/liko/images/inf/search.png" width="25" height="30" alt="search" title="Search"/></li>
				<li id="active">Home</li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="about.html">About us</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><img src="http://www.pontikis.com.gr/liko/images/inf/settings.png" width="30" height="30" alt="settings" title="Settings"/></li>
		</ul>
		<div id="nav_sub">
				<div id="nav_sub1"> </div>
				<div id="nav_sub2"> </div>
				<div class="space"></div>
		</div>
</div>
</body>
</html>

[liko]

@Paul Thats brilliant ..it works just fine in all browsers . thanks you very much .

I would use float but i didnt know how to center it .
Since approach works perfectly i wont use line-height .
Also what is the purpose of this ( i mean the selectors) :

* html #nav_menu li a, * html #nav_menu li { display:inline }
*+html #nav_menu li a, *+html #nav_menu li { display:inline }

Hats off ..

[ralph.m]

Also what is the purpose of this ( i mean the selectors) :

* html #nav_menu li a, * html #nav_menu li { display:inline }
*+html #nav_menu li a, *+html #nav_menu li { display:inline }

That's to cover IE6 and IE7, which don't understand display:inline-block, but are happy with display: inline in its place.

* html and *+html are hacks only recognised by IE6 and IE7 respectively.

[liko]

Thanks ralph . A really dont understand why microsoft didnt go with w3c rules . Its a headache trying to make a site look at least near in IE to what expected .

[ralph.m]

really dont understand why microsoft didnt go with w3c rules

Heh heh, I think they are just like naughty school kids, trying to get attention by causing trouble.