From: MG on
On this website:
http://www.blighty.co.za/
there is a menubar inside a containing div (id="NavBar").

The NavBar has this formatting:
#NavBar {border:1px dotted red;}

The dotted red line appears to have zero height and is above the menubar. I
expected the menubar to be inside the red dotted line. It isn't, and I don't
understand why not. Could someone please explain why not.

Thanks
MG



From: Chris Beall on
MG wrote:
> On this website:
> http://www.blighty.co.za/
> there is a menubar inside a containing div (id="NavBar").
>
> The NavBar has this formatting:
> #NavBar {border:1px dotted red;}
>
> The dotted red line appears to have zero height and is above the menubar. I
> expected the menubar to be inside the red dotted line. It isn't, and I don't
> understand why not. Could someone please explain why not.
>
> Thanks
> MG

MG,

Looking at this with the Firefox DOM Inspector, I see that both the
NavBar <div> and the MainMenu <ul> have a computed height of 0. As a
result, the red border surrounds an area with a height of 0.

Although the MainMenu <li>s (which do have a non-zero height) are
contained within the <ul>, they do not contribute to its computed height
because they are floated. See the last sentence in the CSS
specification in section
http://www.w3.org/TR/CSS21/visudet.html#normal-block

Before you attempt to 'fix' this (which I'm not sure is possible), you
may want to address two other characteristics of the page that are
likely to interact with any proposed fix.
- The top logo and content area both have a fixed width of 700px. As
a result, the user will see a horizontal scroll bar if the browser
window is narrower than that value. Once that has occurred, the browser
will lay things out according to that fixed width, so your navigation
<li>s, although individually floated, will never 'stack'. This defeats
the most likely reason for floating them in the first place.
- Each <a> has a fixed width of 100px. This makes no allowance for
the fact that the user may alter the font size (which you have wisely
left unspecified). If the user increases the font size, the navigation
links trip all over each other. You might try width: 7em; instead.

Chris Beall
From: Ben C on
On 2010-05-02, Chris Beall <Chris_Beall(a)prodigy.net> wrote:
> MG wrote:
>> On this website:
>> http://www.blighty.co.za/
>> there is a menubar inside a containing div (id="NavBar").
>>
>> The NavBar has this formatting:
>> #NavBar {border:1px dotted red;}
>>
>> The dotted red line appears to have zero height and is above the menubar. I
>> expected the menubar to be inside the red dotted line. It isn't, and I don't
>> understand why not. Could someone please explain why not.
>>
>> Thanks
>> MG
>
> MG,
>
> Looking at this with the Firefox DOM Inspector, I see that both the
> NavBar <div> and the MainMenu <ul> have a computed height of 0. As a
> result, the red border surrounds an area with a height of 0.

I know Firebug calls that "computed style", but in the terminology of
the CSS spec, they have a _used_ height of 0, and a _computed_ height of
"auto".

The computed value is the result of applying the cascade, the used value
is the actual size you end up with after applying all the rules for
calculating widths and heights (10.3, 10.6, etc.).

This wasn't made clear in CSS 2. It is clear in CSS 2.1. Unfortunately
the DOM specification of getComputedStyle refers to the unclear CSS2
(and what browsers return from that method seems to vary quite a bit
even between releases of the same browser).

> Although the MainMenu <li>s (which do have a non-zero height) are
> contained within the <ul>, they do not contribute to its computed height
> because they are floated. See the last sentence in the CSS
> specification in section
> http://www.w3.org/TR/CSS21/visudet.html#normal-block
>
> Before you attempt to 'fix' this (which I'm not sure is possible)

Easy to fix, just add overflow: hidden to #navBar to make it a block
formatting context.
From: dorayme on
In article <hrjojm$mq7$1(a)news.eternal-september.org>,
"MG" <nospam(a)nospam.com> wrote:

> On this website:
> http://www.blighty.co.za/
> there is a menubar inside a containing div (id="NavBar").
>
> The NavBar has this formatting:
> #NavBar {border:1px dotted red;}
>
> The dotted red line appears to have zero height and is above the menubar. I
> expected the menubar to be inside the red dotted line. It isn't, and I don't
> understand why not. Could someone please explain why not.
>

At length?

<http://netweaver.com.au/floatHouse/>

--
dorayme
From: MG on

"MG" <nospam(a)nospam.com> wrote in message
news:hrjojm$mq7$1(a)news.eternal-september.org...
> On this website:
> http://www.blighty.co.za/
> there is a menubar inside a containing div (id="NavBar").
>
> The NavBar has this formatting:
> #NavBar {border:1px dotted red;}
>
> The dotted red line appears to have zero height and is above the menubar.
> I expected the menubar to be inside the red dotted line. It isn't, and I
> don't understand why not. Could someone please explain why not.
>
> Thanks
> MG

Thanks Chris, Ben and dorayme.

An excellent article, dorayme. I haven't finished reading yet, but will do
so.

MG