Page Header Style

[ironjiant]

I have built a site using the Education Theme here: ConstructionPlus.com

I have a webfont that is in the h1 tag (the red bar header with the white font") but the bottom descenders of the font are being cut off in IE 8.

I have not been able to discover why. I thought it was a style issue in H1 or .entry-title but I cannot find it.

thanks!

-Jim

http://www.constructionplus.com

[ironjiant]

http://www.constructionplus.com

[Debra Scott]

I think you may have some part of the css above open somewhere because if you add ' to the front of the font family

font-family: 'P22FLLWTerracotta-Regular;

it renders properly in IE8 and Chrome

---

need help with your business or personal website? Contact me at Fat Cat Designs

[ironjiant]

Thanks Debra, but unfortunately it is still cutting off the descenders of the header font in IE 8 for PC.
-Jim

[Debra Scott]

yes you have added quotes to the front and back. If you take away one of those quotes it works as expected. This as I said previously could be because there is an open quote further up the stylesheet somewhere.

---

need help with your business or personal website? Contact me at Fat Cat Designs

[ironjiant]

No luck Debra. Maybe you are seeing the default font instead of the webfont? see image below of what the font should look like (in red box) ... but IE8 it is still cutting the descenders off below the baseline.

<br />

[Debra Scott]

yes that is what I was seeing also. Just an idea. What about styling the default style with what you want and eliminating the style from the green and see if that works.

---

need help with your business or personal website? Contact me at Fat Cat Designs

[ironjiant]

Thank you for your patience. Please see screenshot below. This is how this font is showing up in IE 8.0.6 regardless where the quotes are placed.

[ironjiant]

I've turned Caching plugins off and cache cleared to confirm.

[Debra Scott]

did you try this?

What about styling the default style with what you want and eliminating the style from the green and see if that works.

---

need help with your business or personal website? Contact me at Fat Cat Designs

[Debra Scott]

this is out of left field but since you have your font set up as a class try this

.education-green h1.P22FLLWTerracotta-Regular {

}
.education-green h1{

font-weight: bold;
font-style: normal;
font-size:44px;
margin: 0 0 10px;
background: #98002f;
border: 1px solid #ccc;
padding: 0px 105px 20px 2px;
margin:-20px;
padding-top: 0px;
padding-left: 15px;
padding-bottom: 20px;
border-left-width: 0px;
border-top-width: 0px;
color: #fff;
}

---

need help with your business or personal website? Contact me at Fat Cat Designs

[ironjiant]

I will try that, thanks. I'll clean up that mess of margins and padding I've got there as well 🙂
-Jim

[Author]

Posts