I have enclosed a screenshot of a webpage that I created. Can you see the extra space above the header image? There is a space like this all around ie on all four sides. What can be done to prevent this? I am giving my code below: I have given a minimum height of 150 px as my header property as the size of my header image is 1024 x 150 pixels. Am I doing anything wrong here? Can I give a width of around 2500px to my image so that the image spreads wide and extends upto the right of the screen in case of a wider monitor/browser window?
/* 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 #000;
border-right:1px solid #000;
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) left no-repeat;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
color: #000000;
margin-left:-34%;
margin-right:-33.6%;
position:relative;
min-height:150px;
}
* 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, 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;
}
It’s impossible to say since you omitted half of the important stuff: the markup and content! The CSS is rather useless unless we can see what it applies to.
My guess is that what you are seeing is the defatul top margin of one of the first elements, like an <h1>.
I am sorry, I didn’t realise my newbie error. I am giving my full code below: The space is not just above the header image but on all four sides. It must be something very basic but I am not able to locate it.
<!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" />
<style type="text/css">
<meta name="description" content="jppp UK Guide Higher Studies" />
<meta name="keywords" content="UK guide higher studies ucas register apply clearing" />
/* 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 #000;
border-right:1px solid #000;
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 #cccccc;
border-bottom:1px solid #cccccc;
color: #000000;
margin-left:-34%;
margin-right:-33.6%;
position:relative;
min-height:150px;
}
* 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, 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 -->
<p>Have you just finished school and are you looking to do your undergraduate studies in UK? </p>
<p>Anybody who wants to go for an undergraduate degree in UK needs to go through the UCAS (Universites and College Admissions Service) application process.UCAS is the organisation responsible for managing applications to higher education courses in UK.
This is how it works.</p>
<p>You need to complete the UCAS application form in which you can apply to 5 universities for the same or different courses (4 in the case of Medical and Veterinary applications), One cannot apply to more than 5 universities. An international student can directly apply to some of the universities though, if the universities allow it. Each university has its own entry requirements. In order to register at UCAS, visit the link, Register/Apply on the on the left hand navigation bar </p>
<P>The form is then submitted to UCAS who pass on the information to the relevant universities that you have applied to</p>
<p>UCAS wil then send you an acknowledgement slip with your UCAS number and password, which you should preserve carefully as you will need them to track the course of your application.</p>
<p>The individual universities will contact UCAS with their decisions and these will be passed on to you.Most of them will be conditional offers which will get confirmed when your results come out and you meet their requirements.</p>
<p>The last decision will be accompanied by a Statement of Decisions card and you will have to use this to let UCAS know which offers you wish to accept. Also, you will see an online link trigger to accept/decline once you have your last offer. There will be a last date for accepting or declining your offer.</p>
<p>You are allowed to hold two offers: a 'firm offer' and an 'insurance offer'. Normally, for your insurance choice, you should choose a university with a lower grade requirement than the university that you have chosen as your firm choice. Any other offer must be rejected.</p>
<p>Once your A-level/IB/CBSE/ICSE results come out, your firm offer will be confirmed if you have met their grade requirement. If not, and you have the grades for the insurance offer, that will be confirmed. If you don't quite make the grades, you may still get accepted. If not, you will be entered into 'clearing'. Full details of this can be had on the clearing link to your left.
<p>UCAS not only helps with the admission process, it also helps the students to make the right choices about higher education and guides parents as well. This page just gives a quick insight into the admission process to a univerity in UK. For more details, visit the UCAS website.</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 </p>
</div>
</body>
</html>
An obvious error is that you have put two <meta/> tags inside your <style> element. That’s not allowed!
A good rule is that you should always make sure your markup is valid (using the W3C validator) before you attempt any other form of trouble-shooting – including looking for presentational problems. With invalid markup anything can happen.
Normally, setting margin:0 and padding:0 for the html and body elements, like you have done, should be enough to remove all spacing around the page. But the erroneous markup tags inside the style sheet may throw the parser off.
