homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

H1 tags with NO margin-bottom, cross browser

 9:26 am on Aug 7, 2001 (gmt 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]

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)


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


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

Win 98 IE5.0 - no probs.


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

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

Very nice effect.



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

Here's the HEAD section:


<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">')


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


<LINK rel=stylesheet href="testn4.css">

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)

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)

no problems in NS 4.73, if that helps


 2:30 am on Aug 10, 2001 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved