Paul Bennett wrote:
Personally, I've had good experience with the very simple:
<h1><img src="my-header.gif" alt="Page Title" /></h1>
Paul
I'm in two minds over this technique - on the one hand the image has
meaning, and therefore should be part of the markup; on the other hand
this might feel a bit bloated for some, since there are not two objects'
worth of meaning there - I use this:
HTML:
<h1>Page title</h1>
CSS:
h1
{
display: block;
width: 200px;
height: 100px;
background-image: url(pagetitle.gif)
font-size: 1px;
font-size: 0;
color: [background-colour];
}
This is slightly messy because many browsers (IE and WebKit for
starters) don't recognise "font-size:0" as valid, so I have to make what
might be considered an ugly compromise by giving that text the illusion
of invisibility with their minimum font-size and a specific color.
However I can see how this is too much of an unstable compromise for
most people. There is a halfway house I've seen done gracefully which
still has two elements but keeps plain old h1 text:
HTML:
<h1><div></div>Page title</h1>
CSS:
h1 div
{
width: 200px;
height: 100px;
background-image: url(pagetitle.gif)
}
At the end of the day it's a question of semantic aesthetics. I can
easily see many people far preferring Paul's unambiguous and predictably
rendered system, but I've also met a few people who for reasons as vague
as mine simply aren't happy enough to have an image contain that amount
of meaning.
Regards,
Barney
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
