When tackling this issue, I opt for a slightly unconventional approach.
My method involves embedding the image within the h1 tag, resulting in the following HTML structure:
<div id="header">
<h1>This is the header<img src="img/stackoverflowLogo.png" /></h1>
</div>
To achieve the desired layout, I utilize CSS to set the <h1> positioning as relative and the image as absolute. This causes the image to be removed from the document flow and positioned 'above' the text within its parent element. The CSS snippet I use is similar to:
#header h1
{position: relative;
border: 0 none transparent;
font-size: 2em;
margin: 1em auto;
border: 1px solid #ccc;
}
#header img
{position: absolute;
top: 0;
left: 0;
}
I have provided a demonstration at this link: http://www.davidrhysthomas.co.uk/so/h1Img.html.
The initial section illustrates the first step of positioning the image in relation to its parent, with the image having a transparent background to visualize the process.
In the subsequent sections, I employ jQuery to dynamically set the dimensions of the <h1> equal to those of the image. This prevents the scenario where the text extends beyond the image, as shown below:
$(window).load(
function() {
var w = $('#logo').outerWidth();
var h = $('#logo').outerHeight();
$('#two h1').css('width',w,'height',h);
$('#three h1').css('width',w,'height',h);
}
);
This solution may feel a bit makeshift since it relies on JavaScript and introduces a slight page flicker during load as the calculations and styling are applied.
Despite its quirks, this approach fulfills the requirement of keeping text visible until the image loads and utilizes XHTML and CSS to manage text visibility. Additionally, if image dimensions are known beforehand, the jQuery/JavaScript workaround to prevent text overflow may not be necessary.
(I extend my apologies to Jeff, Joel, and others for using the SO logo without formal permission, but it seemed fitting in this context... =) )