Sumbop
28 Feb 2010, 07:11 PM
Hello all,
Its been a while. I'm having some issues with the layout of a page I'm coding. It seems to look fine in firefox and safari but when opened in internet explorer the header section of my page disappears and in older versions it gets shifted to the right hand side of the!
There is also a gap at the top of the page which I don't know how to get rid of (this is happening in all browsers).
Here's a link to the dummy page:
http://www.amberplumbers.co.uk/indexter.html
Here's the css:
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;
}
#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;
}
#tabs {
width: 961px;
height: 321px;
margin-top: 5px;
float:left;
background-color:#000;
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;
}
Here's the HTML:
<!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>Info@AmberPlumbers.co.uk </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>
Thanks in advance!
Its been a while. I'm having some issues with the layout of a page I'm coding. It seems to look fine in firefox and safari but when opened in internet explorer the header section of my page disappears and in older versions it gets shifted to the right hand side of the!
There is also a gap at the top of the page which I don't know how to get rid of (this is happening in all browsers).
Here's a link to the dummy page:
http://www.amberplumbers.co.uk/indexter.html
Here's the css:
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;
}
#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;
}
#tabs {
width: 961px;
height: 321px;
margin-top: 5px;
float:left;
background-color:#000;
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;
}
Here's the HTML:
<!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>Info@AmberPlumbers.co.uk </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>
Thanks in advance!