homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Controlling <h1> Tags
margin-bottom: -5px;

 6:28 pm on Mar 5, 2002 (gmt 0)

I'm sure this has been covered before, but at the rate that posts move to thread heaven, I thought it might be a good topic to discuss.

How are most of you controlling the appearance of your <h1> tags? I've been using an external style sheet for years and control them like this...

h1, h2, h3, h4, h5, h6{
font-family:"verdana", arial, helvetica, sans-serif;
background:none repeat;

The margin attributes are very important here as they control the space before and after the <h1> tag in most browsers (excludes NS4). I also found out through recent testing that you should have the margin-top and margin-bottom attributes in the style sheet set to at least 0px. Opera did not like my <h1> tags without the margin attributes, a little too much space above and below.



 6:57 pm on Mar 5, 2002 (gmt 0)

::shuffles feet abashedly::

Never got into using <h1> tags...

The few times I have though, I set basic CSS attributes for them, and grinned and bore the gap they left beneath the header text. Next site, I'll have to try your technique, because the spacing gets a bit too weird.


 7:45 pm on Mar 5, 2002 (gmt 0)

The spacing gaps are hard to control cross-browser because NN4 doesn't collapse margins properly between two boxes when they touch. You can get a nice look from NN4 if you browser sniff and give it a new css file (just one element to cascade in, not a biggie).

The approach I use is this:

1. h1, h2, h3, h4, h5, h6 {margin-bottom:0 em;}

2. A special class of P tag (p.follow) is created for the text that follows the H tag. p.follow {margin-top:0 em;} This works for most browsers

3. Sniff for NN4 and then cascade in a Netscape only style that gives p.follow a -1 em margin-top instead of the 0 em p.follow {margin-top:-1em;}

Now Netscape 4 will collapse the margins visually the same as the others.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
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