vertically spaced div's

Discussion in 'HTML' started by Karsten, Apr 14, 2005.

  1. Karsten

    Karsten Guest

    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
    Karsten, Apr 14, 2005
    #1
    1. Advertising

  2. Karsten

    Steve Pugh Guest

    "Karsten" <> wrote:

    >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.
    Or, set the margins of the <h1> to zero and set padding instead (not
    always an option but will work in your case).

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

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

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Apr 14, 2005
    #2
    1. Advertising

  3. "Karsten" <> wrote in message
    news:...
    > Hello!

    <snip>
    > 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
    Duncan Greenhill, Apr 14, 2005
    #3
  4. Karsten

    Karsten Guest

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

    Regards,
    Karsten.
    Karsten, Apr 15, 2005
    #4
  5. "Karsten" <> wrote in message
    news:...
    > 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
    Duncan Greenhill, Apr 16, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. homer

    div Wont Vertically Align

    homer, Jan 26, 2005, in forum: HTML
    Replies:
    6
    Views:
    4,628
    homer
    Jan 28, 2005
  2. Guybrush Threepwood
    Replies:
    1
    Views:
    462
    Mitja Trampus
    Dec 14, 2005
  3. Marc Bradshaw
    Replies:
    18
    Views:
    769
    Marc Bradshaw
    Sep 17, 2008
  4. AAaron123
    Replies:
    1
    Views:
    4,978
  5. Replies:
    4
    Views:
    110
Loading...

Share This Page