Internet explorer layout issue

**Sumbop** · 28 Feb 2010, 06: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:

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;
 
}


#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:

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>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!

**designjockey** · 28 Feb 2010, 09:35 PM

The below code will fix the gap...

body{margin:0; padding:0;}

You should look into CSS reset templates.. they help a lot.

Which IE version are you talking about?

Thread: Internet explorer layout issue

Thread Tools

Internet explorer layout issue

Similar Threads

Help! Layout Not working with Internet Explorer!

Posting Permissions