I am attaching screenshots of the header image of my site, as viewed in my localhost and the IE and firefox browsers.
You will see that there is a space covering the bottom of the header image when the site is viewed in IE or Firefox. I think it is the body extending over the header, as indicated by the margin line of the left and right columns which are extending upwards. Why is this happening? How is it that everything is fine when the site is viewed on the localhost?
Given below is the code of my index page.
<!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>
<title>Higher Education - UK</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="jppp UK Guide Higher Studies" />
<meta name="keywords" content="UK guide higher studies ucas register apply clearing" />
<style type="text/css">
/* 3 col fluid layout CSS Document */
/* mac hide\\*/
html, body {
height:100%;
padding:0;
margin:0;
}
/* end hide*/
body {
background:#fff;
color: #000;
}
#outer {
margin:0 20%;
background:#fff;
border-left:1px solid #000000;
border-right:1px solid #000000;
color: #000000;
position:relative;
min-height:100%;
z-index:2;
}
* html #outer {
height:100%;
} /*IE treats height as min-height anyway*/
#inner {
width:100%;/*needed to fix ies bad handling of widths with percentages*/
}
#header {
background: url(images/ukheader.gif) center no-repeat;
border-top:1px solid #000;
border-bottom:1px solid #000;
color: #000000;
margin-left:-34%;
margin-right:-33.6%;
margin-bottom:-3px;
position:relative;
min-height:150px;
margin-bottom:-3px;
}
* html #header {
height:1px;
}
#left {
position:relative;/*ie needs this to show float */
width:32.5%;
float:left;
margin-left:-32.5%;/*must be same as width */
}
#right {
position:relative;/*ie needs this to show float */
width:32%;
float:right;
margin-right:-32%;/*must be same as width */
margin-left:1px;
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #406700;
color: #ffffff;
text-align:center;
margin-top:-52px;/* drag footer back into page*/
position:relative;
z-index:3;
}
* html #footer {/*only ie gets this style*/
\\height:52px;/* for ie5 */
he\\ight:50px;/* for ie6 */
}
#clearfooter {
clear:both;
height:52px;
}/*needed to make room for footer*/
h1, h2, p {
margin:0 0 .5em;
padding:0 10px;
}
/* mac hide\\*/
* html #centrecontent {
height:1%;
}/* combat IE's 3 pixel jog */
/* end hide*/
/* safari and opera initial 100% height fix */
html >body #minHeight {
float:left;
width:0px;
height:100%;
margin-bottom:-52px;
}
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="inner">
<div id="header">
<p> </p>
</div>
<div id="left">
<p> </p><p> </p>
<p><a href='https://apply2.ucas.com/appreg2010/SecurityServlet' target='_new'>Register/Apply</a></p>
<p><a href='http://www.ucas.ac.uk/students/coursesearch/' target='_new'>Course Search</a></p>
<p><a href='https://track.ucas.com/ucastrack/Login.jsp' target='_new'>Track</a></p>
<p><a href='http://www.thecompleteuniversityguide.co.uk/single.htm?ipg=6736' target='_new'>Clearing</a></p>
<p><a href='http://www.ucas.ac.uk/' target='_new'>UCAS</a></p>
</div>
<div id="right">
<p> </p>
</div>
<div id="centrecontent">
<!--centre content goes here -->
<h2>An insight into the UK admission process</h2>
<p>Have you just finished school and are you looking to do your undergraduate studies in UK? </p>
<p>Rest of the content.Rest of the contentRest of the contentRest of the contentRest of the contentRest of the contentRest of the contentRest of the contentRest of the
contentRest of the contentRest of the contentRest of the contentRest of the contentRest of the content</p>
</div>
<div id="clearfooter"></div>
<!-- to clear footer -->
</div>
</div>
<!-- end outer div -->
<div id="footer">
<p>Site created by jppp - All rights reserved -
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</div>
</body>
</html>
(It is ok to post links when it’s a question about debugging the code. However remember that whatever you post will be visible to search engines.)