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
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    css menu in IE not spacing correctly

    I have a horizontal menu that works great in FF, Mozilla and NN7 but doesn't span the entire 'box' in IE 6 or IE7. Can someone see something I missed here somewhere?

    I've listed the code and attached a screen shot of both browsers. Any help is much appreciated.

    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" xml:lang="en" lang="en">
    <head>
    <style>
    body, html {
    	margin: 0;
    	padding: 0;
    	color: #6F7376;
    	background-color: #FDFFEE;
    	line-height: 130%;
    	font-family: "Franklin Gothic Medium", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    	font-size: 90%;
    	text-align: center;
    }
    #wrapper-header { background: #222;}
    #header, #menu {
    	width: 760px;
    	margin: 0 auto;
    }
    #wrapper-menu {
    	background:transparent url(images/bgd_nav_light.png) top left repeat-x;
    	float: left;
    	width: 100%;
    }
    
    /* menu items start */
    #menu {
    	font-size: 85%;
    	font-weight: bold;
    	font-family: "Franklin Gothic Medium", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;	
    	white-space: nowrap; /* stops half a menu link dropping to next line. Instead, the whole link will drop. This only happens if you have a lot of menu links, and large text size */
    	padding-right: 0px;	/*  (Was 2px. Makes below irrelevant when changed too. CL 10/04/06.) The menu far left, and far right borders are not quite lining up in non IE browsers for some reason. This makes it less noticable */
    }
    
    
    #menu ul {
    	text-align: center;
    	margin: 0;
    	padding: 0;	
    	list-style: none;
    	float: left;	
    	width: 100%;
    	background-color: #87143C;
    }
    
    #menu li { display: block; width: 189px; }
    
    #menu li.first a { border-left: 1px solid #FFFFFF; }
    
    #menu li.last a, #menu li.last a:link { border-right: 1px solid #FFFFFF; width: 188px}
    
    #menu a:link, #menu a:visited {
    	padding: 0; /* and 1em */
    	color: #CF6B74;
    	text-decoration: none;
    	float: left;
    	width: 189px;
    	border-right: 1px solid #FFFFFF;
    }
    
    #menu a:hover {
    	color: #FFFFFF;
     	background:transparent url(images/bgd_nav.gif) top left repeat-x;
    }
    
    /* menu items end */
    
    /*Set this width 2% smaller than the above */
    #content, #footer {
    	width: 740px;
    	margin: 0 auto;
    }
    #wrapper-menu {
    	background:transparent url(images/bgd_nav_light.png) top left repeat-x;
    	float: left;
    	width: 100%;
    }
    
    /* menu items start */
    #menu {
    	font-size: 85%;
    	font-weight: bold;
    	font-family: "Franklin Gothic Medium", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;	
    	white-space: nowrap; /* stops half a menu link dropping to next line. Instead, the whole link will drop. This only happens if you have a lot of menu links, and large text size */
    	padding-right: 0px;	/*  (Was 2px. Makes below irrelevant when changed too. CL 10/04/06.) The menu far left, and far right borders are not quite lining up in non IE browsers for some reason. This makes it less noticable */
    }
    
    
    #menu ul {
    	text-align: center;
    	margin: 0;
    	padding: 0;	
    	list-style: none;
    	float: left;	
    	width: 100%;
    	background-color: #87143C;
    }
    
    #menu li { display: block; width: 189px; }
    
    #menu li.first a { border-left: 1px solid #FFFFFF; }
    
    #menu li.last a, #menu li.last a:link { border-right: 1px solid #FFFFFF; width: 188px}
    
    #menu a:link, #menu a:visited {
    	padding: 0; /* and 1em */
    	color: #CF6B74;
    	text-decoration: none;
    	float: left;
    	width: 189px;
    	border-right: 1px solid #FFFFFF;
    }
    
    #menu a:hover {
    	color: #FFFFFF;
     	background:transparent url(images/bgd_nav.gif) top left repeat-x;
    }
    
    /* menu items end */
    
    #content {
    	padding: 3.5em 10px 20px 10px;
    	border-left: 1px solid #bbb;
    	border-right: 1px solid #bbb;
    	background: #FFFFFF;
    	height: 560px;
    	text-align: right;
    }
    
    /* footer styles */
    #bar-bottom ul {
    	display: block;
    	clear: both;
    	padding: 2em 10px;
    	text-align: center;
    	letter-spacing: 0.05em;
    	border: 1px solid #222;
    	font-size: 80%;
    } 
    
    div#bar-bottom ul li {
     	display: inline;
     	list-style-type: none;
     	margin: 0px;
    	font: normal 11px/14px  "Franklin Gothic Medium", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    	color: #FDFFEE;
     }
     
     div#bar-bottom ul li a {
     	font: normal 11px/14px  "Franklin Gothic Medium", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    	color: #87143C; /* 637800; */
    	text-decoration: underline;
    }
     	
    div#bar-bottom ul li a:hover {text-decoration: underline;}	
    
    #bar-bottom {
    	width: 100%; 
    	height: 100px;
    	position:relative; 
    	background-color: #222;
    	border: 1px solid #222222;
    }
    
    #home a.home, #eyecandy a.eyecandy, #resonance a.resonance, #shoutout a.shoutout, #xspot a.xspot {
    	background-color: #979983;
    	color: #CCCCCC; 
    }
    
    #home a:hover.home, #eyecandy a:hover.eyecandy, #resonance a:hover.resonance, #shoutout a:hover.shoutout, #xspot a:hover.xspot {
    	background: #979983;
    	color: #CCCCCC; 
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    /*** Fix nav bar layout in IE ***/
    #menu { padding-right: 2px; white-space: nowrap; clear: left;} See above comment. This re-adjusts IE to the above padding on other #menu item above
    #content { padding-top: 1.8em; } /* Set padding top in IE to 20px */
    #menu li { display: inline; width: 188px; height: 24px;}
    #menu li.first a { border-left: 1px solid #FFFFFF;}
    #menu li.last a, #menu li.last a:link { border-right: 1px solid #FFFFFF; color: #CCCCCC;}
    #menu a:link, #menu a:visited {
    	padding: 0; 
    	color: #CF6B74;
    	text-decoration: none;
    	float: left;
    	width: 188px;
    	border-right: 1px solid #FFFFFF;	
    }
    </style>
    <![endif]-->
    
    </head>
    
    <body id="shoutout">
    <div id="wrapper-header">
    
    </div>
    
    <div id="wrapper-menu">
    	<div id="menu">
    		<ul>
    			<li class="first"><a class="home" href="index.php" title="Home">Home</a></li>
    			<li><a class="eyecandy" href="image/" title="Pictures">Eye candy</a></li>
    			<li><a class="resonance" href="song/" title="Music">Resonance</a></li>
    			<li class="last"><a class="shoutout" href="contact/" title="Contact us">Give a shout out</a></li>
    		</ul>
    	</div>
    </div>
    
    <div id="content">
    	
    </div>
    <div id="bar-bottom">
    	 <ul>
            <li>Copyright &copy; 2004-2006</li>
          </ul>
    </div>
    </body>
    
    </html>
    Attached Thumbnails Attached Thumbnails css menu in IE not spacing correctly-css-discrep.jpg  

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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" xml:lang="en" lang="en">
    <head>
    <title></title>
    <style type="text/css">
    html,body {
    margin:0;
    padding:0;
    border:0;
    color:#6F7376;
    background-color:#FDFFEE;
    line-height:130%;
    font-size:90%;
    text-align:center;
    height:100%;
    font:normal 15px "Franklin Gothic Medium", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
    }
    
    #wrapper {
    width:760px;
    margin:auto;
    border-left:1px solid #bbb;
    border-right:1px solid #bbb;
    min-height:100%;
    background:#FFF;
    position:relative;
    }
    
    * html #wrapper {
    height:100%;
    }
    
    #wrapper-header {
    background:#222;
    height:100px;
    }
    
    /* menu items start */
    #menu {
    font-size:85%;
    font-weight:700;
    background:transparent url(images/bgd_nav_light.png) top left repeat-x;
    }
    
    #menu ul {
    text-align:center;
    margin:0;
    padding:0;
    list-style:none;
    }
    
    #menu li {
    float:left;
    width:189px;
    background-color:#87143C;
    border-left:1px solid #FFF;
    }
    
    #menu li.last {
    border-right:1px solid #FFF;
    width:188px;
    }
    
    #menu a:link,#menu a:visited {
    padding:0;
    /* and 1em */
    color:#CF6B74;
    text-decoration:none;
    float:left;
    width:100%;
    background-color:#87143C;
    }
    
    #menu a:hover {
    color:#FFF;
    background:transparent url(images/bgd_nav.gif) top left repeat-x;
    }
    
    /* menu items end */
    #content {
    padding:3.5em 10px 110px;
    text-align:right;
    }
    
    /* footer styles */
    #bar-bottom ul {
    clear:both;
    padding:0 10px;
    text-align:center;
    letter-spacing:0.05em;
    font-size:80%;
    margin:0;
    }
    
    #bar-bottom ul li {
    display:inline;
    list-style-type:none;
    margin:0;
    color:#FDFFEE;
    }
    
    #bar-bottom ul li a {
    color:#87143C;
    /* 637800; */
    text-decoration:underline;
    }
    
    #bar-bottom ul li a:hover {
    text-decoration:underline;
    }
    
    #bar-bottom {
    width:100%;
    height:100px;
    position:relative;
    background-color:#222;
    border-top:1px solid #222;
    border-bottom:1px solid #222;
    line-height:100px;
    position:absolute;
    left:0;
    bottom:0;
    }
    
    * html #bar-bottom {
    bottom:-1px;
    }
    
    #home a.home,#eyecandy a.eyecandy,#resonance a.resonance,#shoutout a.shoutout,#xspot a.xspot {
    background-color:#979983;
    color:#CCC;
    }
    
    #home a:hover.home,#eyecandy a:hover.eyecandy,#resonance a:hover.resonance,#shoutout a:hover.shoutout,#xspot a:hover.xspot {
    background:#979983;
    color:#CCC;
    }
    
    .clear {
    clear:both;
    line-height:0px;
    font-size:0;
    }
    </style>
    </head>
    <body id="shoutout">
    <div id="wrapper">
    	<div id="wrapper-header">&nbsp;</div>
    	<div id="menu">
    		<ul>
    			<li><a class="home" href="index.php" title="Home">Home</a></li>
    			<li><a class="eyecandy" href="image/" title="Pictures">Eye candy</a></li>
    			<li><a class="resonance" href="song/" title="Music">Resonance</a></li>
    			<li class="last"><a class="shoutout" href="contact/" title="Contact us">Give a shout out</a></li>
    		</ul>
    	</div>
    	<div id="content"> </div>
    	<div class="clear">&nbsp;</div>
    	<div id="bar-bottom">
    		<ul>
    			<li>Copyright &copy; 2004-2006</li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    worked like a charm. thanks.

    What was I missing?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by finstah1 View Post
    worked like a charm. thanks.

    What was I missing?
    See Aero? If you just spoon-feed them they just copy and paste but never learn from it.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by finstah1 View Post
    worked like a charm. thanks.

    What was I missing?
    You didn't seem to understand how the box model worked. You were trying to adjust widths but the max width you could use was 190px. You seemed to be using something less than that.

    @VIPStephen Most people do learn but some do copy and paste. Thats not my problem though. Its theirs. If they want to know how its done they'll study it and ask questions about it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    See Aero? If you just spoon-feed them they just copy and paste but never learn from it.
    um, I'm asking what I missed not just copy and paste BS. Yes, it worked great cross browser but it was not working with my template. I cut a lot of the code out and posted a generic version of my page. The header and footer span the entire width of the page. This code is designed for 'in box' The problem was if I used 190px, the last button would drop to a new line in IE.

    I do appreciate the help and quick response and I've been looking at it all morning comparing Aeros code to mine to see if I can alter my template a little bit to see what's wrong.

    Please do not assume I'm a newbie looking for free code or a quick fix Mr. Deutschland. The only way I can learn is to ask questions. No one knows every minute detail about web design and that's why I come here looking for help. Not free code. You don't learn squat from free code. All of my posts contain my efforts and I see if people can find where I went wrong.

    You know nothing about me or my experience coding so please spare me your "I'm better than you" drivel.

    Aerospace, thanks for taking the time to offer your help.
    Last edited by finstah1; 11-02-2006 at 06:49 PM.


  •  

    Posting Permissions

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