Please, what is causing this gap?

[Nik Coughin]

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/
-=-=-=-=-=-=-=-=-=-=-=-

 

[rf]

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.

 

[Nik Coughin]

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]

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

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

 

[Spartanicus]

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.

 

[Nik Coughin]

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.

 

[rf]

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.

 

[Nik Coughin]

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.