Remove white space at top of page between header and main content seen with some browsers.

Question

Hi, seem to have a inconsistent problem with one of my pages.

In some IE browsers it displays nearly a whole screen of blank white space between the header and the main content, strangely enough on my pc using both firefox and ie the page displays correctly however on some other pc's it shows the blank space.

http://kiwiradio.blakjak.net/wxradar.php

Would really appreciate some help with this please

Answer 1

I viewed the URL: http://kiwiradio.blakjak.net/wxradar.php, in IE 8.0, It is perfect, there is no space. In case if you get issues. There are few things may go wrong here.

1. You place two DIV's side by side and the width of the parent div is fixed size which is less than the total size of the two divs placed side by side. In this case the second div moves down and if the height of the first div is set to fill the whole page, you can see it blank.

2. The header DIV/Table's height is mistakenly set to fill the height of the page and the content is not filling the whole DIV/Table etc.

Find out which browser makes the problem and see the url: http://www.quirksmode.org/css/contents.html for any compatibility issues.

I dont think setting margin and padding will help as you say the space is for the whole page.

Answer 2

It's clearly your sidebar. I removed it and the problem went away. Try narrowing down further until you find the culprit.

Use IE tester to dramatically help with testing:

http://www.my-debugbar.com/wiki/IETester/HomePage

Good Luck

Answer 3

In case you have not found what the problem is - the problem is with your "Rain Radar and Maps" heading - you use tag which is not widely used because the tag istelf is badly designed. If you don't want to change this, the fastest and easiest solution is to add height for the "Rain Radar and Maps" center tag.

Answer 4

Ok, I downloaded and installed Microsoft Expression 3 Superpreview so that I could see the page opened in both IE6 and IE8 side by side which made finding the culprit script easy.

It turned out to be the CSS script that comes with the slideshow script that was causing the display problems, with it removed everything appears to be displaying as I want it to now with ealier versions of IE.

Thanks for your help.

<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input,  div#show4 table input {
outline-style:none;
}
</style>

<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->

Answer 5

CSS Solution:

* { padding: 0; margin: 0; }

Good luck.

Answer 6

Do you use UTF-8 with BOM? I used it some times ago and I got a similar problem. If so, change the coding to UTF-8 without BOM.

Answer 7

some people set by default: * {padding:0px;margin:0px;}

at least it helps to set everything yourself.