Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    41
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Problem with a menu width on IE6

    Hey,
    I have a horizontal top menu, that is placed to the left of a logo.


    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.


    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.



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

    this is the code of my menu:

    Code:
    <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:
    Code:
    #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;
    }
    Attached Thumbnails Attached Thumbnails Problem with a menu width on IE6-step1.gif   Problem with a menu width on IE6-step2.gif   Problem with a menu width on IE6-step3.gif   Problem with a menu width on IE6-step4.gif  

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You know, you shouldn't really be using images, seeing as they're just lines. Just use borders instead.

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    41
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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...

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Oh, okay. What's your DTD?

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    41
    Thanks
    0
    Thanked 2 Times in 2 Posts
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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:
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •