I had to make a few changes.
The page:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="maincontainer">
<div id="topsection">
<img src="images/layout/head.jpg" /><br/>
<div id="menu_wraper">
<ul id="thicktabs">
<li><a href="index.php?mod=about">About Us </a></li>
<li><a href="index.php?mod=buysell">Featured Properties </a></li>
<li><a href="index.php?mod=community_school">Community Info </a></li>
<li><a href="index.php?mod=community_info">Interactive Map</a></li>
<li><a href="index.php?mod=testimonials">Luxury Market Retport </a></li>
</ul>
</div>
</div>
<div id="contentwrapper">
Content Here
</div>
<div id="footer">
Copyright© 2005-2007 by ARTISANGROUPRE.COM. All rights reserved. Designed by <a href="http://www.pm-creative.com/" target="_blank">PM Creative</a>
</div>
</div>
</body>
</html>
The stylesheet:
Code:
/* CSS Document */
body{
margin:0;
padding:0;
line-height: 1.7em;
background-image: url(../images/layout/bg.jpg);
background-repeat: repeat-y;
background-position: center;
color: #1a1a1a;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 750px; /*Width of main container*/
margin: auto; /*Center container on page*/
}
#topsection{
height: auto; /*Height of top section*/
border-top-width: 10px;
border-top-style: solid;
border-top-color: #FFFFFF;
width: 750px;
margin: 0;
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
background: #C8FC98;
}
#footer{
clear: left;
width: 750px;
color: #663300;
text-align: center;
background-color: #c39460;
font-size: 10px;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 0;
}
#footer a{
color: #663300;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
/* Menu */
#menu_wraper {
background-image: url(../images/layout/logo_bottom.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 750px;
float: left;
}
#thicktabs{
padding: 0;
float: right;
font-weight: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}
#thicktabs li{
display: inline;
}
#thicktabs li a{
float: left; /*padding of tabs*/
text-decoration: none;
background-repeat: repeat;
background-position: top;
background-image: url(../images/layout/menu_n.jpg);
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
color: #f0f0e4;
}
#thicktabs li a#leftmostitem{ /*Extra CSS for left most menu item*/
}
#thicktabs li a#rightmostitem{ /*Extra CSS for right most menu item*/
background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/
border-right-width: 1px;
border-right-style: solid;
border-right-color: #412104;
}
#thicktabs li a:visited{
color: #f0f0e4;
}
#thicktabs li a:hover{
color: #f0f0e4;
background-image: url(../images/layout/menu_o.jpg);
background-position: top;
}
Now at looks fine in ie 5+
Wrong Position in IE but looks fine in FF, Safari...
Reply With Quote
Bookmarks