vertically spaced div's

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

The following html file is not displayed properly on Safari:

The divs are spaced vertically, but they should not. In IE, it looks
good. What am I doing wrong?

(Also strange is the hover effect on the headings. If you move the
 mouse over a heading, it changes its color like a link. In Safari, not
in IE. Why is that?)

Can you give me an advice how to do it right? I'm not experienced with
CSS and so it would be very kind if you could help me here.

Kind Regards,

Re: vertically spaced div's

Quoted text here. Click to load it

Or Opera or Firefox...

Quoted text here. Click to load it

Assuming that IE is correct. ;-)
IE is in fact applying your styles incorrectly.

The margins on the <h1> will collapse with the margins on the <div>
that contains the <h1>. Hence the margins of the <h1> will appear
outside of the <div> thus creating the spacing you see.

See for the details.

How to prevent it?
Set either padding or border on the <div> to a non-zero value.
Or, set the margins of the <h1> to zero and set padding instead (not
always an option but will work in your case).

Quoted text here. Click to load it

<h3><a name="Wie-es-funktioniert">Wie es funktioniert</a></h3>

a:hover { background:transparent; color: Red; }

You have an <a> element and you have a style for a:hover, why
shouldn't it be applied? Again IE is showing its failings - it only
supports :hover on links.


"My theories appal you, my heresies outrage you,
 I never answer letters and you don't like my tie."  - The Doctor

Re: vertically spaced div's

Quoted text here. Click to load it
Quoted text here. Click to load it

There's a few errors that need looking at. Running the page through gives a list. It's always a good starting point to
have html and css that validates. Also there's whitespace above the first
lines of code, which if I remember correctly can cause problems also.


Re: vertically spaced div's

thanks a lot! I think I understand the problems now...
...and I will also get a different browser


Site Timeline