I'n using an image replacement technique for my headers. I had wanted to
use the same technique for a site's logo in the top banner as well, but
have run into validation issues with XHTML 1.0 Transitional DTD.
The problem is that the logo must be wrapped by an anchor linking back
to the front page (the nav is always available, but the client insists,
and i agree, in any case, that banner logos should do this, if
possible). But the "height:0" rule causes the anchor to collapse as
well, of course. So simply wrapping the anchor around the header text
doesn't work.
In order for the header to be clickable, i must wrap the anchor around
the header. But that won't validate because then i've got a block
element inside of an inline element.
This is how the replacement is set up:
<div id="banner">
<a href="/" title="blah blah"><h1>my logo text</h1></a>
</div>
/* \*/
#banner h1 {
display: block;
overflow: hidden;
background-image: url("/images/logo.png");
background-repeat: no-repeat;
width: 405px;
padding-top: 25px;
height: 25px;
voice-family: "\"}\"";
voice-family: inherit;
height: 0px;
}
/**/
I've tried marking it up properly, and then adding:
#banner h1 a
{
display: block;
min-width: 405px;
min-height: 25px;
}
to no avail. Does anyone have a suggestion? I'm willing to try other
replacement techniques, though this one has served me very well in the past.
brian
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
