Forum Moderators: open
The Goal:
Making H1 tags that don't put extra margin between the heading and the following paragraph copy.
The Problem:
Netscape 4.x (as is often the case, right?)
The Answer:
Netscape 4.x gives the desired result if the H1 tag has a zero margin-bottom and the following P tag has a NEGATIVE margin-top. The CSS file looks like this:
h1 {margin-bottom:0em}
p.nogap {margin-top:-1em}
Yes, it works in Netscape 4.x, but with these style declarations, all the other browsers will OVERLAP the paragraph and the heading. So I used a simple test -- if (document.layers) -- to serve Netscape 4.x its own stylesheet, with the styles you see above. Every other browser gets:
h1 {margin-bottom:0em}
p.nogap {margin-top:0em}
I have tested this on Win98 with Explorer 6.0, Netscape 4.77 and 6.1, and Opera 5.12 (with all 5 spoofs). I would appreciate reports from any Mac tests.
H1 test page [pages.prodigy.net]
Aside:
I noticed something else weird with Netscape 4.77. If you View Source, you get the source code with the JavaScript sniffer already executed. All the other browsers, including Netscape 6 give the unexecuted Javascript.
Looks fine in NN4.7 on a mac.
MAC IE5 - might just be my imagination but it looks like there is spacing still :( would need more other opinons though
Very nice effect.
Brian
<HEAD> <script type=text/javascript language="JavaScript"> </HEAD>
<TITLE>H Tag Test</TITLE>
<!--
if (document.layers)
document.write('<link rel=stylesheet href="testn4.css">')
else document.write('<link rel=stylesheet href="test.css">')
//-->
</script>
If you View Source in Netscape 4.x, you will only see:
<HEAD> <LINK rel=stylesheet href="testn4.css">
<TITLE>H Tag Test</TITLE>
</HEAD>
In other words, the javascript is already run, and only the results are shown.
I'm very excited about this. I much prefer the no-gap look for headings, but I would not give up H1 tags just to get this appearance.
If I reload the page, the display is fine.
