Google Answers Logo
View Question
 
Q: CSS: Eliminating the extra vertical space after an H1 tag (nested table) ( Answered 5 out of 5 stars,   1 Comment )
Question  
Subject: CSS: Eliminating the extra vertical space after an H1 tag (nested table)
Category: Computers > Internet
Asked by: respree-ga
List Price: $5.00
Posted: 15 Jan 2003 06:12 PST
Expires: 14 Feb 2003 06:12 PST
Question ID: 142958
I wish to eliminate the extra space that appears after an H1 tag and
place 4 images 'directly' below it (in tables).  Please follow the
link below for an illustration of what I am trying to do.
 
http://www.respree.com/posters/h1-2.html 
 
Please 'view source' to see CCS syntax. 
 
Solution should work with all browsers and platforms. 
 
Thanks in advance for your help.
Answer  
Subject: Re: CSS: Eliminating the extra vertical space after an H1 tag (nested table)
Answered By: stuartwoozle-ga on 15 Jan 2003 09:39 PST
Rated:5 out of 5 stars
 
Hello there respree,

Gosh this is an annoying problem, isn't it? I also spent quite a long
time fiddling around trying to work out what was going on. It turns
out that this is a browser-specific problem - the web browser Opera,
for example, displays both your examples in exactly the same way as
each other. However there is a way to get Internet Explorer (and
recent versions of Netscape) to behave in the way that you want.

The extra tag you need in your CSS syntax is:
margin-bottom: 0

So for example:
h1 {  font-family: Verdana; font-size: 8pt; font-weight: normal;
text-transform: none; vertical-align: bottom; color: #000000;
margin-bottom: 0 }

margin-bottom, according to the W3 CSS specification, applies to all
elements and allows you to set the bottom margin of any element,
including <H1> etc. By default, Internet Explorer 'helpfully' assumes
that you want a bottom margin on your <H1> tags, but using the syntax
above allows you to turn this off.

For more detailed discussion of this issue, I would refer you to a
Usenet discussion on this issue from 2000. A shortened link to this on
Google Groups is below:
http://tinyurl.com/4hd2

I hope this is of some help to you - good luck with your web project!

Best wishes,
stuartwoozle.

--------

USEFUL LINKS

W3 CSS specification:
http://www.w3.org/TR/REC-CSS1

In order to find the Usenet posting discussed, I searched on Google
Groups (groups.google.com) for the terms:
h1 Internet Explorer blank line
... which gives the following result link:
http://groups.google.com/groups?num=100&hl=en&lr=&ie=UTF-8&oe=utf-8&q=h1+Internet+Explorer+blank+line&btnG=Google+Search
respree-ga rated this answer:5 out of 5 stars
Thanks very much for the fiddling.  Your solution worked wonderfully.

Comments  
Subject: Re: CSS: Eliminating the extra vertical space after an H1 tag (nested table)
From: stuartwoozle-ga on 16 Jan 2003 10:16 PST
 
Glad to have been of help, respree!

Best wishes,
stuartwoozle.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  


Google Home - Answers FAQ - Terms of Service - Privacy Policy