Please, what is causing this gap?

Discussion in 'HTML' started by Nik Coughin, Dec 12, 2004.

  1. Nik Coughin

    Nik Coughin Guest

    Hi,

    Please have a look at http://www.nrkn.com/boxGap/index.html

    In IE everything will look horrible because I haven't bothered with the
    alpha hack. It doesn't matter, my problem still shows up OK.

    In Opera, Firefox and IE the layout works fine until I start resizing the
    text (in the browser, not in the code). Then a gap appears between the
    three divs.

    What is causing the gap? Any ideas? I would really like to get rid of it.

    --
    "Come to think of it, there are already a million monkeys on a million
    typewriters, and the Usenet is NOTHING like Shakespeare!" - Blair Houghton
    -=-=-=-=-=-=-=-=-=-=-=-
    http://www.nrkn.com/
    -=-=-=-=-=-=-=-=-=-=-=-
     
    Nik Coughin, Dec 12, 2004
    #1
    1. Advertising

  2. Nik Coughin

    rf Guest

    Nik Coughin wrote:

    > Please have a look at http://www.nrkn.com/boxGap/index.html
    >
    > In Opera, Firefox and IE the layout works fine until I start resizing the
    > text (in the browser, not in the code). Then a gap appears between the
    > three divs.
    >
    > What is causing the gap? Any ideas? I would really like to get rid of

    it.

    Switch borders on for all elements.
    * {border: solid 1px green;}

    It will be immediately apparent that the whitespace in the top and bottom
    bits is expanding, causing the container to expand beyond the nice
    background.

    --
    Cheers
    Richard.
     
    rf, Dec 12, 2004
    #2
    1. Advertising

  3. Nik Coughin

    Nik Coughin Guest

    rf wrote:
    > Nik Coughin wrote:
    >
    >> Please have a look at http://www.nrkn.com/boxGap/index.html
    >>
    >> In Opera, Firefox and IE the layout works fine until I start
    >> resizing the text (in the browser, not in the code). Then a gap
    >> appears between the three divs.
    >>
    >> What is causing the gap? Any ideas? I would really like to get rid
    >> of it.

    >
    > Switch borders on for all elements.
    > * {border: solid 1px green;}
    >
    > It will be immediately apparent that the whitespace in the top and
    > bottom bits is expanding, causing the container to expand beyond the
    > nice background.


    ....and that white space is caused by my formatting (the code indenting).
    Which means I have to sacrifice readability for presentation. *Sigh*.
    Thanks Richard.
     
    Nik Coughin, Dec 12, 2004
    #3
  4. Nik Coughin

    Nik Coughin Guest

    Nik Coughin wrote:
    > rf wrote:
    >> Nik Coughin wrote:
    >>
    >>> Please have a look at http://www.nrkn.com/boxGap/index.html
    >>>
    >>> In Opera, Firefox and IE the layout works fine until I start
    >>> resizing the text (in the browser, not in the code). Then a gap
    >>> appears between the three divs.
    >>>
    >>> What is causing the gap? Any ideas? I would really like to get rid
    >>> of it.

    >>
    >> Switch borders on for all elements.
    >> * {border: solid 1px green;}
    >>
    >> It will be immediately apparent that the whitespace in the top and
    >> bottom bits is expanding, causing the container to expand beyond the
    >> nice background.

    >
    > ...and that white space is caused by my formatting (the code
    > indenting). Which means I have to sacrifice readability for
    > presentation. *Sigh*. Thanks Richard.


    ....but removing all the formatting only removes enough whitespace to go a
    few zoom levels higher before it breaks, but it still breaks past a certain
    level. Where is that whitespace coming from?
     
    Nik Coughin, Dec 12, 2004
    #4
  5. Nik Coughin

    Nik Coughin Guest

    Nik Coughin wrote:
    > Nik Coughin wrote:
    >> rf wrote:
    >>> Nik Coughin wrote:
    >>>
    >>>> Please have a look at http://www.nrkn.com/boxGap/index.html
    >>>>
    >>>> In Opera, Firefox and IE the layout works fine until I start
    >>>> resizing the text (in the browser, not in the code). Then a gap
    >>>> appears between the three divs.
    >>>>
    >>>> What is causing the gap? Any ideas? I would really like to get
    >>>> rid of it.
    >>>
    >>> Switch borders on for all elements.
    >>> * {border: solid 1px green;}
    >>>
    >>> It will be immediately apparent that the whitespace in the top and
    >>> bottom bits is expanding, causing the container to expand beyond the
    >>> nice background.

    >>
    >> ...and that white space is caused by my formatting (the code
    >> indenting). Which means I have to sacrifice readability for
    >> presentation. *Sigh*. Thanks Richard.

    >
    > ...but removing all the formatting only removes enough whitespace to
    > go a few zoom levels higher before it breaks, but it still breaks
    > past a certain level. Where is that whitespace coming from?


    Sorry. All whitespace removed:

    http://www.nrkn.com/boxGap/base.html
     
    Nik Coughin, Dec 12, 2004
    #5
  6. Nik Coughin

    Spartanicus Guest

    "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:

    >Please have a look at http://www.nrkn.com/boxGap/index.html
    >
    >In IE everything will look horrible because I haven't bothered with the
    >alpha hack. It doesn't matter, my problem still shows up OK.
    >
    >In Opera, Firefox and IE the layout works fine until I start resizing the
    >text (in the browser, not in the code). Then a gap appears between the
    >three divs.
    >
    >What is causing the gap? Any ideas? I would really like to get rid of it.


    The div's contain white space, this is rendered, and enlarged when you
    zoom the text in Mozilla.

    Either remove the white space, or set font and line height to null.

    --
    Spartanicus
     
    Spartanicus, Dec 12, 2004
    #6
  7. Nik Coughin

    Nik Coughin Guest

    Spartanicus wrote:
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:
    >
    >> Please have a look at http://www.nrkn.com/boxGap/index.html
    >>
    >> In IE everything will look horrible because I haven't bothered with
    >> the alpha hack. It doesn't matter, my problem still shows up OK.
    >>
    >> In Opera, Firefox and IE the layout works fine until I start
    >> resizing the text (in the browser, not in the code). Then a gap
    >> appears between the three divs.
    >>
    >> What is causing the gap? Any ideas? I would really like to get rid
    >> of it.

    >
    > The div's contain white space, this is rendered, and enlarged when you
    > zoom the text in Mozilla.
    >
    > Either remove the white space, or set font and line height to null.


    The second option worked a treat, thank you very much.
     
    Nik Coughin, Dec 12, 2004
    #7
  8. Nik Coughin

    rf Guest

    Nik Coughin wrote:

    > >>> Please have a look at http://www.nrkn.com/boxGap/index.html


    > > ...and that white space is caused by my formatting (the code
    > > indenting). Which means I have to sacrifice readability for
    > > presentation. *Sigh*. Thanks Richard.


    No. Don't even think about "fixing" the font size, or making it smaller. Fix
    what is causing that whitespace.

    > ...but removing all the formatting only removes enough whitespace to go a
    > few zoom levels higher before it breaks, but it still breaks past a

    certain
    > level. Where is that whitespace coming from?


    line-height:

    That spacer image is inline content. Inline content lives in a generated
    "line box". The height of this box is line-height:, by default around 1.5em
    or something. So, as the font size gets larger so does the height of this
    line box. Eventually lineheight is bigger than the size of that div - white
    space.

    Since this is only a visual artifact, that is there is no actual content
    inside those divs, it is in order to specify line-height: 0; for the north
    and south divs. This will, in effect, make the height of those divs the same
    as the image.

    --
    Cheers
    Richard.
     
    rf, Dec 12, 2004
    #8
  9. Nik Coughin

    Nik Coughin Guest

    rf wrote:
    > Nik Coughin wrote:
    >
    >>>>> Please have a look at http://www.nrkn.com/boxGap/index.html

    >
    >>> ...and that white space is caused by my formatting (the code
    >>> indenting). Which means I have to sacrifice readability for
    >>> presentation. *Sigh*. Thanks Richard.

    >
    > No. Don't even think about "fixing" the font size, or making it
    > smaller. Fix what is causing that whitespace.


    Oh no, certainly not, I meant removing the whitespace by removing my
    indentation.
     
    Nik Coughin, Dec 12, 2004
    #9
    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. Kate
    Replies:
    4
    Views:
    665
  2. Kate
    Replies:
    1
    Views:
    467
    Oli Filth
    Feb 19, 2005
  3. Jeff

    Please Help, gap problem

    Jeff, Jun 16, 2005, in forum: HTML
    Replies:
    2
    Views:
    501
    Neredbojias
    Jun 20, 2005
  4. chlori

    Gap in IE, no gap in FF

    chlori, Jan 19, 2006, in forum: HTML
    Replies:
    1
    Views:
    481
    kchayka
    Jan 19, 2006
  5. KK
    Replies:
    2
    Views:
    711
    Big Brian
    Oct 14, 2003
Loading...

Share This Page