CSS Forum

**JustAGuy** · 02:41 PM

I've been playing around with this idea and with some help, had it working fine in Opera, Firefox and IE7. Then I did some cosmetic changes which took it from a 2 column page to a 3 coulmn and now it doesn't display correctly in IE7. It looks fine in Opera and FF, but once again, IE is causing me to pull what little hair I have left out.

If someone could take a look at my code and tell me what stupid thing I did wrong, I'd appreciate it. My code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="robots" content="all">
<meta name="rating" content="general">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
background-color:#000;
margin:0;
padding:0;
}
#container {
width:973px;
margin:0 auto;
height:825px;
}
#header {
background-image:url('http://vance.thebams.org/gabby/images/header1.jpg');
background-repeat: no-repeat;
width:973px;
height: 241px;
}
#header2 {
background-image:url('http://vance.thebams.org/gabby/images/header2.jpg');
background-repeat: no-repeat;
width:973px;
height: 55px;
}
#left {
background-image:url('http://vance.thebams.org/gabby/images/left.jpg');
background-repeat: repeat;
padding-top: 3.0em;
color: #FFF;
float:left;
height:400px;
width:196px;
}
#mid {
background-image:url('http://vance.thebams.org/gabby/images/mid.jpg');
background-repeat:repeat;
color: #FFF;
width: 697px;
height: 448px;
margin:0px;
float:left;
}
#right {
background-image:url('http://vance.thebams.org/gabby/images/right.jpg');
background-repeat:repeat;
height: 448px;
width: 80px;
float: left;
}
#foot {
background-image:url('http://vance.thebams.org/gabby/images/foot.jpg');
color: #FFF;
width: 973px;
height: 80px;
float: left;
}
div.menu {
width:185px;
padding: 0.9px;
margin-top: 0.7em;
margin-left:0.5em;
border:0px;
text-align:left;
}
div.menu a {
display:block;
font-size:20px;
width:100%;
padding: 0.30em;
margin-left: 0.3em;
font-weight:bold;
border-top:1px ;
color: rgb(109,85,165);
text-decoration:none;
line-height:25px;
}
html>body div.menu a {width:auto;}
div.menu a:hover {
color: #000;
font-size:20px;
font-weight: bold;
font-style: italic;
}
p {
font-size:16px;
font-family: Arial;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="header2">
</div>
<div id="left">
<div class="menu">
<a href="..">Home</a>
<a href="..">Archives</a>
<a href="..">Junk</a>
<a href="..">Junk</a>
<a href="..">TBD</a>
<a href="..">TBD</a>
<a href="..">TBD</a>
<a href="..">Contact Us</a>
</div>
</div>
<div id="mid">

<p>This is for content text</p>
</div>
<div id="right">
</div>
<div id="foot">
</div>
</div>

I would appreciate any help with this. Also, maybe someone could explain what I did wrong and what to watch for next time. And, do I need to do something different to get it show in IE7 and show in FF and Opera?

Thanks

**LadynRed** · 10-23-2008, 03:27 PM

You are making that way more complicated than it needs to be. You're working with solid colors, you don't need background images for white and purple boxes.

I think I mentioned once before, you should put your menu into an unordered list, you have far more control over it that way, AND it's semantically correct.

You should also use conditional comments to call a separate css file to make IE behave - I've included the conditional comments below that you'd need. Change the file names to anything your heart desires. It is best to AVOID putting hacks into your code - they have a tendency to break.

Try this:

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="robots" content="all">
<meta name="rating" content="general">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
background-color:#000;
margin:0;
padding:0;
}
#container {
width:973px;
margin:0 auto;
height:825px;
background: #fff;
position: relative;
}
#header {
background:url(header1.jpg) no-repeat;

width:973px;
height: 241px;
}
#header2 {
background:url(header2.jpg) no-repeat;
/*background-repeat: no-repeat;*/
width:973px;
height: 55px;
}
#left {
/*background-image:url(left.jpg);
background-repeat: repeat;*/
background: #fff;
padding-top: 3.0em;
color: #FFF;
float:left;
height:400px;
width:156px;
}

#mid {
/*background-image:url(mid.jpg);
background-repeat:repeat;*/
background: #6c55A3;
color: #FFF;
width: 777px;
height: 448px;
margin:0px;
float:left;
}
#right {
/*background-image:url(right.jpg);
background-repeat:repeat;*/
height: 448px;
width: 30px;
float: left;
/*border: 1px solid red;*/
}
#foot {
background-image:url(foot.jpg);
color: #FFF;
clear: both;
width: 973px;
height: 80px;
float: left;

}
ul.menu {
width:150px;
margin: 0;
padding: 0;
text-align:left;
/*display: inline;*/
list-style: none;
border: 1px solid green;
}

ul.menu li{
margin-left: 10px;

}

ul.menu a {
display:block;
line-height: 2em;
font-size:20px;
font-weight:bold;
border-top:1px ;
color: rgb(109,85,165);
text-decoration:none;

}

/*html>body div.menu a {width:auto;}*/

ul.menu a:hover {
color: #000;
font-size:20px;
font-weight: bold;
font-style: italic;
}
p {
font-size:16px;
font-family: Arial;
}
</style>



</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="header2">
</div>
<div id="left">
<ul class="menu">
<li><a href="..">Home</a></li>
<li><a href="..">Archives</a></li>
<li><a href="..">Junk</a></li>
<li><a href="..">Junk</a></li>
<li><a href="..">TBD</a></li>
<li><a href="..">TBD</a></li>
<li><a href="..">TBD</a></li>
<li><a href="..">Contact Us</a></li>
</ul>

</div>
<div id="mid">

<p>This is for content text</p>
</div>
<div id="right">
</div>
<div id="foot">
</div>
</div>

For IE6, you'll need this in the 'fixes' file to correct it's bad behavior with lists:

Quote:

ul.menu a {
height: 1%;
}