Re: Margins on block elements inside table cells?

In article <6NydnX12tJcY9TiiRVn-tg (AT) comcast (DOT) com> in
comp.infosystems.www.authoring.stylesheets, Troy Parker <no@email>
wrote:

The only thing that comes to mind is to use something like <h3
style="margin-top: 0"> in place of the first <h3>. But that seems very
dirty. Surely there must be a better way to tell Mozilla "no margin on the
first/last block elements of a table cell", i.e. "behave like IE"?

There is, and don't call me Shirley. :-)

In your style sheet:
td h3, th h3 { margin-top: 0 }

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

"Stan Brown" <the_stan_brown (AT) fastmail (DOT) fm> wrote

In your style sheet:
td h3, th h3 { margin-top: 0 }

Thanks, but this affects *all* the <h3> elements inside the cell. Note that
in my example, there's a second <h3> element in the middle. I still want the
space above that <h3>, just not the unnecessary space at the top of the cell
(or the bottom, if I were to put an <h3> or other block element there).

I'm trying to find a way to avoid having to resort to separate styles for
top/middle/bottom elements just to work around this Mozilla quirk...

Todd

"Todd Parker" <no@email> wrote:

"Stan Brown" <the_stan_brown (AT) fastmail (DOT) fm> wrote:

In your style sheet:
td h3, th h3 { margin-top: 0 }

Thanks, but this affects *all* the <h3> elements inside the cell. Note that
in my example, there's a second <h3> element in the middle. I still want the
space above that <h3>, just not the unnecessary space at the top of the cell
(or the bottom, if I were to put an <h3> or other block element there).

I'm trying to find a way to avoid having to resort to separate styles for
top/middle/bottom elements just to work around this Mozilla quirk...

The first H3 inside any cell can be selected by the following:

td h3:first-child, td h3:first-child {margin-top: 0;}

Not supported by IE, but as IE seems to be giving you the style you
want anyway (through either a bug or a different default value) that's
not a problem in this case.

In CSS3 there will be a last-child selector as well, but as that's
still some way off I wouldn't expect any browser support for the time
being.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

"Steve Pugh" <steve (AT) pugh (DOT) net> wrote

The first H3 inside any cell can be selected by the following:

td h3:first-child, td h3:first-child {margin-top: 0;}

Beautiful! That appears to be exactly what I've been searching for.

In CSS3 there will be a last-child selector as well, but as that's
still some way off I wouldn't expect any browser support for the time
being.

Okay, I can live with that. My main issue was getting stuff at the top to
line up horizontally. Extra space at the bottom isn't so noticable since my
table actually doesn't have a border.

Thanks Steve, and to everyone else who replied.

Todd