Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


Tweaking spacing in standard HTML

A reader writes:
Some time ago I purchased your book, Creating Cool HTML 4 Web Pages. I have gotten a lot of use out of it. However, I am now getting my feet wet on Cascading Style Sheets and have come across something I did not see answered in your book. I am hoping you can answer these two questions.

1) I use <h3></h3> headers for the headings of columns in a table. I notice Internet Explorer adds an extra blank line under the headings before continuing text but Mozilla does not. How do I eliminate the blank line following an <h3></h3> header? I would like text to follow immediately below the heading.

2) Same question for horizontal rules. I do not want a blank line below a horizontal rule; I would like text to follow it immediately. How do I get rid of this extra blank line?


Dave's Answer:
First off, a quick word from our sponsor: you might well be interested in buying the greatly updated Creating Cool Web Sites with HTML, XHTML and CSS, which adds about 95% more CSS than the edition of the book you have, among other improvements!

On to your questions, though. First off, if you're adding table column heads, why not just use something like this:

<td style='font-size:125%;font-weight:bold'>
to accomplish the exact font treatment you seek without having to hassle with the h3 tag? Try it.

Secondly, if you want to have a horizontal rule without a space following it, I'd try something like this:

<div style='border-bottom:1px solid black;margin-bottom:0px'></div>
(You might want a greater than zero pixel bottom margin in practice, though).

Thanks for your query! Good luck with your new site.


Related HTML, JavaScript and Web Site Programming articles:
✔   How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....
✔   Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...
✔   Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....
✔   How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...
✔   How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...

Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
    Enter your name: and your email addr:  









Reader Comments To Date: 5

David Binner said, on June 9, 2004 11:51 PM:

Hello, Mr. Taylor.

Thank-you for the posted reply. Hopefully, I will find time to write a review for your book as you requested.

Regarding my first question (about controlling the spacing below table column heads), you suggest to use something like this:

<td style='font-size:125%;font-weight:bold'>

I may end up taking this approach, but what I would prefer is code I can put in the document HEAD section.
Your suggestion would have me add this code to all eight column heads.
On the other hand, if I add this code to the document HEAD section, then ALL table cells are large and bold and I would have to somehow unbold the regular cells.

My goal in taking the <h3> aproach is to have concise code whose behavior is controlled by specifications given in the document HEAD section. Once the code is working, I plan to move it to an external style sheet for accessing by several pages on my website.

I am wondering (just a guess here), perhaps the line-height property is what I seek. Any other suggestions?

Once again, thanks for your assistance.

Dave Taylor said, on June 9, 2004 11:52 PM:

I may end up taking this approach, but what I would prefer is code I can put in the document HEAD section. Your suggestion would have me add this code to all eight column heads.

Ah, then this is easier. In the head section have something like:

.colhead { font-size:120%; text-align:center; font-weight: bold; }

Then in the table, everywhere you'd use a that's really a column head, do this:

<td class="colhead">content</td>

Make sense?

My goal in taking the <h3> aproach is to have concise code whose behavior is controlled by specifications given in the document HEAD section. Once the code is working, I plan to move it to an external style sheet for accessing by several pages on my website.

Again, use a CSS class:

.myh3 { font-size: 125%; font-weight: 900; margin-top: 10px; }

And then use

<div class="myh3">Header Text</div>

Within the document. See if that solves your problems!

Duncan McLachlan said, on February 11, 2005 4:57 PM:

Hello, Mr. Taylor.

I would like to change the background color of the text input field of a standard HTML form. For example, consider the followng page, with a simple Quadratric Equation Solver:

http://www.akiti.ca/Quad2Deg.html

I am presently writing a similar calculator-type webpage. However, I would like to have the BACKGROUND colors of the RESULTS fields a color other than white (to indicate to the user that these fields are different than the other fields and he should NOT try to input data to these fields).

So far, it seems that this feature is only available in certain browsers. Is this correct? Could you please let me know if I can do this, and if so, please let me know how to do it for ALL browwsers.

Your help is appreciated.


Duncan

Jes said, on March 24, 2005 1:08 PM:

Hi Dave and guests,

To stop an 'h3' or any 'h' tag from causing a line break, simply put in the css part of your 'head' the following:
H3 {display:inline;}

simple as that.

For the question on form backgrounds:
the css is simply {background:#ffa} or whatever color you want.

Oh you want it to carry to more browsers?
I am not positive but try using a doctype declaration of xhtml strict.
I have seen this code work in netscape, firefox and IE6. forget IE5 and lower, whatever OS it is for. And I am not sure about safarai. If you stick to mozilla versions and IE you should get 95%+ of your visitors.

Aloha!

Dave Taylor said, on March 25, 2005 5:14 AM:

Good stuff, Jes. Thanks for the reminder of the remarkable flexibility of CSS, at least in some browsers. :-)

Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

I do have a comment, now that you mention it!











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.