asked on

<ul> horizontal menu layout.

Hey all. What is the right way to create a horizontal list menu? I'm trying to make each li have a height of 34px (or 100% of the div it's contained in) and a width of 20px on each side of the <li>. Here's the code i'm using which seems fine in firefox but renders awfully in IE. Also, in firefox when i try to put a background png in the <a> it doesn't align properly which leads me to believe maybe i'm doing something wrong. Any help would be greatly appreciated!

er

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Golf Outing</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #2B2B2B;
}
 
#navContainer {
	background-color:#000000;
	height:35px;
}
 
#navList {
	margin:0px;
	padding-top:7px;
	text-align:center;
}
 
#navList li {
	display:inline;
	list-style-type:none;
	padding:0px;
	margin:0px;
	height:34px;
}
 
#navList a {
	color:#FFFFFF;
	font: normal 12px tahoma;
	text-decoration:none;
	padding: 17px 24px 17px 24px;
	background-color:#A28900;
}
-->
</style>
</head>
 
<body>
 
<div id="container">
	<div id="navContainer">
        <ul id="navList">
 
            <li><a href="#">Home</a></li>
			
                <li><a href="#">About Us</a></li>
            
                <li><a href="#">Who We Are</a></li>
            
                <li><a href="#">Contact Us</a></li>
            
        </ul>
 
	</div>
 
 
    <div id="body" style="height:100%; width:800px; margin-left:-400px; left:50%; position:absolute; background-color:#FFFFFF">
		<div id="header" style="overflow:hidden; height:260px; background-color:#000000;"><img src="../UserFiles/1/3/headers/golf1.jpg" width="800" height="250" /></div>
 
 
 
 
	</div>
 
 
</div>
</body>
</html>

Open in new window

screenshot-firefox.jpg
screenshot-ie.jpg

Mark Steggles

Hello,

I will try to help.

First things first: Always use a strict doctype (http://www.w3schools.com/tags/tag_doctype.asp) and check your code at the validator (http://validator.w3.org/)

Second, you cannot set heights on inline elements.

Third, I would do it like this:

If you have any questions then I'll be glad to explain

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"-->
	
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Golf Outing</title>
<style type="text/css">
<!--
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #2B2B2B;
}
 
#navContainer {
        background-color:#000000;
        height:34px;
}
 
#navList {
        margin:0 auto;
        padding:0;
	height:34px;
  	width:490px;
}
 
#navList li {
float:left;
        list-style-type:none;
        padding:0px;
        margin:0 20px 0 0;
        height:34px;
}
 
#navList a {
        color:#FFFFFF;
	float:left;
        font: normal 12px tahoma;
        text-decoration:none;
        padding: 11px 24px;
        background-color:#A28900;
}
-->
</style>
</head>
 
<body>
 
<div id="container">
        <div id="navContainer">
<ul id="navList"><li><a href="#">Home</a></li
><li><a href="#">About Us</a></li
><li><a href="#">Who We Are</a></li
><li><a href="#">Contact Us</a></li
></ul>
 
        </div>
 
 
    <div id="body" style="height:100%; width:800px; margin-left:-400px; left:50%; position:absolute; background-color:#FFFFFF">
                <div id="header" style="overflow:hidden; height:260px; background-color:#000000;"><img src="../UserFiles/1/3/headers/golf1.jpg" width="800" height="250" /></div>
 
 
 
 
        </div>
 
 
</div>
</body>
</html>

Open in new window

Mark Steggles

I would also remove the absolute positioning from that div id="body"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"-->
	
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Golf Outing</title>
<style type="text/css">
<!--
html, body {
height:100%;
}
 
body {
        margin: 0;
        background-color: #2B2B2B;
}
#container {height:100%}
 
#navContainer {
        background-color:#000000;
        height:34px;
}
 
#navList {
        margin:0 auto;
        padding:0;
	height:34px;
  	width:490px;
}
 
#navList li {
float:left;
        list-style-type:none;
        padding:0px;
        margin:0 20px 0 0;
        height:34px;
}
 
#navList a {
        color:#FFFFFF;
	float:left;
        font: normal 12px tahoma;
        text-decoration:none;
        padding: 11px 24px;
        background-color:#A28900;
}
-->
</style>
</head>
 
<body>
 
<div id="container">
        <div id="navContainer">
<ul id="navList"><li><a href="#">Home</a></li
><li><a href="#">About Us</a></li
><li><a href="#">Who We Are</a></li
><li><a href="#">Contact Us</a></li
></ul>
 
        </div>
<div id="body" style="width:800px;height:100%;margin:0 auto;background-color:#FFFFFF">
          <div id="header" style="overflow:hidden; height:260px; background-color:#000000;"><img src="../UserFiles/1/3/headers/golf1.jpg" width="800" height="250" /></div>
</div>
 
 
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Mark Steggles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

&lt;ul&gt; horizontal menu layout.

<ul> horizontal menu layout.