By Ylan on

I'm currently working on a theme for my future homepage. I'm creating it as a sub-theme of Zen.

While testing my theme Internet Explorer 7 I noticed it renders some annoying additional space above my actual site. Upon further investigation I discovered this space (about 20px) is also present in Firefox/Opera. However, in these browers the space appears under my site. You can only notice this by resizing the browser window, leaving no more than 10px between the bottom of the site (the page

) and the bottom of the browser window (the scroll bar appears).

I searched for this mysterious space using Firebug, but I can't really find the cause of the problem in the CSS code. It actually shows that the space is outside the body element (which has padding:0; margin:0).

Here is the link to my test site.

Suggestions on how to solve this problem are appreciated.

⋅ Categories: Drupal 5.x, Drupal 6.x

Comments

francort’s picture

francort commented

That is because of #header( at least for IE7 ) and its child.
If you're not using it, erase it from your theme.
If you're using it, hide it when you're not using it.
Anyway , i think you can solve it by CSS but how to do it depends on the use that you're given to it

Ylan’s picture

Ylan commented

I'm not planning to use the #header. I'ld like to know how to solve it by CSS.

Thank you very much for your reply.

Edit: I have now removed the #header from page.tpl.php, that fixes the problem with IE. There is still some space under the page in Firefox. I found out this was because of the empty #footer.

francort’s picture

francort commented

Well, in this specific case erase the div was the best thing to do.
To do it by CSS, depends on the style that the object has.
I think in this specific case can be something like

#header{
     visibility: hidden;
}

and maybe, if the child is making the space too, then add to CSS:

#header *{
     visibility: hidden;
}

Anyway, IE is always an annoying browser thus may be that you'll need something else like change "height" or "line-height" property.

Ylan’s picture

Ylan commented

Thanks again, francort!

I guess I just leave it like it is now (without the #header div).