Forum Moderators: not2easy
These divs use large font sizes, logo: 82px & 46px; the tagline: 28px.
In the bottom div in the logo div on the left, and the tagline div on the right, the descenders (the dangling lower parts of g, y, p, etc.) get chopped off.
For the tagline div on the right, I was able to fix it by a positive value for margin-bottom.
On the left, the top div inside the logo div isn't a problem even if I put descenders in there.
The other div below it, which is closest to the next div below the header div, chops the descenders no matter what I've tried.
I have played with line-height, margin, padding, vertical-align, and height. I've changed the logo divs to <p>'s. I've removed the links around the text. None of this helps.
Placing a background on the divs shows that there is room in the div for the descenders. The css and html validate perfectly. This occurs in Opera, Netscape, IE, and Foxfire, so it's not a browser quirk.
Reducing the font size does work, but that messes up the logo.
I'm stumped. This is probably embarrassingly simple. Any idea of what might be going on and how to fix it?
If it would help, I'll clean up the css and post it.
There may be a standard size for the content box and Book Antiqua exceeds the standard.
There is also some interaction with the CSS or HTML on the page, because a simple test of font sizes does not show this to be a problem.
I'd still be interested in knowing if anyone else has seen this or fixed it.
haven't seen this can you post the header div and all it's contents (floated/stacked divs etc..), HTML and CSS? or does that not recreate the problem on it's own?
Suzy
While trying to get this cleaned up to show you the code, I decided to keep stripping code until it became clear where the problem is.
Surprise! It seems to be the font itself.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Descender: Book Antiqua</title>
<link rel="stylesheet" type="text/css" href="css/testDescenders.css" /></head>
<body>
<div id="link">
<a href="/index.html">Building</a>
</div>
<p>
<a href="/index.html">Building</a>
</p>
<div id="notlink">
Building
</div>
<p>
Building
</p>
<span class="notblock">Building</span>
</body>
</html>
external CSS stylesheet:
.notblock,
p,
#notlink,
p a,
#link a{
font-family: "Book Antiqua";
text-decoration: none;
font-size: 46px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Font Test</title><link rel="stylesheet" type="text/css" href="/test/css/fontTest.css" />
</head>
<body>
<p>Book Antiqua</p>
<p class="bookAntiqua s20">20px Building</p>
<p class="bookAntiqua s30">30px Building</p>
<p class="bookAntiqua s40">40px Building</p>
<p class="bookAntiqua s50">50px Building</p>
<p class="bookAntiqua s60">60px Building</p>
<p class="bookAntiqua s70">70px Building</p>
<p class="bookAntiqua s80">80px Building</p>
<hr />
<p>Times New Roman</p>
<p class="timesNewRoman s30">30px Building</p>
<p class="timesNewRoman s40">40px Building</p>
<p class="timesNewRoman s50">50px Building</p>
<p class="timesNewRoman s60">60px Building</p>
<p class="timesNewRoman s70">70px Building</p>
<hr />
<p>Georgia</p>
<p class="georgia s30">30px Building</p>
<p class="georgia s40">40px Building</p>
<p class="georgia s50">50px Building</p>
<p class="georgia s60">60px Building</p>
<p class="georgia s70">70px Building</p>
<hr />
<p>Serif</p>
<p class="serif s30">30px Building</p>
<p class="serif s40">40px Building</p>
<p class="serif s50">50px Building</p>
<p class="serif s60">60px Building</p>
<p class="serif s70">70px Building</p>
</body>
</html>
External style sheet:
.s20, .s30, .s40, .s50, .s60, .s70, .s80{
border: 0;
margin: 0;
padding: 0;
line-height: 120%;
font-weight: bold;
}
.bookAntiqua{
font-family: "Book Antiqua";
}
.timesNewRoman{
font-family: "Times New Roman";
}
.georgia{
font-family: georgia;
}
.serif{
font-family: serif;
}
.s20{
font-size: 20px;
}
.s30{
font-size: 30px;
}
.s40{
font-size: 40px;
}
.s50{
font-size: 50px;
}
.s60{
font-size: 60px;
}
.s70{
font-size: 70px;
}
.s80{
font-size: 80px;
}
My (very non-technical) best explanation is that it's related to the percentage of the font-size that "book antiqua" uses to recreate the ascender, bowl(?) and descender parts of the font.
it seems the descender is left until last to be given any rendering space, although it actually requires a certain percentage of the font-size to render. The calculation of the ascender and bowl seems to rely on part percentages (which I can't work out ;)
From what I can work out.. the ascender/bowl combination requires approx. 75% of font-size and so does the descender/bowl combination.
The ascender is given priority and uses all the space it requires (part percentage?), and even if it doesn't actually need it all it uses it all.
The Bowl is next and sometimes it gets cut off at the bottom too (it does at 38px ~ see bottom of "d" it should be lower than the "i") but that is not so noticeable.. then after them two have taken up what they need the poor old descender get's what's left even if it's not enough for it to render properly.
So the differences are, I presume, rounding errors in this particular fonts rendering calculation.. I could be completely wrong though as I know nothing about building fonts..
lol, either avoid book antiqua or increment a pixel at a time until one fits.. really technical huh :)
Suzy
