Google Answers Logo
View Question
 
Q: Removing blank line from under H1 tag ( Answered 4 out of 5 stars,   8 Comments )
Question  
Subject: Removing blank line from under H1 tag
Category: Computers > Programming
Asked by: jhabley-ga
List Price: $3.00		 Posted: 17 Jan 2004 10:12 PST
Expires: 16 Feb 2004 10:12 PST
Question ID: 297419 
Is there any way to prevent H1 tags (or any other H tag, for that
matter) from adding a blank line underneath?  Ideally, I'd like to
accomplish this through CSS. I still want to be able to use the H1 tag
(i.e. and not substitute it with a SPAN or similar fix) -- that way,
search engines will consider the tag contents more important.

So far, I've tried "line-height: 1%" in my CSS and while that helps,
it still adds a blank-line after.
Answer  
Subject: Re: Removing blank line from under H1 tag
Answered By: aditya2k-ga on 17 Jan 2004 10:25 PST
Rated:4 out of 5 stars		  
Hi jhabley,

Good day and thanks for your question. The line you're looking for is 

line-height: 0pt;

I tried it out and it worked fine.

Thank you for using this service and have a nice day.

Regards,
aditya2k
Request for Answer Clarification by jhabley-ga on 17 Jan 2004 10:47 PST 
Hi there- I've just tried it (in IE6) and it looks the same as my
line-height: 1% tweak. The blank space below is smaller, but still
quite visible. What I'm after is NO extra space in the line break.  In
other words, it looks like this right now:

     THIS IS HEADING 3

     And this is the text that follows. And this is the text 
     that follows. And this is the text that follows. And this 
     is the text that follows. And this is the text that follows. 

and what I'm after is this:

     THIS IS HEADING 3
     And this is the text that follows. And this is the text 
     that follows. And this is the text that follows. And this 
     is the text that follows. And this is the text that follows.
Request for Answer Clarification by jhabley-ga on 17 Jan 2004 12:36 PST 
aditya2k, if you aren't able to answer this, could you please remove
your answer so that someone else could answer it?
Request for Answer Clarification by jhabley-ga on 18 Jan 2004 11:39 PST 
Aditya2k,

I've waited a full day and have not heard back from you. Please let me
know if you can give me a working answer (your answer does not work)
or remove your answer, or I will rate it low and get Google to refund
it.
Clarification of Answer by aditya2k-ga on 18 Jan 2004 15:19 PST 
Hi,

This is a working answer.

I've uploaded a screen shot at http://venus.walagata.com/w/aditya2k/test.jpg

The code snippet is as follows:
<html>

<head>
 
<style> h1{line-height: 0%;} </style>
</head>
<body>
<br><br><br>
<h1>Testing Testing Testing</h1>
Testing line 2222222222222222222222



</body>

</html>
jhabley-ga rated this answer:4 out of 5 stars 







Comments
 



Subject:
Re: Removing blank line from under H1 tag


From:
hedgie-ga
on
17 Jan 2004 18:58 PST		
 


The solution is

 not to use H1 tag

use   <B><Font size=+2> <Center>    your heading </center> </Font> </B>

instead.
 
Subject:
Re: Removing blank line from under H1 tag


From:
jhabley-ga
on
18 Jan 2004 11:38 PST		
 


It's not the solution I'm after. As mentioned in my question, I need
to use a Heading tag in order to have certain content stand out as
more important in search engines.
 
Subject:
Re: Removing blank line from under H1 tag


From:
richardc123-ga
on
23 May 2004 08:48 PDT		
 


h1{line-height: 0%;} didn't work for me because i needed a box around
my heading. But i've used this on ie6 and ns7.
h1 {
	font-family: "Arial";
	font-size: large;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	padding: 3px 6px;
	margin: 8px 0px 8px 0px;
}
 
Subject:
Re: Removing blank line from under H1 tag


From:
tim_rogovets-ga
on
13 Aug 2004 07:02 PDT		
 


I've faced the same problem once with that stupid browser.

You need to use either:
<h1 nowrap>BlahBlah</h1>  -   all versions of IE & NN

or:

h1 {
white-space:nowrap;
}
The last one is supported by 5.5+ versions of IE and NN 4+
 
Subject:
Re: Removing blank line from under H1 tag


From:
domylene-ga
on
24 Aug 2004 06:17 PDT		
 


jhabley-ga,

I've gone through the same issue as you were into and probably that
you now have the answer since January but for those who don't, take
note that using line-height: 0pt; in style or CSS is not sufficient.
Using only the Line-Height property will compress the text to the top
of the line and it's not readable. You need to add the vertical-align
property set to "middle" as for example:

.clsSectionText
{
	font-weight: bold;
	font-size: 10pt;
	line-height: 0pt;
	vertical-align:middle;
}.

This really works fine.
 
Subject:
Re: Removing blank line from under H1 tag


From:
domylene-ga
on
25 Aug 2004 08:54 PDT		
 


A bug is generated when doing such thing: It displays fine but when
you scroll up and down, the re-painting seems to have problems
re-painting a line-height of 0pt and you the text will sometimes be
cut in 2 halves.

There is a workaround though:

1. Keep line-height:0pt; and change the Vertical-Align to "top"
instead of "middle". Then you must apply the class NOT to the H1
element but to a DIV element contained into the H1 element, around the
text to say.

CSS would look like:

.clsSectionText
{
	font-weight: bold;
	font-family: Helvetica;
	font-size: 9pt;
	line-height: 0pt;
	vertical-align:top;
}


The ASP line would be:


<h1 tabindex="1"><div class="clsSectionText"><b>Query Location:</b></div></h1>

Garanty to work!
 
Subject:
Re: Removing blank line from under H1 tag


From:
zeman-ga
on
30 Sep 2004 19:58 PDT		
 


I tried all of these and they don't work that well in IE6.

Here's the simplest cross broswer solution I've found.

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 28px;
	font-weight: bold;
	color: #66CC00;
 	padding: 0;
	margin: 0;
	padding-bottom: 2px;
  }
 
Subject:
Re: Removing blank line from under H1 tag


From:
mightye-ga
on
09 Feb 2005 05:41 PST		
 


The following CSS code will remove blank spaces appearing after your
header elements.
h1,h2,h3,h4,h5,h6{
    margin-bottom: 0px;
    padding-bottom: 0px;
}

It's incorrect to set line-height to 0px; what you're telling the
browser is that the height you want your text to consume vertically is
0 pixels (despite the fact that it draws the normal size).  If your
heading went to a second line, both lines would appear on top of each
other.  I suspect this proposed solution will have wildly different
results depending on the browser you're looking at it through.

You also want to avoid use of the <font> tags, not only is this
depreciated syntax, but disabled users rely on standard HTML elements
such as <h1> to determine sections within the content, just like we
can use the size of the text to do so.  Likewise, search engines take
advantage of your validly formatted code to more accurately place
users on your site.



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