H1 tag acting weird in IE6.

[deronsizemore]

Ok, the site again that I'm working with (for the millionth time it seem...I know!) is www.kentuckygolfing.com


On the homepage I've got two <h1> tags for the "featured course" and "featured article" sections. They have the blue background. FF is great, but IE6 the top h1 tag (featured course) is reacting differently than bottom one (featured article). It's cutting off the top portion of the blue background right above the text and it's really annoying the crap out of me.

Anyone see where this problem lies?

[KLB]

I don't know what the problem is, but technically speaking there should be only one <h1> per page. In this case I'd probably create an <H1> that was hidden via an off page CSS instruction that stated "Kentucky Golfing" (above the logo) and then use <h2> tags for the featured headings. If you are queezy about a hidden <h1> then use a tiny <h1> with white text placed in the left side of the very top blue bar. This would help improve the accessiblity AND the SEO of the page.

[deronsizemore]

I don't know what the problem is, but technically speaking there should be only one <h1> per page. In this case I'd probably create an <H1> that was hidden via an off page CSS instruction that stated "Kentucky Golfing" (above the logo) and then use <h2> tags for the featured headings. If you are queezy about a hidden <h1> then use a tiny <h1> with white text placed in the left side of the very top blue bar. This would help improve the accessiblity AND the SEO of the page.

Oh, I didn't realize about their only being one per page. I've always been confused on the heading tags for some reason...and I know right now they are all over the place on my site. I'll fix that tonight. Thanks

[KelliShaver]

That's an odd CSS bug alright. At first, I thought the logo was overlapping and cutting it off, but I see you've got a good 10px between the logo and the heading.

h1 {
  font-size: 14px; 
  background: #3080cb;
  height: 17px;
  width: 470px;
  text-indent: 5px;
  margin: 0 0 5px 0;
  color: #fff;
  padding: 0;
}

Ok, a couple of things. Generally speaking, you shouldn't use pixels as a unit for specifying font sizes, because it creates accessibility issues when the end user tries to resize your text. Use points or EM instead. Second, why not get rid of the height definition all together and give it a 2-3px top and bottom padding instead? That should solve your problem and pretty well look identical.

If, on the other hand, you do leave the heading at a fixed height, then you also need to make the line-height identical if you want the text to peroperly align vertically, and again, use something other than pixels to prevent resizing issues.

As for the heading tags, it might help to think of it like an outline....

H1 - main topic of the page
H2 - sub-topics or sections
H3 - further sections/sub-topics within your H2 tags

Depending on how many "levels" deep I need to go with my content, I'll then usually go on to use H# (whatever's left) as headings for main sections of the site navigation, etc. Not sure if that's ncessarily best practice, though.

[deronsizemore]

That's an odd CSS bug alright. At first, I thought the logo was overlapping and cutting it off, but I see you've got a good 10px between the logo and the heading.

h1 {
  font-size: 14px; 
  background: #3080cb;
  height: 17px;
  width: 470px;
  text-indent: 5px;
  margin: 0 0 5px 0;
  color: #fff;
  padding: 0;
}

Ok, a couple of things. Generally speaking, you shouldn't use pixels as a unit for specifying font sizes, because it creates accessibility issues when the end user tries to resize your text. Use points or EM instead. Second, why not get rid of the height definition all together and give it a 2-3px top and bottom padding instead? That should solve your problem and pretty well look identical.

If, on the other hand, you do leave the heading at a fixed height, then you also need to make the line-height identical if you want the text to peroperly align vertically, and again, use something other than pixels to prevent resizing issues.

As for the heading tags, it might help to think of it like an outline....

H1 - main topic of the page
H2 - sub-topics or sections
H3 - further sections/sub-topics within your H2 tags

Depending on how many "levels" deep I need to go with my content, I'll then usually go on to use H# (whatever's left) as headings for main sections of the site navigation, etc. Not sure if that's ncessarily best practice, though.

Thanks Kelli. It does look better although not identical. I don't know could be going on. At first, like you I thought it was the image overlapping, but I ruled that out and then just started banging my head against the wall with it. It would be different if it was doing some complex menu or something, to not look the same in IE, but a simply heading tag? Figures. lol.

As for the font sizes in EM's go...I started down that road initially with the site and then switched after I was about to go insaine trying to figure out the numbers. Seemed like I would run into the problem up haveing say a div with 1 em font size and then a div inside that div which I set to 1 em font size, but it's not the same size as the other 1 em because in the inner div, it's actually 1 em of 1em so it's smaller and so on...my font sizes were all over the place. Same reason I scrapped the liquid layout originally, it was everywhere. I'd love to do alot of these things but it seems even following tutorials I get lost!

[KLB]

I know it is one of those accessiblity no no's, but I normally use PX instead of EM for font sizes. My philosphy is that if the text needs to be increased then everything else needs to be increased as well so that the text will still fit and flow correctly (like Opera does). When working with table free layouts using two units of measure (EM for text and PX for everything else) is a recipe for layout disaster and I really believe it is better to stick to one unit of measure.

If Firefox and MSIE follow Opera's lead on page zooming, the PX vs EM debate will no longer be an issue and rummor is that maybe Firefox2 and/or MSIE7 are following Opera's lead on this issue.

In regards to how to use Hx tags, Kelli is spot on. Think of H1 as the trunk of a tree (there can be only one), H2 headers branch off of the trunk, H3 headers branch off of H2 headers, H4 headers branch off of H3, etc.

[deronsizemore]

I know it is one of those accessiblity no no's, but I normally use PX instead of EM for font sizes. My philosphy is that if the text needs to be increased then everything else needs to be increased as well so that the text will still fit and flow correctly (like Opera does). When working with table free layouts using two units of measure (EM for text and PX for everything else) is a recipe for layout disaster and I really believe it is better to stick to one unit of measure.

If Firefox and MSIE follow Opera's lead on page zooming, the PX vs EM debate will no longer be an issue and rummor is that maybe Firefox2 and/or MSIE7 are following Opera's lead on this issue.

In regards to how to use Hx tags, Kelli is spot on. Think of H1 as the trunk of a tree (there can be only one), H2 headers branch off of the trunk, H3 headers branch off of H2 headers, H4 headers branch off of H3, etc.

Cool! Thanks for the advice. Looks like I've got my work cut out for my cleaning up my html on this site, but I'm going to go ahead and start before it gets to out of control.

Is their a limit to what an Hx tag can go up to? I mean can you have an H10 tag?

My problem with that right now is that like on the homepage I've got H3 tags a lot of places for the headings of the smaller columns (ex: Recent Pictures). and then I've got H4 tags on elements on other pages of the site that are styled exactly the same just with more margin/padding. I can't simply use an H3 in all places on the site because the homepage h3's will look different than X page's h3 because they need a slightly different style, so I gave them h4's even though they are more or less styled the same (as far as font size, color, border-bottom, etc.)

I could get around that by adding another div and then styling the h3's on all other pages by using #div h3 { } but I didn't want to create a lot of extra code and nested divs either. So what should I do here?

[Johnny Gulag]

It only goes to h6.

I usually do something like:

h1, h2, h3, h4, h5, h6 {
  properties: values; /* -- that are going to apply to all headings ---*/
}
h1 {
  font-size: 200%; /* --- based on the 81.25% font size set in the body --- */
}
h2 {
  font-size: 180%;
}
h3 {
  font-size: 160%;
}
... and so on...

Then I add the properties and values for each heading as needed ie. margin, padding, colors and so on...

[deronsizemore]

Looks like a good idea! Thanks Ben.

[AmbulanceBlues]

I was wondering about this myself today. If I have a front page or leading page in a category with several articles in it, should the titles of those articles be H1 or H2? The xhtml/css book I read said ideally your page title (usually domain.com) should be the only H1. But that doesn't seem to jive with what I've learned about SEO. So what's up?

[KLB]

On some sites I make the site title an image with alt attribute and then use H1 for the page title working down from there. On other sites I will make the site title an H1 and the page title an H2. It all depends on how big the site is and how important the site title is from an SEO standpoint.