css menu in IE not spacing correctly

finstah1

11-01-2006, 09:13 PM

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. :)

<!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>


</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 © 2004-2006</li>
</ul>
</div>
</body>

</html>

_Aerospace_Eng_

11-02-2006, 06:14 AM

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" 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"> </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"> </div>
<div id="bar-bottom">
<ul>
<li>Copyright © 2004-2006</li>
</ul>
</div>
</div>
</body>
</html>

finstah1

11-02-2006, 02:41 PM

worked like a charm. thanks.

What was I missing?

VIPStephan

11-02-2006, 02:47 PM

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.

_Aerospace_Eng_

11-02-2006, 02:59 PM

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.

finstah1

11-02-2006, 05:46 PM

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.