Positioning my navigation div

**aebstract** · May 9, 2011 07:09

http://berryequipment.net/berry3/
Basically, the best thing I can say is that it works and is positioned the way it should be, in Firefox however it isn't in internet explorer. Only code I left out was the nav's hover effects.

css

Code:

html {
    min-width:999px;
}

body {
    color: #2b2b2b;
    font-family: arial;
    min-width:999px;
    margin: 0px;
    padding: 0px;
    background: #f1f1f1;
}

img {
    border: 0px;
}

ul, li {
list-style-type: none;
display: inline;
}

a, a:visited {
text-decoration: none;
color: #444;
}
a:hover {
text-decoration: underline;
color: #000;
}
a:focus, a:hover, a:active { outline:none }

#container {
background-image: url(http://berryequipment.net/berry3/images/layout/headerbg.jpg);
background-repeat: repeat-x;
text-align: center;
    width: 100%;
}

#main_container {
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 950px;
}

#header {
text-align: left;
width: 950px;
height: 118px;
background-image: url(http://berryequipment.net/berry3/images/layout/topbg.jpg);
}

#logo {
float: left;
width: 285px;
height: 106px;
background-image: url(http://berryequipment.net/berry3/images/layout/logo.jpg);
}

#main_nav {
padding-bottom: 10px;
position: absolute; bottom: 0px; left: 321px;
text-transform:uppercase;
font-family: helvetica, arial;
font-size: 12px;
text-align: left;
color: #FFF;
}

index

Code:

<?php
    session_start();
    header("Cache-control: private");











?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">

<title></title>
<link href="styles/main.css" rel="stylesheet" type="text/css" title="default">

</head>
<body>


<div id="container">
<div id="main_container">
<div id="header">
<div id="logo"></div>
<div id="main_nav">

	<ul>
	<li><a href="#">Engineering</a></li>
	<li><a href="#">Fabrication</a></li>
	<li><a href="#">Parts</a></li>
	<li><a href="#">Service</a></li>
	<li class="selected">Equipment</li>
	<li><a href="#">Contact</a></li>
	</ul>

</div>
<div id="account_nav">

	my account<br />
	videos<br />
	technical manuals<br />
	shopping cart (0)<br />
	logout

</div>
</div>




<div id="body">
test
</div>
</div>
</div>












</body>
</html>

**ralph.m** · May 9, 2011 07:33

Hm, looks fine in IE9 to me. Which menu is not working for you?

**aebstract** · May 9, 2011 07:51

Currently looking at it in IE7

**ralph.m** · May 9, 2011 07:58

Originally Posted by aebstract

Currently looking at it in IE7

Important info.

What happens if you add this to the CSS?

Code:

#main_nav ul {margin: 0;}

**aebstract** · May 9, 2011 08:08

It doesn't do anything, and I noticed something else strange is if I add an image to the body div, which I currently have up if you want to look, the nav shifts down to somewhere behind the image.

**ralph.m** · May 9, 2011 08:18

Ah, you need position:relative on the #header div, as that is the context for the position: absolute on the nav.

Code:

#header {
  background-image: url("http://berryequipment.net/berry3/images/layout/topbg.jpg");
  height: 118px;
  text-align: left;
  width: 950px;
  position: relative;
}

**aebstract** · May 9, 2011 08:20

wow thanks, I really though I had already set that to relative

User Tag List

Thread: Positioning my navigation div

Thread Tools

Display

Positioning my navigation div

Bookmarks

Bookmarks

Posting Permissions