Webmaster Forum - View Single Post

DJ-Craig · 06-13-2007, 07:22 PM

i used the no-lag css navigation bar found in this forum to create a navigation menu for the left of my website. When i load in ie6/7 it is aligned slightly offset to the right compared to what is seen in firefox. I cant get them to align with one another. can anyone help me?

heres a link to the site http://www.cma-design.co.uk/test.html

Firefox View:

IE6/7 View:

heres my html and css code for the site if that helps:

Quote:

<!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">
<head>
<title>CMA Design</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="header">
</div> 
<div id="nav">
<img src="slices/navbar.jpg" />
</div> 
<div id="left">
<div id="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</div> 
</div> 
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis odio. Fusce quam enim, vehicula eu, iaculis nec, rutrum nec, sapien. Curabitur sit amet tortor. Nunc dui. Aliquam erat volutpat. Mauris a sem et nulla tristique auctor. Donec eu sapien sit amet nunc aliquam tempor. Aliquam neque mauris, tincidunt at, fringilla sed, rutrum vitae, turpis. Mauris convallis quam at quam. Praesent rutrum lorem sodales sem. Duis pharetra eros sit amet libero. Vestibulum commodo dapibus libero. Fusce varius porttitor nulla. Duis eu quam. Cras sem.

Sed dictum, sapien mattis egestas blandit, odio ante luctus quam, sit amet convallis massa augue eget dolor. Etiam pede pede, dapibus eget, vestibulum sed, luctus et, pede. Integer consequat tempus odio. Quisque eu elit quis sapien interdum adipiscing. Integer a leo. Suspendisse eget nibh auctor elit molestie suscipit. Aliquam vel turpis in massa sodales pulvinar. Aliquam at eros. Praesent vel velit at sem semper facilisis. Donec placerat velit ut massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis odio. Fusce quam enim, vehicula eu, iaculis nec, rutrum nec, sapien. Curabitur sit amet tortor. Nunc dui. Aliquam erat volutpat. Mauris a sem et nulla tristique auctor. Donec eu sapien sit amet nunc aliquam tempor. Aliquam neque mauris, tincidunt at, fringilla sed, rutrum vitae, turpis. Mauris convallis quam at quam. Praesent rutrum lorem sodales sem. Duis pharetra eros sit amet libero. Vestibulum commodo dapibus libero. Fusce varius porttitor nulla. Duis eu quam. Cras sem.

Sed dictum, sapien mattis egestas blandit, odio ante luctus quam, sit amet convallis massa augue eget dolor. Etiam pede pede, dapibus eget, vestibulum sed, luctus et, pede. Integer consequat tempus odio. Quisque eu elit quis sapien interdum adipiscing. Integer a leo. Suspendisse eget nibh auctor elit molestie suscipit. Aliquam vel turpis in massa sodales pulvinar. Aliquam at eros. Praesent vel velit at sem semper facilisis. Donec placerat velit ut massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div> 
<div id="footer">
<img src="slices/footer.jpg" />
</div> 
</div> 
</body>
</html>

Quote:

body {
margin: 0px;
padding: 0;
text-align: center;
min-width: 751px;
background-color: #CCCCCC;
font: 0.7em Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
text-align: left;
width: 751px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-image: url('slices/bg.jpg');
}

#header {
height: 251px;
background-image: url('slices/title.jpg');
background-repeat:no-repeat;
width: 751px;
}

#nav {
height: 60px;
width: 751px;
}

#left {
margin: 0px;
padding: 0px;
width: 229px;
float: left;
}

#menu {
height: auto;
width: 175px;
margin-left: 24px;
padding: 0px;
}

#menu li {
height: 24px;
width: 166px;
margin: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: left;
text-indent: 25px;
line-height: 24px;
list-style-type: none;
background-image: url('slices/btn.jpg');
background-repeat: no-repeat;
}
#menu li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #000000;
}
#menu li a:link {
color: #000000;
background-image: url('slices/btn.jpg');
background-position: 0px 0px;
}
#menu li a:visited {
color: #000000;
background-image: url('slices/btn.jpg');
background-position: 0px 0px;
}
#menu li a:hover {
color: #000000;
background-image: url('slices/btn.jpg');
background-position: 0px -24px;
}
#menu li a:active {
color: #000000;
background-image: url('slices/btn.jpg');
background-position: 0px 0px;
}

#main {
margin: 0px;
padding: 0px;
width: 522px;
float:right;
}

#footer {
margin: 0px;
padding: 0px;
width: 751px;
height: 39px;
float: left;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */