Welcome to WebmasterWorld Guest from 54.205.20.160

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)

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



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)

WebmasterWorld Senior Member 10+ Year Member



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)

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



Win 98 IE5.0 - no probs.

GWJ

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.

Brian

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

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



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)

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



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)

10+ Year Member



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

10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month