<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
LVL 3
engineroomAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark StegglesWeb DeveloperCommented:
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 StegglesWeb DeveloperCommented:
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

Mark StegglesWeb DeveloperCommented:
And I would use a strict doctype like I said... Time for bed :D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	
<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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

engineroomAuthor Commented:
Thanx for your response. In your last response should line 2 and 4 be there? Also, I was wondering if you could explain all of this to me as best you can. All the CSS line by line. I need to understand how this works and right now it doesn't make sense to me. Thanks for your response. It is greatly appreciated!
engineroomAuthor Commented:
Also, one more thing... i see that when height is 100% there is always some vertical scrolling to be done, no matter how tall the window is. How do i fix this?
engineroomAuthor Commented:
I'm sorry, one more thing... how do i make the space between each of the navItems only 1px wide?
engineroomAuthor Commented:
Okay... definitely last thing....  In this snippet you have the width set to 490px; That and the margin:0 auto; is what centers the list correct? If that's the case how do i make it so it doesn't depend on the width and still center it? Another words, that list section is dynamic. I will never know how long or short the width of the list will be. i have no control over it. it has to be flexible enough to accomodate every scenario. What do i do in this case?
#navList {
        margin:0 auto;
        padding:0;
	height:34px;
  	width:490px;
}

Open in new window

engineroomAuthor Commented:
Don't bother reading the other posts. Just read this one.

i see that when height is 100% there is always some vertical scrolling to be done, no matter how tall the window is. How do i fix this?

Also, In the snippet below you have the width set to 490px; That and the margin:0 auto; is what centers the list correct? If that's the case how do i make it so it doesn't depend on the width and still center it? Another words, that list section is dynamic. I will never know how long or short the width of the list will be. i have no control over it. it has to be flexible enough to accomodate every scenario. What do i do in this case?
#navList {
        margin:0 auto;
        padding:0;
	height:34px;
  	width:490px;
}

Open in new window

Mark StegglesWeb DeveloperCommented:
Good morning,

So, the scrolling problem is caused by div id="body" starting under <div id="navContainer"> which is 34px tall. So, the body div is 100% height of the window but it starts 34px down from the top, which causes the scroll bar. I have fixed this by positioning navContainer absolutely which takes it out of the flow of the document. So, div id="body" now starts from the top of the page.

The dynamic menu is now fixed to center whatever the width... code taken from http://www.cssplay.co.uk/menus/centered.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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;
	position:absolute;
	top:0;
	left:0;
	width:100%
}
 
#navList {
        float:left;
	left:50%;
	position:relative;
        padding:0;
	margin:0;
	height:34px
}
 
#navList li {
float:left;
        list-style-type:none;
        padding:0px;
        margin:0 1px 0 0;
        height:34px;
	float:left;
	position:relative;
	right:50%
}
 
#navList a {
        color:#FFFFFF;
	display:block;
        font: normal 12px tahoma;
        text-decoration:none;
        padding: 11px 24px;
        background-color:#A28900;
	width:auto
}
-->
</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; padding-top:35px; background-color:#000000;"><img src="../UserFiles/1/3/headers/golf1.jpg" width="800" height="250" /></div>
</div>
 
 
</div>
</body>
</html>

Open in new window

engineroomAuthor Commented:
Dude, you are great. Thanx for getting back to me and being very patient. There are 2 things wrong that i would like to fix. The first is that in both browsers the nav, the color part is about 1px above the content area (white). So it looks a little akward. Secondly, and this is weird, the stuff you gave me looks good if i add the css code directly to the page, but when i <link> it the nav renders funny and gets all mis-aligned. How can i just store the css part in a .css file? Thanks again!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pauls Test</title>
<style>
html, body {
	height:100%;
}
 
body {
	margin:0px;
	background-color: #2B2B2B;
}
 
a {
	outline:none;
}
 
#content {
	width:800px;
	min-height:100%;
	margin:0 auto;
	background-color:#FFFFFF;
	clear:left;
}
 
#container { 
	height:100%;
}
 
#navContainer {
	background-color:#000000;
	height:35px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
 
#navList {
	float:left;
	left:50%;
	position:relative;
    padding:0;
	margin:0;
	height:34px
 
}
 
#navList li {
	float:left;
	list-style-type:none;
	padding:0px;
	margin:0 1px 0 0;
	height:34px;
	float:left;
	position:relative;
	right:50%;
}
 
#navList a {
	color:#FFFFFF;
	font: normal 12px tahoma;
	text-decoration:none;
	background-color:#A28900;
	background-image:url(../images/navBackgrnd1.png);
	background-position:bottom;
 
	float:left;
	padding: 11px 24px;
 
}
 
#navList a:hover, active {
	background-color:#746306;
}
 
#active a:link, #active a:visited, #active a:hover {
	background-color:#746306;
}
 
h1 {
	font-family: tahoma, verdana;
	position: relative;
	color: #A28900;
	font-size:18px;
	text-transform:uppercase;
}
 
h1 span {
	background: url(../../images/gradient.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 18px;
}
 
td h1 {
	font-family: tahoma, verdana;
	position: relative;
	color: #A28900;
	font-size:14px;
	text-transform:uppercase;
}
 
td h1 span {
	background: url(../../images/gradient.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 14px;
}
 
#pageTitle {
	padding:0 10px;
}
 
#bodyCopy {
	padding:10px;
}
 
#eventDate {
	padding:0 10px;
	margin-top: -15px;
	font: bold 12px tahoma;
	color:#746306;
}
 
.itemCopy {
	font: normal 12px tahoma;
	color:#545454;
	margin-bottom:15px;
}
 
.buyNow {
	float:left;
	padding-right:15px;
	border-right:1px dotted #D7D7D7;
	font: bold 11px tahoma;
	color:#746306;
}
 
.price {
	float:left;
	padding:0px 15px;
	border-right:1px dotted #D7D7D7;
	font: bold 11px tahoma;
	color:#009900;
}
 
.available{
	padding:0px 15px;
	font: bold 11px tahoma;
	color:#db4000;
 
}
</style>
 
</head>
 
<body>
 
<div id="container">
	<div id="navContainer">
 
        <ul id="navList">
          <li id="active"><a href="index.asp?eventID=9">Home</a></li>
			
                <li><a href="page.asp?pageID=9">Page 5.2</a></li>
            
                <li><a href="page.asp?pageID=5">Page 1</a></li>
            
                <li><a href="page.asp?pageID=6">Page 2</a></li>
            
                <li><a href="page.asp?pageID=7">Page 3</a></li>
 
            
                <li><a href="page.asp?pageID=8">Page 4</a></li>
            
          <li><a href="items.asp">Buy Now</a></li>
        </ul>
	</div>
 
 
<div id="content">
		
        </div>
 
		<div id="pageTitle"><h1><span></span>Pauls Test</h1></div>
 
		<div id="eventDate">Thursday, March 12, 2009</div>
		<div id="bodyCopy">.</div>
 
	</div>
 
 
	</div>
 
 
</div>
</body>
 
</html>

Open in new window

engineroomAuthor Commented:
I tried setting the z-index on the #content but that didn't help. Unfortunately i just noticed something else. Now that the Nav is absolute, it is cutting of the top portion of the header. Looks like the #content is all the way to the top margin and the navContainer is floating over it.
Mark StegglesWeb DeveloperCommented:
Hello,

See the code I posted... the header has a padding equivalent to the height of the positioned nav. I will be able to look at this tomorrow morning... about 10 hours from now.

Night
engineroomAuthor Commented:
Thanx. look forward to it. Here's what i did in the meantime, this was before your answer and it mostly works. What do you think about it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pauls Test</title>
<style>
html, body {
	height:100%;
}
 
body {
	margin:0px;
	background-color: #2B2B2B;
}
 
a {
	outline:none;
}
 
#content {
	width:800px;
	min-height:95.5%;
	//margin:0px auto;
	background-color:#FFFFFF;
	clear:left;
	position:absolute;
	top:35px;
	left:50%;
	margin-left:-400px;
}
 
#container { 
	height:100%;
}
 
#navContainer {
	background-color:#000000;
	height:35px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
 
#navList {
	float:left;
	left:50%;
	position:relative;
    padding:0;
	margin:0;
	height:34px
 
}
 
#navList li {
	float:left;
	list-style-type:none;
	padding:0px;
	margin:0 1px 0 0;
	height:34px;
	float:left;
	position:relative;
	right:50%;
}
 
#navList a {
	color:#FFFFFF;
	font: normal 12px tahoma;
	text-decoration:none;
	background-color:#A28900;
	background-image:url(images/navBackgrnd1.png);
	background-position:bottom;
 
	float:left;
	padding: 11px 24px;
 
}
 
#navList a:hover, active {
	background-color:#746306;
}
 
#active a:link, #active a:visited, #active a:hover {
	background-color:#746306;
}
 
h1 {
	font-family: tahoma, verdana;
	position: relative;
	color: #A28900;
	font-size:18px;
	text-transform:uppercase;
}
 
h1 span {
	background: url(../images/gradient.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 18px;
}
 
td h1 {
	font-family: tahoma, verdana;
	position: relative;
	color: #A28900;
	font-size:14px;
	text-transform:uppercase;
}
 
td h1 span {
	background: url(../images/gradient.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 14px;
}
 
#pageTitle {
	padding:0 10px;
}
 
#bodyCopy {
	padding:10px;
}
 
#eventDate {
	padding:0 10px;
	margin-top: -15px;
	font: bold 12px tahoma;
	color:#746306;
}
 
.itemCopy {
	font: normal 12px tahoma;
	color:#545454;
	margin-bottom:15px;
}
 
.buyNow {
	float:left;
	padding-right:15px;
	border-right:1px dotted #D7D7D7;
	font: bold 11px tahoma;
	color:#746306;
}
 
.price {
	float:left;
	padding:0px 15px;
	border-right:1px dotted #D7D7D7;
	font: bold 11px tahoma;
	color:#009900;
}
 
.available{
	padding:0px 15px;
	font: bold 11px tahoma;
	color:#db4000;
 
}
</style>
 
 
</head>
 
<body>
 
<div id="container">
	<div id="navContainer">
        <ul id="navList">
          <li id="active"><a href="index.asp?eventID=9">Home</a></li>
			
                <li><a href="page.asp?pageID=9">Page 5.2</a></li>
            
                <li><a href="page.asp?pageID=5">Page 1</a></li>
            
                <li><a href="page.asp?pageID=6">Page 2</a></li>
            
                <li><a href="page.asp?pageID=7">Page 3</a></li>
            
                <li><a href="page.asp?pageID=8">Page 4</a></li>
            
          <li><a href="items.asp">Buy Now</a></li>
        </ul>
	</div>
 
 
<div id="content">
		
 
		<div id="pageTitle"><h1><span></span>Pauls Test</h1></div>
		<div id="eventDate">Thursday, March 12, 2009</div>
		<div id="bodyCopy">.</div>
 
	</div>
 
</div>
</body>
</html>

Open in new window

Mark StegglesWeb DeveloperCommented:
Not bad.

I dont like the use of absolute positioning for the content tho.

Sorry for late reply.. real busy right now
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pauls Test</title>
<style>
html, body {
	height:100%;
}
 
body {
	margin:0px;
	background-color: #2B2B2B;
}
 
a {
	outline:none;
}
 
#content {
	width:800px;
	margin:0px auto;
	min-height:100%;
	background-color:#FFFFFF;
}
 
#container { 
	height:100%;
}
 
#navContainer {
	background-color:#000000;
	height:36px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
 
#navList {
	float:left;
	left:50%;
	position:relative;
    padding:0;
	margin:0;
	height:34px
 
}
 
#navList li {
	float:left;
	list-style-type:none;
	padding:0px;
	margin:0 1px 0 0;
	height:34px;
	float:left;
	position:relative;
	right:50%;
}
 
#navList a {
	color:#FFFFFF;
	font: normal 12px tahoma;
	text-decoration:none;
	background-color:#A28900;
	background-image:url(images/navBackgrnd1.png);
	background-position:bottom;
 
	float:left;
	padding: 11px 24px;
 
}
 
#navList a:hover, active {
	background-color:#746306;
}
 
#active a:link, #active a:visited, #active a:hover {
	background-color:#746306;
}
 
h1 {
	font-family: tahoma, verdana;
	position: relative;
	color: #A28900;
	font-size:18px;
	text-transform:uppercase;
}
 
h1 span {
	background: url(../images/gradient.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 18px;
}
 
td h1 {
	font-family: tahoma, verdana;
	position: relative;
	color: #A28900;
	font-size:14px;
	text-transform:uppercase;
}
 
td h1 span {
	background: url(../images/gradient.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 14px;
}
 
#pageTitle {
	padding:35px 10px 0;
}
 
#bodyCopy {
	padding:10px;
}
 
#eventDate {
	padding:0 10px;
	margin-top: -15px;
	font: bold 12px tahoma;
	color:#746306;
}
 
.itemCopy {
	font: normal 12px tahoma;
	color:#545454;
	margin-bottom:15px;
}
 
.buyNow {
	float:left;
	padding-right:15px;
	border-right:1px dotted #D7D7D7;
	font: bold 11px tahoma;
	color:#746306;
}
 
.price {
	float:left;
	padding:0px 15px;
	border-right:1px dotted #D7D7D7;
	font: bold 11px tahoma;
	color:#009900;
}
 
.available{
	padding:0px 15px;
	font: bold 11px tahoma;
	color:#db4000;
 
}
</style>
 
 
</head>
 
<body>
 
<div id="container">
	<div id="navContainer">
        <ul id="navList">
          <li id="active"><a href="index.asp?eventID=9">Home</a></li>
			
                <li><a href="page.asp?pageID=9">Page 5.2</a></li>
            
                <li><a href="page.asp?pageID=5">Page 1</a></li>
            
                <li><a href="page.asp?pageID=6">Page 2</a></li>
            
                <li><a href="page.asp?pageID=7">Page 3</a></li>
            
                <li><a href="page.asp?pageID=8">Page 4</a></li>
            
          <li><a href="items.asp">Buy Now</a></li>
        </ul>
	</div>
 
 
<div id="content">
		
 
		<div id="pageTitle"><h1><span></span>Pauls Test</h1></div>
		<div id="eventDate">Thursday, March 12, 2009</div>
		<div id="bodyCopy">.</div>
 
	</div>
 
</div>
</body>
</html>

Open in new window

engineroomAuthor Commented:
Awesome. I changed it to that and it is centering. I think i had a bad div in there at one point last night which was throwing it all off. That's why i had the code like that. Unfortunately there are 2 things left with this... The height, and the scrolling. I attached an image so you can see what i'm talking about. Thanks a million.

er
screenshot.jpg
Mark StegglesWeb DeveloperCommented:
Is that a screenshot from the code i posted?

What browser is that?
engineroomAuthor Commented:
It is... it's the same in both browsers.
engineroomAuthor Commented:
firefox, i.e.
Mark StegglesWeb DeveloperCommented:
i dont see either of those problems in ff3 or IE7
engineroomAuthor Commented:
That is exactly what i'm using...? Hmmm....  here's the code. the nav overlays the content by like 1px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 
<style>
html, body {
	height:100%;
}
 
body {
	margin:0px;
	background-color: #2B2B2B;
}
 
a {
	outline:none;
}
 
#content {
	/*
	width:800px;
	min-height:95.5%;
	background-color:#FFFFFF;
	clear:left;
	position:absolute;
	top:35px;
	left:50%;
	margin-left:-400px;
	*/
 
	width:800px;
	margin:0px auto;
	min-height:100%;
	background-color:#FFFFFF;
	padding-top:35px;
 
}
 
#container { 
	height:100%;
}
 
#navContainer {
	background-color:#000000;
	height:35px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
 
#navList {
	float:left;
	left:50%;
	position:relative;
    padding:0;
	margin:0;
	height:34px
 
}
 
#navList li {
	float:left;
	list-style-type:none;
	padding:0px;
	margin:0 1px 0 0;
	height:34px;
	float:left;
	position:relative;
	right:50%;
}
 
#navList a {
	color:#FFFFFF;
	font: normal 12px tahoma;
	text-decoration:none;
	background-color:#A28900;
	background-image:url(images/navBackgrnd1.png);
	background-position:bottom;
 
	float:left;
	padding: 11px 24px;
 
}
 
#navList a:hover, active {
	background-color:#746306;
}
 
#active a:link, #active a:visited, #active a:hover {
	background-color:#746306;
}
 
h1 {
	font-family: tahoma, verdana;
	position: relative;
	color: #A28900;
	font-size:18px;
	text-transform:uppercase;
}
 
h1 span {
	background: url(../images/gradient.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 18px;
}
 
td h1 {
	font-family: tahoma, verdana;
	position: relative;
	color: #A28900;
	font-size:14px;
	text-transform:uppercase;
}
 
td h1 span {
	background: url(../images/gradient.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 14px;
}
 
#pageTitle {
	padding:0 10px;
}
 
#bodyCopy {
	padding:10px;
}
 
#eventDate {
	padding:0 10px;
	margin-top: -15px;
	font: bold 12px tahoma;
	color:#746306;
}
 
.itemCopy {
	font: normal 12px tahoma;
	color:#545454;
	margin-bottom:15px;
}
 
.buyNow {
	float:left;
	padding-right:15px;
	border-right:1px dotted #D7D7D7;
	font: bold 11px tahoma;
	color:#746306;
}
 
.price {
	float:left;
	padding:0px 15px;
	border-right:1px dotted #D7D7D7;
	font: bold 11px tahoma;
	color:#009900;
}
 
.available{
	float:left;
	padding:0px 15px;
	font: bold 11px tahoma;
	color:#db4000;
 
}
</style>
 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js"></script>
</head>
 
<body>
 
<div id="container">
	<div id="navContainer">
        <ul id="navList">
          <li><a href="index.asp?eventID=3">Home</a></li>
			
                <li><a href="page.asp?pageID=1">About Us</a></li>
            
                <li><a href="page.asp?pageID=2">Who We Are</a></li>
 
            
                <li><a href="page.asp?pageID=3">Contact Us</a></li>
            
          <li id="active"><a href="items.asp">Buy Now</a></li>
        </ul>
 
	</div>
 
 
    <div id="content">
		
        <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 id="bodyCopy">
 
			
                <div style="text-align:center">
                    <table width="600" border="0" cellpadding="0" cellspacing="0" style="text-align:left;" align="center">
                        
                
                        <tr>
                            <td valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><img src="../UserFiles/1/10/11/049.jpg" alt="" /></td>
                            <td width="100%" valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><p><h1><span></span>Individual Golfer</h1></p>
 
                    <div class="itemCopy"></div>
                    <div class="buyNow">Buy Now</div>
                    <div class="price">$29.99</div>
                    <div class="available">
                        
                            <select name="qty1" id="qty1">
                            
                                <option value="1">1</option>
                            
                                <option value="2">2</option>
 
                            
                                <option value="3">3</option>
                            
                                <option value="4">4</option>
                            
                                <option value="5">5</option>
                            
                                <option value="6">6</option>
                            
                                <option value="7">7</option>
                            
                                <option value="8">8</option>
 
                            
                                <option value="9">9</option>
                            
                                <option value="10">10</option>
                            
                                <option value="11">11</option>
                            
                                <option value="12">12</option>
                            
                                <option value="13">13</option>
                            
                                <option value="14">14</option>
 
                            
                                <option value="15">15</option>
                            
                                <option value="16">16</option>
                            
                                <option value="17">17</option>
                            
                                <option value="18">18</option>
                            
                                <option value="19">19</option>
                            
                                <option value="20">20</option>
 
                            
                                <option value="21">21</option>
                            
                                <option value="22">22</option>
                            
                                <option value="23">23</option>
                            
                                <option value="24">24</option>
                            
                                <option value="25">25</option>
                            
                                <option value="26">26</option>
 
                            
                                <option value="27">27</option>
                            
                                <option value="28">28</option>
                            
                                <option value="29">29</option>
                            
                                <option value="30">30</option>
                            
                                <option value="31">31</option>
                            
                                <option value="32">32</option>
 
                            
                                <option value="33">33</option>
                            
                                <option value="34">34</option>
                            
                                <option value="35">35</option>
                            
                                <option value="36">36</option>
                            
                                <option value="37">37</option>
                            
                                <option value="38">38</option>
 
                            
                                <option value="39">39</option>
                            
                                <option value="40">40</option>
                            
                                <option value="41">41</option>
                            
                                <option value="42">42</option>
                            
                                <option value="43">43</option>
                            
                                <option value="44">44</option>
 
                            
                            </select>
                            
                        </div>
                
                            </td>
                        </tr>
                
                        
                
                        <tr>
                            <td valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><img src="../UserFiles/1/10/11/049.jpg" alt="" /></td>
                            <td width="100%" valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><p><h1><span></span>Foursome</h1></p>
                    <div class="itemCopy">test<br><br>test</div>
 
                    <div class="buyNow">Buy Now</div>
                    <div class="price">$29.99</div>
                    <div class="available">
                        
                      <input name="qty2" type="text" id="qty2" size="2">
                        
                        </div>
                
                            </td>
                        </tr>
                
                        
                
                        <tr>
 
                            <td valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><img src="../UserFiles/1/10/11/049.jpg" alt="" /></td>
                            <td width="100%" valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><p><h1><span></span>Dinner Only</h1></p>
                    <div class="itemCopy"></div>
                    <div class="buyNow">Buy Now</div>
                    <div class="price">$29.99</div>
                    <div class="available">
                        
                            <select name="qty3" id="qty3">
 
                            
                                <option value="1">1</option>
                            
                                <option value="2">2</option>
                            
                                <option value="3">3</option>
                            
                                <option value="4">4</option>
                            
                                <option value="5">5</option>
                            
                                <option value="6">6</option>
 
                            
                                <option value="7">7</option>
                            
                                <option value="8">8</option>
                            
                                <option value="9">9</option>
                            
                                <option value="10">10</option>
                            
                                <option value="11">11</option>
                            
                                <option value="12">12</option>
 
                            
                                <option value="13">13</option>
                            
                                <option value="14">14</option>
                            
                                <option value="15">15</option>
                            
                                <option value="16">16</option>
                            
                                <option value="17">17</option>
                            
                                <option value="18">18</option>
 
                            
                                <option value="19">19</option>
                            
                                <option value="20">20</option>
                            
                                <option value="21">21</option>
                            
                                <option value="22">22</option>
                            
                                <option value="23">23</option>
                            
                                <option value="24">24</option>
 
                            
                                <option value="25">25</option>
                            
                                <option value="26">26</option>
                            
                                <option value="27">27</option>
                            
                                <option value="28">28</option>
                            
                                <option value="29">29</option>
                            
                                <option value="30">30</option>
 
                            
                                <option value="31">31</option>
                            
                                <option value="32">32</option>
                            
                                <option value="33">33</option>
                            
                                <option value="34">34</option>
                            
                                <option value="35">35</option>
                            
                                <option value="36">36</option>
 
                            
                                <option value="37">37</option>
                            
                                <option value="38">38</option>
                            
                                <option value="39">39</option>
                            
                                <option value="40">40</option>
                            
                                <option value="41">41</option>
                            
                                <option value="42">42</option>
 
                            
                                <option value="43">43</option>
                            
                                <option value="44">44</option>
                            
                                <option value="45">45</option>
                            
                                <option value="46">46</option>
                            
                                <option value="47">47</option>
                            
                                <option value="48">48</option>
 
                            
                                <option value="49">49</option>
                            
                                <option value="50">50</option>
                            
                            </select>
                            
                        </div>
                
                            </td>
                        </tr>
                
                        
                
                        <tr>
                            <td valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><img src="../UserFiles/1/10/11/049.jpg" alt="" /></td>
 
                            <td width="100%" valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><p><h1><span></span>Tee Sponsorship</h1></p>
                    <div class="itemCopy"></div>
                    <div class="buyNow">Buy Now</div>
                    <div class="price">$29.99</div>
                    <div class="available">
                        
                      <input name="qty4" type="text" id="qty4" size="2">
                        
                        </div>
 
                
                            </td>
                        </tr>
                
                        
                
                        <tr>
                            <td valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><img src="../UserFiles/1/10/11/049.jpg" alt="" /></td>
                            <td width="100%" valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><p><h1><span></span>Signs</h1></p>
                    <div class="itemCopy"></div>
                    <div class="buyNow">Buy Now</div>
                    <div class="price">$29.99</div>
 
                    <div class="available">
                        
                      <input name="qty5" type="text" id="qty5" size="2">
                        
                        </div>
                
                            </td>
                        </tr>
                
                        
                
                        <tr>
                            <td valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><img src="../UserFiles/1/10/11/049.jpg" alt="" /></td>
                            <td width="100%" valign="top" style="padding:10px; border-bottom:1px dotted #D7D7D7;"><p><h1><span></span>Golf Warmers</h1></p>
 
                    <div class="itemCopy"></div>
                    <div class="buyNow">Buy Now</div>
                    <div class="price">$29.99</div>
                    <div class="available">
                        
                            <select name="qty7" id="qty7">
                            
                                <option value="1">1</option>
                            
                                <option value="2">2</option>
 
                            
                            </select>
                            
                        </div>
                
                            </td>
                        </tr>
                
                        
                    </table>
                </div>
            
 
		</div>
 
 
	</div>
 
 
</div>
</body>
</html>

Open in new window

Mark StegglesWeb DeveloperCommented:
Notice in my code:

#navContainer {
      background-color:#000000;
      height:36px;
      position:absolute;
      top:0;
      left:0;
      width:100%;
}
engineroomAuthor Commented:
LOL. AHA! Thanks for being patient, but the truth of the matter is that we both knew that i was the problem! Just the height scrolling thing and that's it! What did i do wrong?
Mark StegglesWeb DeveloperCommented:
LOL ;)

You have:

#content {
      /*
      width:800px;
      min-height:95.5%;
      background-color:#FFFFFF;
      clear:left;
      position:absolute;
      top:35px;
      left:50%;
      margin-left:-400px;
      */
 
      width:800px;
      margin:0px auto;
      min-height:100%;
      background-color:#FFFFFF;
      padding-top:35px;
 
}


Remember that padding gets added onto height and width

min-height:100% + 35px = scroll bar

put the padding on something else
engineroomAuthor Commented:
put the padding on something else... or subtract the 36px from the min-height... i.e.

min-height:100%-36px;

the subtracting doesn't seem to work..?
Mark StegglesWeb DeveloperCommented:
no u cant do this:

min-height:100%-36px;

must be one value

min-height:100%;


put the padding on div id header
engineroomAuthor Commented:
Sorry for taking long to answer. The problem is this; The header div isn't always going to be there. It's dynamic and therefore do not have control on whether it will be there or not.
Mark StegglesWeb DeveloperCommented:
not a problem.

All you need is a div that is always there, that is inside the height:100% container:

<div id="content">
  <div id="theCushion" style="height:36px"></div>/* all your content comes after this  */
</div>

engineroomAuthor Commented:
Lol... wait a minute. i think we're talking about different things here. The content/header is no longer under the nav. It lays out fine. I put the cushion and it's pushed it down. What i was trying to fix was the fact that because the content is under the navContainer, the 100% height is now causing the page to scroll even when there is no need to scroll.
engineroomAuthor Commented:
Thanx for all your help. Just wanted to give you the points already. Any idea on the height thing?
Mark StegglesWeb DeveloperCommented:
Hi,

Thanks for the points. Sorry for the late reply... I just  got back from hawaii :D

The scrolling issue is being caused from this: (working from your last posted code)

#content {
      /*
      width:800px;
      min-height:95.5%;
      background-color:#FFFFFF;
      clear:left;
      position:absolute;
      top:35px;
      left:50%;
      margin-left:-400px;
      */
 
      width:800px;
      margin:0px auto;
      min-height:100%;
      background-color:#FFFFFF;
      padding-top:35px;
 
}

you have padding and min-height:100% on the same element... that = 100% + 35px = scroll. You dont need the padding top if u have the cushion div

Thanks
engineroomAuthor Commented:
Hey man, thanx a lot! You've been great! I'm gonna open another question soon. I'll keep you updated on the location of the question. I would really rather give you the points. You've been very awesome. I gonna ask in the question, using the format that we've been using, how can i move the "site" around. Change the look and feel. Since you are familiar with the structure of what i'm doing, i'm sure you could answer this one fast. Basically i want to make maybe 5 variations of what i have using the style sheets alone. So right now we have 100% nav on top, then a header, then the content. I want to maybe now try a header on top, then the nav right under it. Then i want maybe the nav to the left of the header and content. And then to the right. see what i mean. I'll let you know when i write the question so you can answer and i can give you the points. Thanx again for everything!

damien
engineroomAuthor Commented:
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.