Problem with div and h1 tag of HTML

[prachi001]

Hi!

when h1 tag of HTML is nested inside div tag, in Netscape Navigator it leaves vertical space before h1 tag contents, which doesn't happen in IE. Why is it so?

example:

<div>
<h1>Contents</h1>
</div>

Thank you.

[PeejAvery]

[ moved ]

[PeejAvery]

Have you tried changing the margin and padding?

<div>
<h1 style="margin: 0px; padding: 0px;">Contents</h1>
</div>

[prachi001]

Thanks for your reply. I tried it using "margin" property of CSS and it works fine in Netscape Navigator.

Though the above solution works, I want to know why it happens in Netscape Navigator and in other browsers except IE. Where is the problem? If we do the same thing using "table" tag instead of "div" it works fine without using "margin".

Thank you

[javajawa]

Because IE has different default to everyone else? Or, sometimes, thig come out differently if your code isn't quite correct all the way through (nesting mistake, etc. etc.)

[prachi001]

According to W3C standards, there is no mistake in the code (nesting of HTML elements).

[PeejAvery]

It's not a mistake in the code, it's simply differences in web browsers. Any professional web developer/designer will tell you that the #1 problem in this industry is cross browser solutions.

Personally, I won't ever touch Netscape. It has declared its own end-of-life and therefore isn't worth the hassle. As long as what you write appears fine in IE, Firefox, and Safari for PC, as well as in Safari and Firefox for Mac, you will be okay! Those make up over 99% of the commonly used browsers.

Also, remember to always declare your doctype. This tends to be the distinguishing role in how cross browser implementation changes minimally. As long as the doctype is declared, you should need to make less revisions to your code for each specific browser.

[prachi001]

Thanks for your reply. it cleared my doubt.