Menu
Hey all,
I’m having an issue with my header in all versions of IE. The header section either doesn’t appear or its all the way on the right hand side of the screen.
For the life of me I can’t figure out why this is happening. If anyone can help me out I’ll be eternally grateful!
and here’s the CSS:
[CODE]html, body{
padding:0;
font-family:arial, verdana, sans-serif;
background-color:#ff9600;
background-image: url(‘images/background.gif’);
background-repeat: repeat-x
}
#maincontent {
width:985px;
margin-right: auto;
margin-left: auto;
height: 655px;
position: relative;
background-color: #fac578;
}
#wrapper {
width: 961px;
margin-right: auto;
margin-left: auto;
}
/*————Head————*/
#header {
height: 123px;
width: 961px;
background-image: url(‘images/head_back.gif’);
background-repeat: repeat-x;
position: absolute;
clear: both
}
#logo {
width: 190px;
height: 121px;
background-image: url(‘images/logo.png’);
background-repeat: none;
float: left
}
#menu {
width: 410px;
height:121px;
float: left;
}
#navigation li {
display:inline;
margin:0;
padding:0;
outline:none;
}
#navigation {
/*Width of left column*/
float: right;
margin-top:40px;
margin-left: 49px;
}
#navigation a {
float:left;
margin:0;
padding:0 0 0 0px;
text-decoration:none;
outline:none;
}
ul {
display: inline;
}
#bottom_nav {
margin-left: 44px;
}
#info {
width: 359px;
height: 121px;
float: left;
color: #5c5956;
font-size: 22px;
display: block;
margin-top: 10px;
}
#info ul{
list-style: none;
}
#pad {
padding-left: 8px;
}
#info P:second-line {
color: #000;
left: 86px;
}
/*————Head_end————*/
#flash {
width: 961px;
height: 204px;
margin-top: 125px;
float:left;
background-color:#000;
posiion: relative;
}
#tabs {
width: 961px;
height: 321px;
margin-top: 5px;
float:left;
background-color:#000;
posiion: relative;
background-image: url(‘images/tab_back.gif’);
background-repeat: repeat-x
}
#tabs li {
display:inline;
margin-right:10px;
padding:0;
outline:none;
}
#tab{
list-style: none;
margin-top: 25px;
margin-left: -4px;
}
#footer li {
display:inline;
outline:none;
}
#footer {
margin-left: 341px;
margin-top: 6px;
outline:none;
}
a:link, a:visited {
text-decoration:none;
color:#ffffff;
}
a img { border: none; }
a{
outline:none;
}
And here’s the the HTML:
[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” lang=”en” xml:lang=”en”>
<head>
<title>Amber Plumbing</title>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” />
</head>
<body>
<div id=”maincontent”>
<div id=”wrapper”>
<div id=”header”>
<div id=”logo”>
</div>
<div id=”menu”>
<div id=”navigation”>
<ul>
<li><a href=”index.html”><img src=”images/home.png”> </a></li>
<li><a href=”index.html”><img src=”images/domestic.png”> </a></li>
<li><a href=”index.html”><img src=”images/commercial.png”> </a></li>
</ul>
<div id=”bottom_nav”>
<ul>
<li><a href=”index.html”><img src=”images/about_us.png”> </a></li>
<li><a href=”index.html”><img src=”images/contact_us.png”> </a></li>
</ul>
</div>
</div>
</div>
<div id=”info”>
<ul>
<div style=”text-indent: 20px; position: relative;”><li>Call now: 0208 000 0000</li></div>
<div style=”text-indent: 86px; position: relative;”><li> Email now</li> </div>
<li>[email protected] </li>
</ul>
</div>
</div>
<div id=”flash”>
</div>
<div id=”tabs”>
<div id=”tab”>
<ul id=”nav”>
<li><a href=”index.html”><img src=”images/services.jpg”></a></li>
<li><a href=”index.html”><img src=”images/areas_covered.jpg”></a></li>
<li><a href=”index.html”><img src=”images/guarantee.jpg”></a></li>
<li><a href=”index.html”><img src=”images/prevention.jpg”></a></li>
</ul>
</div>
<div id=”footer”>
<ul>
<li><img src=”images/gas_safe.png”></li>
<li><img src=”images/gas_safe.png”></li>
<li><img src=”images/gas_safe.png”></li>
</ul>
</div>
</div>
</div>
</div>
</body>
Cheers
Nick
Edit by admin: no contact info permitted on the forum, thank you