[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