[thelist] FIR Shortcoming?
Brian W. Reaves
brian at brianreaves.com
Mon Feb 2 11:21:30 CST 2004
I sent a similar question to Jeffrey Zeldman and he replied with an
answer I used to create the following.
<div class="auDIV">
<a id="auDIV" href="../index.html" title="Go to Index Page"><span
class="hidden">Index Page</span></a>
</div>
.auDIV {
width: 291px;
/* Opera6: rollover image & missing image for others during rollover. */
background: url(../images/index.gif) no-repeat;
}
#auDIV {
display: block;
margin: 0;
padding: 0;
width: 290px;
height: 26px;
background: url(../images/index.gif) no-repeat; /* start hiding from
macie\*/
background-position: 0px; /* stop hiding */
voice-family: "\"}\""; /* Need we explain? */
voice-family: inherit;
width: 290px;
height: 26px; /* Actual values to overlap borders */
}
html>body #auDIV {
width: 290px;
height: 26px; /* Be nice to Opera */
}
He said for a full understanding buy his book "Design With Web
Standards" (http://www.zeldman.com/dwws/).
HTH,
Brian
Joshua Olson wrote:
> Hi Listees,
>
> Recently, I've been using FIR for most design related images on websites.
> Often times, I use something like this:
>
> <div id="header">
> <h1><span>Sitename.com</span></h1>
> [Other stuff]
> </div>
>
> #header h1 {
> position: absolute;
> top: 0;
> left: 0;
> width: 200px;
> height: 42px;
> }
>
> #header h1 span {
> display: none;
> }
>
> It works great and degrades nicely with NN4.x, etc. The problem I have is
> that I ALSO prefer to make logos clickable back to the homepage. I can't
> seem to find the magic combination to make this clickable.
>
> I've tried:
>
> <a href="/"><h1><span>Sitename.com</span></h1></a>
> <h1><a href="/"><span>Sitename.com</span></a></h1>
> <h1><span><a href="/">Sitename.com</a></span></h1>
>
> The 2nd two obviously won't work because of the display: none on the span.
>
> The 1st won't work because... heck I don't know, it just doesn't work. :-)
>
> Any thoughts on how to make this work without using JS?
>
> If your curious, my JS solution is the following:
>
> <h1 onclick="top.location.href = '/';" style="cursor:
> pointer;"><span>Sitename.com</span></h1>
>
> TIA,
>
> <><><><><><><><><><>
> Joshua Olson
> Web Application Engineer
> WAE Tech Inc.
> http://www.waetech.com/service_areas/
> 706.210.0168
>
>
--
======================
Brian W. Reaves
Web Consultant
http://BrianReaves.com
(334) 728-0102
More information about the thelist
mailing list