<h> tag conundrum... help [Archive]

Click to See Complete Forum and Search --> : <h> tag conundrum... help

Alexander.Ambro

02-13-2007, 03:53 PM

I've posted before about this and found a way to avoid problem, but now I need to confront it. Everytime I set some text as <h1> in Mac Dreamweaver 8 it:

1) englarges the height of the the cell
2) boldens the text

Easy enough to set the <h1> in CSS so as to remove the bold, but when I set line height to "0" to restore the height, IN SAFARI ALONE it shifts the text up a pixel or two. I'm including the code for the entire table as well as the CSS for <h1> and the cell it's contained in (.abelianunderline). Many thanks to anyone who can explain how to remedy this browser-specific problem (in Firefox and IE, it's perfectly aligned in the center as always).

Please advise!

TABLE:
<table width="822" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="36" rowspan="2"></td>
<td width="750" height="40" class="abelianunderline"><h1>abelian art project</h1></td>
<td width="36" rowspan="2"> </td>
</tr>
<tr>
<td width="750" height="90" valign="top" class="navigation">|| <span class="style13">triptych</span> -:- <a href="episode1.html">episode</a> || <a href="artists.html">artists </a> || <a href="origin.html" class="navigation">origin</a> || <a href="mailto:abelianartproject@gmail.com">contact us</a> || </td>
</tr>
</table>

CSS
h1 {
font-family: Didot, "Book Antiqua";
font-size: 24px;
font-weight: normal;
color: #CCCCCC;
line-height: 0px;
}
abelianunderline {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
font-size: 24px;
padding-left: 0px;
font-family: Didot, "Book Antiqua";
color: #CCCCCC;

WebJoel

02-13-2007, 04:01 PM

Have you tried first setting the font-size in "body" to "100%", then re-state the default font-sizes for the <h> series of tags, and set a line-height? Often this is enough to get other-browsers to render font-sizes more reliably. I know that font-sizes on different computers tend to be 'different height' by a pixel or two. By first setting "font-size:100%;" in <body>, then stating the actual size that you want, you have adjusted for discrepancy.
I find "line-height" to be of particular usefulness. I usually just state "line-height:1.2em;", so it will be relative to the height of the text, -even if the text is smaller (e.g., "font-size:0.9em'", but the "line-height" remains "1.0". This seems to stop some of that header-shifting).
I've had pretty good luck with this template:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:100%;
font-size: 100.01%;
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {line-height:1.2em;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>...etc

Alexander.Ambro

02-13-2007, 04:33 PM

Hey,

Thanks so much for reading over that lengthy, code-ridden (although I suppose that makes it easier) post. And indeed, while setting the body font-size to 100% didn't do anything by itself, perhaps it worked in tandem with setting:

h1, h2 {font-family: didot, "book antiqua";
font-style:normal; font-variant:normal; font-weight:normal; margin:0px 0px;}
h1{font-size: 1em;}
h2{font-size: 1.72em;}

because after I did that it returned the font size to what I had specified without the slight, but obnoxious, vertical shift in placement. I suppose I'm not exactly sure how the "1em" fixed the placement since it wasn't "font-size" per se that was causing the problems, but you obviously called it right.

Many many thanks,
Thank god for forums.

A

WebJoel

02-13-2007, 06:04 PM

We're getting closer of course, but "font-size:normal;" is "normal" according to specific-browser. That is why I suggest stating the body {font-size} in percentage, and then, re-size. Else, you are re-sizing to fit, from browser's interpetation of what is 'normal'.
This added, might help make 'normal'" even more "normal":

body {font-size:100%;
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;}

although I am unlectured as to why/what this specifically does, it is believed to help send the correct sizes to fonts used throughout the site. Someone else might have additional commentary to this particular 'hack'.