...

View Full Version : Problem with a menu width on IE6



Eli.
12-13-2007, 05:14 PM
Hey,
I have a horizontal top menu, that is placed to the left of a logo.
http://www.codingforums.com/attachment.php?attachmentid=5899&stc=1&d=1197564908

My menu width should be auto-resized based on the number of item that menu has.
each item may be different in width then other items.
My menu has a background, left side separator (the red line on the illustration), each item (beside the last item on the right) (the yellow line), and the last item has a separator on the right (the gray line).

IE6 displays the menu to the full width of my header, and overlaps the logo if I don't specify a width.
http://www.codingforums.com/attachment.php?attachmentid=5902&stc=1&d=1197565948

FF and IE7 show this correctly where the last item (on the right) is correctly placed to the right of the menu, and the width of the menu appear to be as I would expect.
http://www.codingforums.com/attachment.php?attachmentid=5901&stc=1&d=1197564908


How can I fix this in IE6 without specifying a width for my menu?

this is the code of my menu:



<div id="header">
<div id="logo"> <a href="./" title="My Logo"><img src="images/Logo.png" alt="Logo" /></a> </div>
<div id="top-menu">
<ul>
<li class="selected"><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Item #2">Item #2</a></li>
<li><a href="#" title="Item #3">Item #3</a></li>
<li class="last"><a href="#" title="Item #4">Item #4</a></li>
</ul>
</div>
</div>


This is my CSS for the menu:


#header {
position:relative;
}
#top-menu {
position:absolute;
top:24px;
right:24px;
height:74px;
background:url(images/Top-Menu-Background.png) top left repeat-x;
}
#top-menu ul {
height:74px;
background:url(images/Top-Menu-Left.png) top left no-repeat;
margin:0;
}
#top-menu li {
float:left;
height:38px;
margin:0;
padding:24px 3px 0 3px;
background:url(images/Top-Menu-Seperator.png) top right no-repeat;
}

#top-menu li {
float:left;
height:38px;
margin:0;
padding:24px 3px 0 3px;
background:url(images/Top-Menu-Seperator.png) top right no-repeat;
}

#top-menu li.last {
background:url(images/Top-Menu-Right.png) top right no-repeat;
}
#top-menu li a {
display:block;
color:#8c8c8c;
text-decoration:none;
font-size:16px;
padding:4px 11px;
font-weight:bold;
}
#top-menu li a:hover {
color:#000;
}
#top-menu li.selected a {
background:#f66014;
color:#FFF;
}

Apostropartheid
12-13-2007, 05:42 PM
You know, you shouldn't really be using images, seeing as they're just lines. Just use borders instead.

Eli.
12-13-2007, 06:07 PM
Hey Cyan,
I'm using images rather then border because the designer decided on that, and they are not plain lines as they appear in the illustrations, the have gradient and shadow...

Apostropartheid
12-13-2007, 06:09 PM
Oh, okay. What's your DTD?

Eli.
12-13-2007, 06:16 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Excavator
12-13-2007, 07:04 PM
Goodmorning Eli.
It's a little difficult to figure out why widths aren't working when you don't give the width of #logo, the size of any images... or even the size of your #header.

At any rate...
#logo is just containing an image and it's not needed. Google divitis.

Try this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
#header {
position:relative;
width: 760px;
margin: 50px auto;
background: #CCCC00;
}
#logo {
float: left;
}
#top-menu {
height:74px;
background:url(images/Top-Menu-Background.png) top left repeat-x;
}
#top-menu ul {
height:74px;
background:url(images/Top-Menu-Left.png) top left no-repeat;
margin:0 0 0 155px;
}
#top-menu li {
float:left;
height:38px;
margin:0;
padding:24px 3px 0 3px;
background:url(images/Top-Menu-Seperator.png) top right no-repeat;
}

#top-menu li {
float:left;
height:38px;
margin:0;
padding:24px 3px 0 3px;
background:url(images/Top-Menu-Seperator.png) top right no-repeat;
}

#top-menu li.last {
background:url(images/Top-Menu-Right.png) top right no-repeat;
}
#top-menu li a {
display:block;
color:#8c8c8c;
text-decoration:none;
font-size:16px;
padding:4px 11px;
font-weight:bold;
}
#top-menu li a:hover {
color:#000;
}
#top-menu li.selected a {
background:#f66014;
color:#FFF;
}
</style>
</head>
<body>
<div id="header">
<a href="./" title="My Logo"><img src="images/Logo.png" width="150" height="75" alt="Logo" id="logo"/></a>
<div id="top-menu">
<ul>
<li class="selected"><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Item #2">Item #2</a></li>
<li><a href="#" title="Item #3">Item #3</a></li>
<li class="last"><a href="#" title="Item #4">Item #4</a></li>
</ul>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum