Help Styling Heading Tags

[Surefire Mechanical]

Hello,

I am new here, and this is my first post. I am no expert...not even close! I'm starting an HVAC company, and I am making my own website, simply because the money to hire someone else does not exist. So, that being said: please excuse any ignorant questions I might ask! There's my disclaimer. Thanks in advance for your help!

 

OK, so I've read a couple books on this, and I am doing my best to keep semantics in mind, as the company's internet presence moving forward is important to me. One thing I'm wondering is how to get rid of the excessive space below heading tags <h2> , <h3> etc. I have tried setting the bottom margins and paddings to 0, and have tried things like {page-break-after: avoid;}

 

The answer's probably right in front of my face! Any way, you can view the page I'm working on at http://www.surefireny.com

 

The space doesn't bother me below the <h1> heading of "SUREFIRE Heating Services," but it's a bit much after <h2> and <h3>

 

Thanks, and if you happen to see that I'm kicking my own @ss in any other ways, please advise.

[davej]

I guess you mean the margins? Try...

h2{margin:3px 5px;}

My opinion is that your page design is too wide. Not everyone maximizes their browser window. Anything over 1200px is getting overly wide. What about the iPhone user?

[Surefire Mechanical]

Hey,

Thanks for your reply. Like I said, setting the margins to zero in the style sheet had no effect. Neither did changing the padding or trying to avoid page breaks after the headings. This is nothing major, it's just a bit annoying, and I know there has to be a way to get the paragraph text (or whatever other content may be right underneath a heading) to butt right up to the bottom of it. It seems like, by default, it adds a page break at the height of the heading text below the heading, and then probably one above the paragraph at the height of the paragraph text. Just seems excessive.

 

Thanks, I will look into that width issue as well. When I check it on my phone it automatically fits the width of my screen, so I thought all would be well. I have a droid, however, and a fairly large one at that (Samsung Note) so I will need to check it on an iPhone, I suppose. Reformatting it to the width you suggest should be easy enough. Thanks, and if you have any other ideas on the heading thing, I'm all ears.

[davej]

You misspelled "display" in the css and you didn't clear the default styles. Try adding...

*{margin:0;padding:0;}

[Surefire Mechanical]

You got it! Setting the default margin and padding (*) did the trick. Strange I was led to believe that changing these values for the heading or paragraph tags would override default settings from applying to them (in case you didn't want to style everything that way). I went that route because I was ok with the margin for <h1> but I suppose adding a page break there will restore the margin if I need it.

 

Either way, this will be a huge improvement, that empty space was driving me a bit nuts! Many thanks for your help!