I seriously need help with H1, H2 and Netscape!!! 3

[budha1]

Hello,
I'm new at CSS, so I'm not sure if there is some way to fix my problem. Every time I include headings with a colored background in my site, the the text of the heading is cut off in Netscape. It's almost as if the vertical height of the heading is cutoff, so all that you see is the top of the letters and a small line as a background. I have tried using both percentages and em's to define the size of the heading, but that doesn't seem to affect the problem. Does it have something to do with how I define the headings' padding or margins?

I would appreciated any suggestions.

Thank you!!!

 

[SPYDERIX]

Hi,

Personally I never use any of heading tags. I just create classes for specific things, and set the font, color, face, and underline, bold, etc and then just use <SPAN> and include the class where needed. It is quite pointless to use all 6 heading tags if you are just going to over-ride them with CSS anyway. And unless you have a page with hundreds of line of text all using the various heading tags then you aren't really adding file size by specifying a class with a dew <span> tags.

An example:
.heading {font-family: Verdana; font-size: 16px; color: #007700; text-decoration: none; background-color: #000000;}

<SPAN CLASS=&quot;heading&quot;>HEADING TEXT</SPAN>

Hope this helps you out a bit!

http://www.spyderix-designz.com

 

[budha1]

I've been using the headings for accessibility reasons. A supppose that I could just name a class &quot;.h1&quot; or &quot;h2&quot; so that individuals using screen readers know the difference in emphasis between the headings and the content. Any idea if this meets accessibility requirements?

Thanks for your help!

 

[SPYDERIX]

Hi,

If you really want to use the <H> tags, then by all means go ahead and do that. You can use CSS to pre-define a tag's attributes then for every tag that shows up, it is always the same and you don't have to put in CLASS=&quot;&quot; To do that simply do the following in your stylesheet:

H1 {font-family: Verdana; color: #000000; font-size: 16px;}
H2 {font-family: Verdana; color: #000000; font-size: 14px;}
H3 {font-family: Verdana; color: #000000; font-size: 12px;}
H4 {font-family: Verdana; color: #000000; font-size: 10px;}
H5 {font-family: Verdana; color: #000000; font-size: 8px;}
H6 {font-family: Verdana; color: #000000; font-size: 6px;}

Then in your HTML just by putting in an <H1> it will automatically do the settings for H1 above for ALL H1's without you needing to say <H1 CLASS=&quot;etc&quot;> and the same goes for each of the other tags.

Does that help you out?

http://www.spyderix-designz.com

 

[petey]

Hi Budha1,

I applaud you for taking accessibility into consideration! These days designers are so focused on appearance and layout that they're completely unaware of the underlying issues that deliver the web's real value: structured content. This trend needs to turn around before the web can reach its full potential.

Sure, you can replace 80% of tags with <span> and use CSS to cause them to mimic the appearance of structural tags like <h1>, but you dishonor those browsing with PDAs, assistive technologies, and non-CSS browsers, all of which rely on important structural elements like <h1> and ignore CSS.

petey

http://www.drpeterjones.com/

 

[Yohon]

To go a step further and honor people's setting and preferences, you may want to consider going away from a static point size in your style setting. Setting an H1, for example, to 16px prevents the user from being able to change the overall text size of the document. Consider using a percentage instead:

... font-size: 135% ...

This allows the page to better meet the user's desired way of viewing pages.

Just a thought,
randy

 

[Bananas]

Excellent comments, petey.

http://www.therealperth.com

Joe Bananas' guide to Perth, Scotland

http://www.fawltytowers.pwp.blueyonder.co.uk

Bananas' tribute to Fawlty Towers!

 

[budha1]

Hello,
Sorry it took me so long to reply. You're never going to believe this, but my office closed down for two weeks and I took a vacation from the computer.

I have been using percentages to define my H1, H2, etc. and that is where I run into the problem. When I define my headings this way and include a background color as part of the definition, the headings appear cut off in Netscape. The bottom of the text is cut off and all that you see is the top of the text and a thin, horizontal line in the background.

Any suggestions?

 

[unisysguru]

I have done this and do not have a problem. Let us see your code.

Here is mine.

<html>
<head>
<meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot;>
<title>Test CSS</title>
</head>
<style type=&quot;text/css&quot;>
h1 {font-family: Verdana; color: #0000ff; font-size: 135%; text-align: center}
</style>
<body>
<h1>Test CSS Page</h1>
</body>
</html>

Bill Pendleton