Site should start at top but doesn't

SuperSriver · 07-28-2011, 12:15 AM

Hi there,
in the very early stage of designing a site I have tested the existing code in several browser to avoid late and nasty surprises, but there is already one:

The top element should start at the very top of the page (No border, padding, margin or whatever kind of space). In IE it does, which is fine, in ALL other browsers i t doesn't :there is a black space on top of the top element which I can't get rid of.
I am used to the situation that all broesers work fine and IE is messing up, but here it seems to be the other way round.

What have I coded incorrectly? Can anybody help to stick the page to to top edge of the browser? I am grateful for any comments.

It looks like this:

http://www.learn-german-thoroughly.de/newsite.php

The css is attached. It is very simple; nearly naked, but already causing problems. Please help if you can.

Thanks a lot!

Sammy12 · 07-28-2011, 12:19 AM

take display: inline-block out from * on line 4 of css

SuperSriver · 07-28-2011, 12:31 AM

Wow, that was not only a quick response - it was also a very good one!
Thanks!
Have just tried it, and now it looks as it should in all browsers. Brilliant.

Could you also give me a quick hint why this is the case; I (being beginner) don't fully understand it. That would be splendid!

Anyway, thanks a lot for the help

Sammy12 · 07-28-2011, 12:38 AM

because * is setting to all elements, including the <head>, therefore you set the <head> to display: inline-block. Now it has a height on your page. You don't need inline-block to all elements and I would actually advice you to not use it in the future, since I believe the browser support is not safe to use it freely

SuperSriver · 07-28-2011, 12:45 AM

Very good point; I wasn't aware that * includes the header as well and was therefore stupidly wondering what this 'something' at the top might be.... now I know.
Thanks again; I'll see if I can proceed without display: inline block.
Good night.

Sammy12 · 07-28-2011, 12:57 AM

forgot to post this in my previous post

<head> is by default display: none;, changing it to inline-block gives it a space on the page

Lerura · 07-28-2011, 01:11 AM

Quote:

Originally Posted by SuperSriver

Very good point; I wasn't aware that * includes the header as well and was therefore stupidly wondering what this 'something' at the top might be.... now I know.
Thanks again; I'll see if I can proceed without display: inline block.
Good night.

you could do:

Code:

body * {display:inline-block;}