the height of a td
in [CSS]
|
Prev: instructor solution manual for Introduction to Quantum Mechanics 1st edition (1995) by David J. Griffiths
Next: Inline List and No Wrap problem
From: dorayme on 6 Apr 2010 04:06 In article <slrnhrlofb.44b.spamspam(a)bowser.marioworld>, Ben C <spamspam(a)spam.eggs> wrote: > On 2010-04-06, Jeff Thies <jeff_thies(a)att.net> wrote: > > I want to do this: > > > > .all_red{ > > background-color: red; > > height: 100%; > > } > > > ><td><div class="all_red"></div></td> > ><td>content<br>that<br>gives<br>the row<br>height</td> > > > > What I find is that .all_red has no height (0, not the actual height > > of the cell), if I give the cell a fixed height, like this: > > > > td{ > > height: 100px; > > } > > > > then .all_red is 100% of 100px. > > > > I find that curious. Does 100% only apply to explicitly set heights? > > Pretty much, yes. Percentages only make sense if it's clear what they're > supposed to a percentage _of_. Is this right? Why is it not 100% of whatever the height happens to be in a user's browser (it not be clear to the author the least bit in advance)? -- dorayme
From: Ben C on 6 Apr 2010 06:12 On 2010-04-06, dorayme <dorayme(a)optusnet.com.au> wrote: > In article <slrnhrlofb.44b.spamspam(a)bowser.marioworld>, > Ben C <spamspam(a)spam.eggs> wrote: > >> On 2010-04-06, Jeff Thies <jeff_thies(a)att.net> wrote: >> > I want to do this: >> > >> > .all_red{ >> > background-color: red; >> > height: 100%; >> > } >> > >> ><td><div class="all_red"></div></td> >> ><td>content<br>that<br>gives<br>the row<br>height</td> >> > >> > What I find is that .all_red has no height (0, not the actual height >> > of the cell), if I give the cell a fixed height, like this: >> > >> > td{ >> > height: 100px; >> > } >> > >> > then .all_red is 100% of 100px. >> > >> > I find that curious. Does 100% only apply to explicitly set heights? >> >> Pretty much, yes. Percentages only make sense if it's clear what they're >> supposed to a percentage _of_. > > Is this right? Why is it not 100% of whatever the height happens > to be in a user's browser But what determines that height? Here's what the spec actually says (10.5): The percentage is calculated with respect to the height of the generated box's containing block [p. 122] . If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. Note that width is very different. There is _always_ a containing width, which ultimately derives from the viewport width. > (it not be clear to the author the least bit in advance)? (sentence understand sorry cannot)
From: Michael Stemper on 6 Apr 2010 12:35 In article <hpe45i$pa3$1(a)news.albasani.net>, Jeff Thies <jeff_thies(a)att.net> writes: >I want to do this: > >.all_red{ > background-color: red; > height: 100%; >} > ><td><div class="all_red"></div></td> I'm curious. What advantage do you get from placing a DIV inside the TD and styling the DIV, instead of just directly styling the TD? <td class="all_red"></td> -- Michael F. Stemper #include <Standard_Disclaimer> The FAQ for rec.arts.sf.written is at: http://www.geocities.com/evelynleeper/sf-written Please read it before posting.
From: Jeff Thies on 6 Apr 2010 14:08 Michael Stemper wrote: > In article <hpe45i$pa3$1(a)news.albasani.net>, Jeff Thies <jeff_thies(a)att.net> writes: > >> I want to do this: >> >> .all_red{ >> background-color: red; >> height: 100%; >> } >> >> <td><div class="all_red"></div></td> > > I'm curious. What advantage do you get from placing a DIV inside the TD > and styling the DIV, instead of just directly styling the TD? > > <td class="all_red"></td> None, if I was writing this from scratch. However this is part of a database module I often use. The cell already has a class. The way I use this is that cell's class is the field name, and the row's ID is the database table's row ID. So, the html table structure is the same as database table structure. Throw in some AJAX and I have a spreadsheet like table that can be quickly updated, in place, one cell at a time. Many uses for that. Often, you want to edit just one field (say price or status), but for many records. Jeff >
From: Jeff Thies on 6 Apr 2010 14:10
Ben C wrote: > On 2010-04-06, dorayme <dorayme(a)optusnet.com.au> wrote: >> In article <slrnhrlofb.44b.spamspam(a)bowser.marioworld>, >> Ben C <spamspam(a)spam.eggs> wrote: >> >>> On 2010-04-06, Jeff Thies <jeff_thies(a)att.net> wrote: >>>> I want to do this: >>>> >>>> .all_red{ >>>> background-color: red; >>>> height: 100%; >>>> } >>>> >>>> <td><div class="all_red"></div></td> >>>> <td>content<br>that<br>gives<br>the row<br>height</td> >>>> >>>> What I find is that .all_red has no height (0, not the actual height >>>> of the cell), if I give the cell a fixed height, like this: >>>> >>>> td{ >>>> height: 100px; >>>> } >>>> >>>> then .all_red is 100% of 100px. >>>> >>>> I find that curious. Does 100% only apply to explicitly set heights? >>> Pretty much, yes. Percentages only make sense if it's clear what they're >>> supposed to a percentage _of_. >> Is this right? Why is it not 100% of whatever the height happens >> to be in a user's browser > > But what determines that height? Here's what the spec actually says > (10.5): > > The percentage is calculated with respect to the height of the > generated box's containing block [p. 122] . If the height of the > containing block is not specified explicitly (i.e., it depends on > content height), and this element is not absolutely positioned, the > value computes to 'auto'. > Thanks, Jeff |