H1 Tags in Tables

Making them look the same in different browsers?

[tlhmh1]

I want to use <h1> tags inside tables on my website for search engine optimization purposes. Example...

<table>
<tr>
<td><h1>Widget World</h1></td>
</tr>
<tr>
<td>The best widgets on earth!</td>
</tr>
</table>

The problem is that many browsers display them differently.

When inside a table cell by itself...

1) Some broswers have no space above or below the <H1> text.
...(Example: IE on the Mac and Netscape 6 on PC)

2) Some broswers have a space below the <H1> text.
...(Example: IE 5.5 and IE 6 on a PC)

3) Some broswers have space above and below the <H1> text.
...(Example: Netscape 7 on the Mac)

How can I make them all like #1? Should I use CSS to modify the <H1> tag? Should I use CSS to modify the <TD> tag? Any help would be greatly appreciated.

Thanks!
-Tim

[pageoneresults]

> Should I use CSS to modify the <H1> tag?

h1 {
margin-top:0px;
margin-bottom:0px;
}

or

h1 {
margin:0px;
}

That second one will make all margins 0px. You'd probably use the second one.

NS4.x will still show the bottom margin. I don't use a lonely <h1> inside a <td> without any copy following it. If I had a <p> tag right after that <h1> then I would create a special <p> class that has a negative margin-top:-5px; or something to that effect for NS4.x users and place it in my NS4.x style sheet.

P.S. I think you can also use this...

h1 {
display:inline;
}

[Nick_W]

Or the shorthand...

h1 { 
  margin: 0 0 0 0; /* Top right bottom left */ 
  padding: 0; /* you can do the same with the above but I thought you might like left/right margins */ 
} 

I'm not 100% sure if the padding is needed but I think it is.... ;)

Nick

[edited by: tedster at 4:16 am (utc) on Sep. 14, 2002]
[edit reason] stop side scroll [/edit]

[Nick_W]

h1 {
display:inline;
}

Yep, a viable solution also...

Nick

[tlhmh1]

Excellent! Using the margin commands, it now works on most browsers.

However, Netscape 4.x for the PC still renders it with a space below when the H1 tag is inside a table cell.

According to a CSS compatibility chart I have, the display: inline command does not work on quite a few browsers.

Any other suggestions?

[tedster]

To get a similar look for H tags on NN4 I've resorted to a separate stylesheet. It's not a big deal - I usually need it for other styling issues anyway. I just use a quick javascript sniff to write in the stylesheet - if(document.layers). It's all you need because

1. only NN4 has document.layers
2. NN4 requires javascript to be active for stylesheets to work at all.

NN4 requires a negative top-margin for the paragraph that follows an H tag, because the browser doesn't do margin collapsing properly between some elements.