Welcome to WebmasterWorld Guest from 54.242.83.7

Forum Moderators: incrediBILL

Message Too Old, No Replies

H1 tags with NO margin-bottom, cross browser

     
9:26 am on Aug 7, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


It so nice to finally figure something out. This was a question we wrestled with here about a year ago, and we were stumped.

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.

9:38 am on Aug 7, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2001
posts:690
votes: 0


Ted,

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

Woz

9:42 am on Aug 7, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member woz is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 13, 2000
posts:4823
votes: 0


Win 98 IE5.0 - no probs.

GWJ

11:30 am on Aug 7, 2001 (gmt 0)

Full Member

joined:June 21, 2000
posts:339
votes: 0


Looks great on a PC running Windoze 95 with NN 4.7 and I.E. 4 also.

Very nice effect.

Brian

11:41 am on Aug 7, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Here's the HEAD section:

<HEAD>
<TITLE>H Tag Test</TITLE>

<script type=text/javascript language="JavaScript">
<!--
if (document.layers)
document.write('<link rel=stylesheet href="testn4.css">')
else document.write('<link rel=stylesheet href="test.css">')
//-->
</script>

</HEAD>

If you View Source in Netscape 4.x, you will only see:

<HEAD>
<TITLE>H Tag Test</TITLE>

<LINK rel=stylesheet href="testn4.css">
</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.

12:44 pm on Aug 9, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Now I'm seeing some trouble. In Netscape 4.77, the first time I load the test page, there is a blank box overlaying the beginning of the paragraph text. Does anyone else see this?

If I reload the page, the display is fine.

1:10 pm on Aug 9, 2001 (gmt 0)

Junior Member

10+ Year Member

joined:June 19, 2001
posts:183
votes: 0


no problems in NS 4.73, if that helps
2:30 am on Aug 10, 2001 (gmt 0)

Full Member

10+ Year Member

joined:Oct 18, 2000
posts:256
votes: 0


The "view source" issue is a matter of much debate. There are advantages to both and it looks like some near-future version of Mozilla will allow you to view either the current state or the original state of the page.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members