473,242 Members | 1,470 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,242 software developers and data experts.

H1 heading tags Firefox vs IE

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

Jan 13 '06 #1
5 3309
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
Jan 13 '06 #2
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
Jan 13 '06 #3
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

Jan 13 '06 #4
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
Jan 14 '06 #5
"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/
Jan 14 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

26
by: Dave Patton | last post by:
http://members.shaw.ca/davepatton/gps.html In another newsgroup(related to GPS), in regards to the above page, someone said:...
10
by: David | last post by:
Can anyone give me a quick code snippet (that is standards-based) for adding OPTION tags to a SELECT dynamically. I have no problem doing it in IE but I am kind of new to the whole standards world...
18
by: Robert Bowen | last post by:
Hello peeplez. I have an odd problem. When I put the ANSI symbol for "less than" ("<"), the word STRONG and then the ANSI symbol for "greater than" (">") in my web page, followed by some text, then...
2
by: | last post by:
Hello, I have generated an HTML version of a previously text report in our application. Looks great everything fine for viewing. Currently the heading of the report is at the top of the HTML...
5
by: Charles Law | last post by:
I have a document in the following style 1 Introduction 2 Next Heading 2.1 Sub-section Some text ... 2.2 Another Sub-section 2.2.1 Getting deeper 3 Another Major Heading...
16
by: Edward | last post by:
Hi All, I am having huge problems with a very simple dotnet framework web page (www.gbab.net/ztest3.aspx) , it does NOT render correctly under Apple's Safari. The DIV's do not align amd float as...
2
by: dennis.sprengers | last post by:
Ik ben bezig met een eigen UBB editor. Als iemand aan het typen is, zorgt CTRL-B voor een \-tag en nogmaals CTRL-B voor een \ tag. Als je eerst een selectie maakt en dan CTRL-B drukt, wordt de...
2
by: helraizer1 | last post by:
I have used Meta tags in my site: <META HTTP-EQUIV="Site-Enter" CONTENT="blendTrans(duration=3.0)"> <META HTTP-EQUIV="Site-Exit" CONTENT="blendTrans(duration=3.0)"> <META...
10
by: Thomas M. Farrelly | last post by:
hi, I have just released a javascript framework. It is at tin-tags.org. I am greateful for any comments. Thanks in advance.
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.