From: MG on 2 May 2010 07:44 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 2 May 2010 13:15 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 2 May 2010 13:26 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 2 May 2010 18:32 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 3 May 2010 03:31 "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
|
Next
|
Last
Pages: 1 2 Prev: Need CSS to make dynamic-height textbox Next: Gap between img and containing form in IE |