vertically spaced div's

[Karsten]

Hello!

The following html file is not displayed properly on Safari:

http://userpage.fu-berlin.de/~kweinert/viki_conv.html

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,
Karsten

 

[Steve Pugh]

The following html file is not displayed properly on Safari:

Or Opera or Firefox...

http://userpage.fu-berlin.de/~kweinert/viki_conv.html

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

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 http://www.w3.org/TR/CSS21/box.html#x25 for the details.

How to prevent it?
Set either padding or border on the <div> to a non-zero value.

(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?)

<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.

Steve

 

[Duncan Greenhill]

Hello!

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,
Karsten

Karsten,
There's a few errors that need looking at. Running the page through
http://validator.w3.org/ 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.

Regards,
Duncan

 

[Karsten]

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

Regards,
Karsten.

 

[Duncan Greenhill]

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

Firefox would be a good choice
Duncan