So I have a page that I have sliced up in fireworks to do the html design. In my menu div, I have an image that I sliced that has a border on the bottom of it so I just set the menu background to that image. It looks how it should in IE but in FF and Chrome the image has no border on the bottom. I can't figure out if my main background is over writing it or what. Here is my code. Can any one help, I'm kind of stumped on this.
CSS
body{
margin: 0 0 0 0;
padding: 0 0 0 0;
background-image: url("images/grey.jpg");
background-repeat: repeat;
}
form{
margin: 0 0 0 0;
}
#wrapper{
background-repeat: repeat-y;
text-align: center;
}
#top{
background-image: url("images/topBrown.jpg");
background-repeat: repeat-x;
width: 100%;
height: 7px;
}
#header{
margin-left: auto;
margin-right: auto;
width: 989px;
text-align: left;
}
#headerLeft{
width: 326px;
height: 121px;
display: inline;
float: left;
}
#headerRight{
display: inline;
float: right;
width: 663px;
height: 121px;
background-image: url("images/headerRight.jpg");
background-repeat: no-repeat;
}
#menu{
background-image: url("images/menu.jpg");
background-repeat: repeat-x;
width: 989px;
height: 32px;
}
#menuLeft{
float: left;
padding-top: 8px;
padding-left: 65px;
padding-bottom: 8px;
}
#menuRight{
float:right;
}
#container{
background-image: url("images/center.jpg");
text-align: left;
margin-left: auto;
margin-right: auto;
width: 976px;
clear: both;
}
#leftContent{
width: 478px;
padding-left: 20px;
}
.normal{
font-family: Arial;
font-size: 14px;
color: #57441A;
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link REL="Stylesheet" HREF="home.css" TYPE="text/css" />
</head>
<body>
<div id="wrapper">
<div id="top"></div>
<div id="header">
<div id="headerLeft">
<a style="border: none; text-align: left; float: left;" href="~/default.aspx" runat="server"><img style="border: none;" src="images/topLogo.jpg" alt="Jordan Cochran DDS"/></a>
</div>
<div id="headerRight"></div>
<div id="menu">
<div id="menuLeft"><span class="normal" style="font-weight: bold">JORDAN COCHRAN DDS, PC</span></div>
<div id="menuRight"></div>
</div>
</div>
<div id="container">
<div id="leftContent" runat="server">
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
</div>
</div>
</div>
</body>
</html>
Thanks!
