«

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