Working on a new site and trying to lay it out in css as I have designed it, but I can't get it to display properly in FF 2 or IE 6...these are my main browser concerns at the moment.
Here's how it should look:
But here's what I have and it does'nt look right:
The main problems are the header (hdr) in both browsers, then the display of the grayish gradient background in FF.
I'm not concerned with the look of the "relief for the feet products" tag line at this point.
Any ideas? Here's the code:
Here's how it should look:
But here's what I have and it does'nt look right:
The main problems are the header (hdr) in both browsers, then the display of the grayish gradient background in FF.
I'm not concerned with the look of the "relief for the feet products" tag line at this point.
Any ideas? Here's the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DrTodds - Relief for the Feet Products</title>
<style type="text/css">
body {
padding:25px 0 0 0;
}
.wrap {
margin-left: auto;
margin-right: auto;
width:872px;
}
.hdr {
margin-left:auto;
margin-right:auto;
width:794px;
height:113px;
}
.hdr_lft {
width:303px;
float:left;
}
#menucontainer ul {
list-style-type: none;
width:362px;
float:left;
}
#menucontainer ul li {
float:left;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
vertical-align:bottom;
display: inline;
}
#menucontainer ul li a {
color:#999999;
text-decoration:none;
list-style-type: none;
}
#menucontainer ul li a:hover {
color:#333333;
text-decoration:none;
list-style-type: none;
}
#menucontainer ul li a:active {
color:#000000;
text-decoration:none;
list-style-type: none;
}
#menucontainer ul li a:visited {
color:#666666;
text-decoration:none;
list-style-type: none;
}
.hdr_rgt {
width:129px;
float:right;
text-align:center;
}
.mid_section {
width:872px;
height:313px;
list-style-type: none;
}
.mid_lft {
width:39px;
float:left;
}
.mid_center {
width:794px;
height:313px;
float:left;
vertical-align:top;
}
.mid_srch_bar {
margin-left:auto;
margin-right:auto;
background-image:url(assets/img/srch_bar_bg.gif);
width:794px;
height:37px;
float:left;
}
.mid_body {
width:794px;
height:276px;
background-image:url(assets/img/mid_fade_bg.jpg);
vertical-align:top;
}
.mid_rgt {
width:39px;
float:left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="hdr">
<div class="hdr_lft"><a href="index.cfm"><img src="assets/img/hdr_logo.gif" alt="Dr. Todd's Logo" width="303" height="113" border="0" /></a></div>
<div id="menucontainer">
<ul>
<li><a href="index.cfm" id="homenav">HOME</a> <img src="assets/img/hdr_menu_div.gif" alt="divider" width="1" height="16"/> </li>
<li><a href="foot-care-products.cfm" id="prodnav">PRODUCTS</a> <img src="assets/img/hdr_menu_div.gif" alt="divider" width="1" height="16"/> </li>
<li><a href="about.cfm" id="aboutnav">ABOUT US</a> <img src="assets/img/hdr_menu_div.gif" alt="divider" width="1" height="16"/> </li>
<li><a href="contact.cfm" id="contactnav">CONTACT US</a> <img src="assets/img/spc.gif" alt="spacer" width="1" height="16"/> </li>
</ul>
</div>
<div class="hdr_rgt"><img src="assets/img/hdr_feet.jpg" alt="Bare Feet" width="138" height="113" /></div>
</div>
<div class="mid_section">
<div class="mid_lft"><img src="assets/img/curve_lft.jpg" alt="Left Side Curve" width="39" height="313" /></div>
<div class="mid_center">
<div class="mid_srch_bar"><img src="assets/img/spc.gif" alt="clear spacer" width="1" height="37" /></div>
<div class="mid_body"><img src="assets/img/hiker.jpg" width="255" height="276" alt="Hiker" />relief FOR the FEET products</div>
</div>
<div class="mid_rgt"><img src="assets/img/curve_rgt.jpg" alt="Right Side Curve" width="39" height="313" /></div>
</div>
</div>
</body>
</html>