Forum Moderators: not2easy
code here
[1]<!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">
<head>
<style type="text/css" media="screen">
/* CSS Document */
/* ie styles----------------------------------- */
*html #mainNav li{width:149px;}
*html #mainNav ul{width:744px;}
*html #contact a:hover {background:#000;}
*html #contact a:hover{width:100%;display:block;}
/*main styles */
body {
text-align:center;
font-family: verdana, arial, helvetica, sans-serif;
font-size:small;
background:url(images/bg_imageblue1.png) repeat-x #557e98;
color:#555;
margin:0;
padding:0;
}
#wrapper {
width:760px;
margin:25px auto;
text-align:left;
}
#sideBar {
float: left;
margin-left: 0px;
display: inline;
background: #000000;
width:152px;
}
#header {
height: 100px;
}
#mainNav {
background: #9b9aa0;
height: 30px;
}
#colourBar {
background: #345461 no-repeat right center;
height: 15px;
width: 760px;
padding:0;
margin:0;
}
#content {
float: right;
width: 570px;
padding-top: 15px;
padding-right: 10px;
padding-left: 28px;
}
#footer {
clear: both;
background: url(images/footer_bg.png) repeat-x #345461;
height: 22px;
margin-top: 0px;
width:760px;
}
.clear {clear: both;}
#mainNav li {
margin: 0;
padding: 0;
float: left;
width: 152px;
font-size: 98%;
font-family:Verdana, Arial, Helvetica, sans-serif;
list-style: none;
font-weight:bold;
text-align:center;
}
#mainNav ul {
width: 760px;
float:left;
margin: 0px;
padding: 0 10px 0 0;
}
#mainNav #about {
background: #939090;
}
#mainNav #portfolio {
background: #939090;
}
#mainNav a {
color:#fff;
text-align:center;
text-decoration:none;
display:block;
line-height:30px;
display:block;
}
#mainNav a:hover {
color:#990000;
background:#000;
}
#mainNav a:hover, body#homepage #home{background:#000;}
#mainNav a:hover, body#aboutus #about{background:#000;}
#mainNav a:hover, body#whatwedo #do{background:#000;}
#mainNav a:hover, body#contactus #contact {background:#000;}
#mainNav a:hover, body#portfolio #portfolio{background:#000;}
</style>
</head>
<body id="homepage">
<div id="wrapper">
<div id="header"></div>
<div id="mainNav">
<ul>
<li id="home"><a href="index.php">Home</a></li>
<li id="about" ><a href="about.php">About us</a></li>
<li id="do"><a href="do.php">What we do</a></li>
<li id="portfolio" ><a href="portfolio.php">Portfolio</a></li>
<li id="contact"><a href="contact.php">Contact</a></li>
</ul>
</div>
<div id="colourBar"></div>
<div class="clear"></div>
<div id="content">content</div>
<div id="sideBar">sidebar</div>
<div class="clear"></div>
<div id="footer">footer</div>
</div>
</body>
</html>[/1]
Thank you in advance for any help
[edited by: SuzyUK at 2:52 pm (utc) on May 5, 2007]
[edit reason] shortened code sample [/edit]
I snipped the irrelevant bits from your CSS, but didn't change anything that I left, so this next bit should still make sense, let us know if not
there's a few things going on, and being as I'm not sure which effect you're actually after - a neat fit for all five links or 10px padding to the right? - I'll just comment on the bits that I can see are affecting the mainNav
First the wrapper is 760px wide, and the mainNav will be 760px wide, but the mainNav ul is set to 760px wide with 10px right padding which will make it 770px wide. I'm not sure what that 10px padding is actually doing - it has no color or effect in your code so can it be removed?
next the IE CSS rules which you have in place are targeting all of IE6 and below, because of the * html hack, so you're actually telling IE6 to only make the list 744px wide (it should be 745px btw.. = 5 x 149) therefore the gap I *think* you're referring to at the right is the difference between 745px and 760px?
if you amend the #mainNav ul to:
#mainNav ul {
width: 760px;
float:left;
margin: 0;
padding: 0; /*add this */
/*padding: 0 10px 0 0;*/ /* comment out temporarily */
}and remove (comment out) the IE styles
/*
*html #mainNav li{width:149px;}
*html #mainNav ul{width:744px;}
*html #contact a:hover {background:#000;}
*html #contact a:hover{width:100%;display:block;}
*/Does that do what you want? If not can you clarify which effect you're after, thanks
PS: You are using a compliant Doctype and the IE5.x box model should not be affected by these widths if there is no padding involved on #mainNav, #mainNav ul or #mainNav li (add padding inside the links if required) - btw the font-size: small *will* need adjusted for IE5.x - needs to be x-small for it - but if you use the * html hack it will apply it to IE6 as well so it may better that it should go in a "conditional comment".
Suzy
