Forum Moderators: not2easy
I have a problem - I'm trying to create a menu but it needs to be pixel perfect to the width. As usual it works great in all browsers with the exception of the dreaded IE6!
Basically the width on the "menu" is correct but in IE6 there's a huge space at the bottom. If I then increase the width of the menu by upwards of 3 pixels then there's no space at the bottom but space is then created on the right - which is no good.
Any help with this would be very much appreciated as I'm losing the will to code - and I need to get some sleep!
Here's the code... Forget all the background image stuff - it doesn't matter for this problem:
<!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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Untitled Page</title>
<style type="text/css" media="screen"><!--
#menu {
width: 687px;
height: 57px;
float: left;
margin: 0;
padding: 0;
border: solid 1px #000;
}
#menu .alt,
#menu .alt a:hover {
visibility: hidden;
text-decoration: none;
}
a#button1a {
background-color: #585858;
display: block;
width: 153px;
background-image: url(images/menu.png);
background-position: 0 0;
height: 57px;
float: left;
margin: 0 auto;
}
a#button1a:hover {
background-position: 0 57px;
float: left;
}
a#button2a {
background-color: #09f;
display: block;
width: 72px;
height: 57px;
background-image: url(images/menu.png);
background-position: -153px 0;
float: left;
margin: 0 auto;
}
a#button2a:hover {
background-position: -153px 57px;
float: left;
}
a#button3a {
background-color: #4daaf2;
display: block;
width: 69px;
height: 57px;
background-image: url(images/menu.png);
background-position: -225px 0;
float: left;
margin: 0 auto;
}
a#button3a:hover {
background-position: -225px 57px;
float: left;
}
a#button4a {
background-color: #4daaf2;
display: block;
width: 137px;
height: 57px;
background-image: url(images/menu.png);
background-position: -294px 0;
float: left;
margin: 0 auto;
}
a#button4a:hover {
background-position: -294px 57px;
float: left;
}
a#button5a {
background-color: #a61a1a;
display: block;
width: 163px;
height: 57px;
background-image: url(images/menu.png);
background-position: -431px 0;
float: left;
margin: 0 auto;
}
a#button5a:hover {
background-position: -431px 57px;
float: left;
}
a#button6a {
background-color: #ababab;
display: block;
width: 93px;
height: 57px;
background-image: url(images/menu.png);
background-position: -594px 0;
float: left;
margin: 0 auto;
}
a#button6a:hover {
background-position: -594px 57px;
float: left;
}
--></style>
</head>
<body>
<div id="menu">
<a id="button1a" href="menu1"><span class="alt">Menu 1</span></a>
<a id="button2a" href="menu2"><span class="alt">Menu 2</span></a>
<a id="button3a" href="menu3"><span class="alt">Menu 3</span></a>
<a id="button4a" href="menu4"><span class="alt">Menu 4</span></a>
<a id="button5a" href="menu5"><span class="alt">Menu 5</span></a>
<a id="button6a" href="menu6"><span class="alt">Menu 6</span></a>
</div>
</body>
</html>
it can be solved with a bit of TLC for IE
#menu {
width: 687px;
float: left;
border: solid 1px #000;
}#menu a {
float: left;
height: 57px;
}#menu a#button1a {
width: 153px;
background: #585858 url(images/menu.png) no-repeat 0 0;
}#menu a#button2a {
width: 72px;
background: #09f url(images/menu.png) no-repeat -153px 0;
}#menu a#button3a {
width: 69px;
background: #4daaf2 url(images/menu.png) no-repeat -225px 0;
}#menu a#button4a {
width: 137px;
background: #4daaf2 url(images/menu.png) no-repeat -294px 0;
}#menu a#button5a {
width: 163px;
background: #a61a1a url(images/menu.png) no-repeat -431px 0;
}#menu a#button6a {
width: 93px;
background: #ababab url(images/menu.png) no-repeat -594px 0;
margin-right: -3px; /* IE6 needs this others don't mind */
}#menu a#button1a:hover {background-position: 0 57px;}
#menu a#button2a:hover {background-position: -153px 57px;}
#menu a#button3a:hover {background-position: -225px 57px;}
#menu a#button4a:hover {background-position: -294px 57px;}
#menu a#button5a:hover {background-position: -431px 57px;}
#menu a#button6a:hover {background-position: -594px 57px;}#content {
background: #ffa;
clear: left; /* good browsers need this to clear the floats */
width: 100%; /* IE6 also needs 'hasLayout' */
}
I optimized your code a little, removed unnecessary
display:blockmargin: 0 autoThe code above is commented, but the theory is to give the last menu item a negative 3px right margin to allow space for IE6's "jog" then in order for the following element (in my code I'm assuming a div called "content" but you use whatever your following element actually is) to properly "clear" the menu you should be using clear: left; anyway, then IE6 also needs to be given a hasLayout triggering property too.
I've used width, assuming that the content div is 100% of a container div? but without further code it's not easy to say which one is best [webmasterworld.com] for you.
usual disclaimer: you might want to put these in a separate conditional IE6 file if you want to segregate your older workarounds.
