H1 heading tags Firefox vs IE

[MaxiWheat]

Hi,

I would like to expose a situation that I would like to have
informations about.

Let's suppose I have a table that looks like this :

<table cellspacing="0" cellpadding="0" border ="0">
<tr>
<td><h1>Heading Something</h1></td>
</tr>
</table>

In IE, the heading will be right at the top of the cell, with no space
over it, but in Firefox there will be a space between the top of the
cell and the heading itself. As I investigated, IE looks like to put no
margin when a heading is at the top of a cell, and Firefox puts it
anyways, anywhere.

Is there a way to control this behavior ? I mean, IE puts a margin at
the top of headings when they are in the body of a cell or elsewhere,
but not if the heading is at top of a cell. Sometimes it may be
useful...

Some of you would answer "yes but you can control the margin with CSS".
Yes I know and I do it, but if I say margin-top:0px; then it would
apply everywhere, even in the body of a text, what I may not want. But
as IE and Firefox don't have the same default behavior, I need
absolutely to specify a margin for my H1 headings. I there a way to do
it without using a class just for the case a heading is at top of a
table ?

Can someone help me to understand all this ?

Thank you

Philippe Meunier
Web Developer
http://www.cybergeneration.com

[David Dorward]

MaxiWheat wrote:

Let's suppose I have a table that looks like this :

<table cellspacing="0" cellpadding="0" border ="0">
<tr>
<td><h1>Heading Something</h1></td>
</tr>
</table>
Then I said - "My my, what a horrible abuse of table markup".
Some of you would answer "yes but you can control the margin with CSS".
Yup.
Yes I know and I do it, but if I say margin-top:0px; then it would
apply everywhere, even in the body of a text, what I may not want.

The joy of descendent, child and class selectors.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Beauregard T. Shagnasty]

MaxiWheat wrote:

Hi,

I would like to expose a situation that I would like to have
informations about.

Let's suppose I have a table that looks like this :

<table cellspacing="0" cellpadding="0" border ="0">
<tr>
<td><h1>Heading Something</h1></td>
</tr>
</table>
That does not look like tabular data to me. Why the table? What is wrong
with just:
<h1>Heading Something</h1>

http://www.cybergeneration.com

This site (first English page) has nested tables; I think I counted at
least eight deep! Wow. Your margin is the least of your problems!

--
-bts
-Warning: I brake for lawn deer

[Daniel Jung]

MaxiWheat wrote:

I have a table that looks like this :

<table cellspacing="0" cellpadding="0" border ="0">
<tr>
<td><h1>Heading Something</h1></td>
</tr>
</table> In IE, the heading will be right at the top of the cell, with no space
over it, but in Firefox there will be a space between the top of the
cell and the heading itself.
I can't reproduce that.
See http://lingo.uib.no/daniel/opera/h_in_td.jpg.
First three browser windows is your code above (added #dddddd as
background-color the TABLE). Second row is jut the heading without, no
table, added #dddddd as background-color on the tag.

Some of you would answer "yes but you can control the margin with CSS".
Yes I know and I do it,
How? Where?
but if I say margin-top:0px; then it would
apply everywhere, even in the body of a text, what I may not want.
table h1 { margin-top: 0 }

applies ONLY to h1 elements INSIDE tables.

table.someclassname h1 { margin-top: 0 }

applies ONLY to h1 elements INSIDE tables which are classified
with "someclassname".
Can someone help me to understand all this ?

Can you help me to understand why you want an h1 element INSIDE a table?
It just doesn't make sense.

- Daniel

[Gérard Talbot]

MaxiWheat wrote :

Hi,

I would like to expose a situation that I would like to have
informations about.

Let's suppose I have a table that looks like this :

<table cellspacing="0" cellpadding="0" border ="0">
<tr>
<td><h1>Heading Something</h1></td>
</tr>
</table>

I'd say you have here a document heading miserably cornered, wrapped
inside a dubious table. Since "Heading Something" has nothing to do with
tabular data, then you're misusing table here.

In IE, the heading will be right at the top of the cell, with no space
over it, but in Firefox there will be a space between the top of the
cell and the heading itself. As I investigated, IE looks like to put no
margin when a heading is at the top of a cell, and Firefox puts it
anyways, anywhere.
h1 is a block-level element by definition.

"By default, block-level elements are formatted differently than inline
elements. Generally, block-level elements begin on new lines, inline
elements do not."
HTML 4.01, section 7.5.3, Block-level and inline elements
http://www.w3.org/TR/html401/struct/...l#block-inline

Is there a way to control this behavior ?

Yes. Drop the table and just declare+use h1 like HTML suggests:

<h1>Heading Something</h1>
W3C Quality Assurance tip for webmaster:
Use <h1> for top-level heading
http://www.w3.org/QA/Tips/Use_h1_for_Title
Also:

Table-based webpage design versus CSS-based webpage design: resources
NvuSection/NvuWebDesignTips/TableVsCSSDesign.html
"Tables should not be used purely as a means to layout document content
as this may present problems when rendering to non-visual media.
Additionally, when used with graphics, these tables may force users to
scroll horizontally to view a table designed on a system with a larger
display. To minimize these problems, authors should use style sheets to
control layout rather than tables."
HTML 4.01 on Tables
http://www.w3.org/TR/html401/struct/tables.html#h-11.1
Gérard
--
remove blah to email me

[Jukka K. Korpela]

"MaxiWheat" <ma*******@gmail.com> wrote:

<td><h1>Heading Something</h1></td>
You have already been told that such an approach is most probably a bad one.
I will comment on the technical side.
In IE, the heading will be right at the top of the cell, with no space
over it, but in Firefox there will be a space between the top of the
cell and the heading itself.

Neither behavior conflicts with any specification. The IE behavior is,
somewhat astonishingly, closer to the spirit of the specifications:
neither HTML specs nor CSS specs suggest that headings should have different
margins when appearing inside a cell. Rather, the sample style sheets for
HTML in CSS specs suggest that headings have margins that do not depend on
the context. The default styling of headings has always been typographically
bad in web browsers, and the specs share the guilt with browser vendors; but
I digress.

Anyway, several block elements have different styling in many browsers when
they appear as table cell contents. Typically, there is no top margin, even
if the element otherwise has one (by browser defaults), and there might be no
bottom margin either.

Of course, this is one of the many reasons why tables should not be used for
layout: things get unnecessarily complex. Normally a table cell contains just
text, sometimes a little inline markup, and tabular data doesn't usually need
more. But if you have block elements inside a cell, it's best to set all
margins for them explicitly, e.g.
td h1 { margin: 0; }
if that's what you want.

--
Yucca, http://www.cs.tut.fi/~jkorpela/