Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Please, what is causing this gap?

Reply
Thread Tools

Please, what is causing this gap?

 
 
Nik Coughin
Guest
Posts: n/a
 
      12-12-2004
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/
-=-=-=-=-=-=-=-=-=-=-=-


 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      12-12-2004
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.


 
Reply With Quote
 
 
 
 
Nik Coughin
Guest
Posts: n/a
 
      12-12-2004
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.


 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      12-12-2004
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?



 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      12-12-2004
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


 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      12-12-2004
"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
 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      12-12-2004
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.


 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      12-12-2004
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.


 
Reply With Quote
 
Nik Coughin
Guest
Posts: n/a
 
      12-12-2004
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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
.Net Seems to be Causing DLL Memory Leak? =?Utf-8?B?SWxhbiBPc3Npbg==?= ASP .Net 1 03-09-2005 05:38 PM
Firefox causing REAL player to crash Axl Firefox 0 02-27-2005 10:49 PM
Neighbors have wireless..maybe causing problems for my wirless con =?Utf-8?B?Q3Jld2UgRGF2ZQ==?= Wireless Networking 3 01-03-2005 09:19 PM
WI-FI PCMCIA card causing Vaio GRX laptop to crash a boot =?Utf-8?B?QXJyYW4=?= Wireless Networking 2 10-23-2004 10:52 PM
Unknown Trojan causing wireless connection to fail Headtheball Wireless Networking 1 10-03-2004 03:02 PM



Advertisments