http://dev.edubnetwork.com/scottscooling/
uname scotts
pword coolingfans
Looks fine in Safari and Firefox, in IE everything shifts around a bit.. but the biggest issue is the buttons dont line up with the welcome_box background image as they should.
the source
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-US">
<head>
<title>Scotts Cooling Fans
</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
<meta name="keywords" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="boxtab-blue">
<ul>
<li class="first" ><a href="?section=fans"><span>Cooling Fans</span></a></li>
<li ><a href="?section=misc"><span>Miscellaneous Parts</span></a></li>
<li ><a href="?section=company_profile"><span>Company Profile</span></a></li>
<li class="last" ><a href="?section=contact"><span>Contact</span></a></li>
</ul>
</div>
</div>
<div id="colmask">
<div id="homecontent">
<div id="welcomebox">
<div id="welcometop"></div>
<div id="welcomebottom">
<ul class="cssmenu">
<li class="volt6"><a href="?section=fans&page=6v" title="6 Volt"><span class="displace">6 Volt</span></a></li>
<li class="volt12"><a href="?section=fans&page=12v" title="12 Volt"><span class="displace">12 Volt</span></a></li>
<li class="volt24"><a href="?section=fans&page=24v" title="24 Volt"><span class="displace">24 Volt</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="?section=home">Home</a></li>
<li><a href="?section=fans">Products</a></li>
<li><a href="?section=company_profile">About</a></li>
<li><a href="?section=contact">Contact</a></li>
<li><a href="?section=contact&page=order_form">Order</a></li>
</ul>
<p>Scotts Cooling Fans | <strong>1 (800) 272 - FANS (3267)</strong> | <a href="mailto:contact@scottscoolingfans.com">contact@scottscoolingfans.com</a></p>
</div>
</div>
</body>
</html>
the CSS
Code:
/* */
/* General styles */
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
min-width:1000px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
background-color: #FF0;
/*background-image: url(images/bg3.png);*/
background-attachment: fixed;
background-repeat: repeat-x;
background-position: left top;
font-family: Arial, Helvetica, sans-serif;
}
a {
color:#369;
}
a:hover {
color:#ff0000;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
/* container style and settings */
#container {
width: 100%;
margin: 0px auto;
float: none;
position: relative;
}
/* Header styles */
#header {
clear: both;
width: 100%;
margin-top: -15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(images/headerlogo4.png);
background-repeat: no-repeat;
background-position: center top;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/*no quirks mode divs*/
#colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
background:#FFF; /*left column bg color */
}
#colmid {
float:left;
width:200%;
position:relative;
left:200px;
border-left: 1px dashed #bbb;
min-height: 400px;
background-color: #FFF; /* Centre column background colour */
background-image: url(images/contentbg.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
#colright {
float:left;
width:100%;
position:relative;
left:50%;
margin-left:-400px;
background:#FFF; /* Right column background colour */
border-left: 1px dashed #bbb;
min-height: 400px;
}
#col1wrap {
float:right;
width:50%;
position:relative;
right:100%;
}
#col1pad {
margin:0 15px 0 415px;
overflow:hidden;
}
#col1 {
width:100%;
overflow:hidden;
padding-bottom: 10px;
}
#col2 {
float:left;
width:180px;
position:relative;
margin-left:-50%;
left:215px;
overflow:hidden;
}
#col3 {
float:left;
width:170px;
position:relative;
left:15px;
overflow:hidden;
}
/*Left-Column Styles*/
#leftnav {
margin:0 auto;
}
/* Footer styles */
#footer a:hover {
color:#fff;
text-decoration:none;
}
#footer {
clear:both;
float:left;
width:100%;
background-image: url(images/footerbg.png);
background-repeat: repeat-x;
background-position: top;
}
#footer p {
margin:0;
text-align: center;
color: #FFF;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#footer ul {
list-style: none;
padding: 0;
position: relative;
text-align: center;
}
#footer li {
margin: 0;
padding: 10px;
display: inline;
list-style-type: none;
}
/* NEW TAB STYLE*/
/* -------------------------------------------------- */
/* boxtab-blue */
/* -------------------------------------------------- */
#boxtab-blue {
padding-top: 175px; /* header size / distance from top */
background: url(images/tabbg6.png) bottom repeat-x;
width:100%;
overflow:hidden;
font-family:Verdana, Geneva, sans-serif;
position: relative;
}
#boxtab-blue ul {
float:left;
margin:0;
padding:0;
list-style:none;
position:relative;
left:50%;
text-align:center;
}
#boxtab-blue ul li {
display:block;
float:left;
list-style:none;
margin:20px 0 0 0;
padding:0;
position:relative;
right:50%;
}
#boxtab-blue ul li a {
display:block;
float:left;
margin:0 1px;
padding:5px 10px;
background:#fff;
text-decoration:none;
color:#000;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
position:relative;
bottom:1px;
}
#boxtab-blue ul li a:hover {
background:#369;
color:#fff;
}
#boxtab-blue ul li.active {
margin-top:10px;
}
#boxtab-blue ul li.active a,
#boxtab-blue ul li.active a:hover {
position:relative;
bottom:0;
padding:10px;
background:#fff;
color:#000;
font-weight:bold;
}
/* homepage styles */
/* homepage styles */
#colmask #homecontent {
background-color: #FF0;
height: 430px;
width: auto;
}
#colmask #homecontent img{
margin-top: -8px;
padding: 0;
}
/*
* CSS ROLLOVER SETUP
*/
ul.cssmenu {
list-style: none;
padding: 0px;
margin-left: 33px;
}
.displace {
position: absolute;
left: -5000px;
}
ul.cssmenu li {
float: left;
}
ul.cssmenu li a {
display: block;
width: 245px;
height: 238px;
background: url('images/home_sprite.png');
}
/*
* Normal Links
*/
ul.cssmenu li.volt6 a {
background-position: 0 0;
}
ul.cssmenu li.volt12 a {
background-position: -245px 0;
}
ul.cssmenu li.volt24 a {
background-position: -490px 0;
}
/*
* Hover Links
*/
ul.cssmenu li.volt6 a:hover {
background-position: 0 -238px;
}
ul.cssmenu li.volt12 a:hover {
background-position: -245px -238px;
}
ul.cssmenu li.volt24 a:hover {
background-position: -490px -238px;
}
/*
* Clicked Links
*/
ul.cssmenu li.volt6 a:active {
background-position: 0 -476px;
}
ul.cssmenu li.volt12 a:active {
background-position: -245px -476px;
}
ul.cssmenu li.volt24 a:active {
background-position: -490px -476px;
}
#welcomebox {
background-image: url(images/welcome_box2.png);
background-repeat: no-repeat;
height: 430px;
width: 800px;
margin: 0px auto;
}
#welcomebottom {
margin-top: -14px;
height: 282px;
width: 800px;
}
#welcometop {
height: 148px;
width: 800px;
}
and as a side note, but less important... any suggestion on cleaning up the code a bit?
Before you post, read our: 
how can i fix alignment problems with IE?
