3 replies [Last post]
sturdyworks
Offline
newbie
Pasadena, CA
Last seen: 14 years 24 weeks ago
Pasadena, CA
Joined: 2005-06-06
Posts: 2
Points: 0

In Dan Cederholm's book "Web Standards" on page 212 a Logo Swap trick is presented that works great in IE 6.0.28, but fails to show image in Firefox 1.0.3. A code snibblet is at end of email.

Has anyone got this working in Firefox? Maybe there are some general updates to this Logo Swap design technique?

I did slightly modify code from book by referencing div#logo not #logo and by adding "border-style: none;", "float: left;" and "margin-top: 25px;" but my tweeking of these has not helped yet.

Below is code snibblet. The general idea of this technique is to show a different logo when CSS is NOT available, and I also hope to it to print a different logo.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0" encoding="EUC-JP"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en-us" lang="en-us">
<head>
<title>Firefox Logo Swap</title>
<meta http-equiv="Content-type" content="text/html;
charset=EUC-JP" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
div#logo
{
float: left;
}
div#logo img
{
border-style: none;
display: block;
width: 0;
}
div#logo span
{
width: 300px;
height: 36px;
margin-top: 25px;
background: url(./ff-logo-hifi.gif) no-repeat;
}
div#logo a
{
border-style: none;
display: block;
margin-top: 25px;
width: 300px;
}
</style>
</head>
<body>
<div id="logo">
<span><a href="./ff-img-swp.html">
<img src="./ff-logo-lofi.gif"
width="300" height="36" alt="Logo" />
</a></span>
</div>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 43 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Logo swap help (Dan Cederholm, pg. 212)

I didn't deconstruct your code; just started from scratch.

The Firefox version was easy and straightforward.

 
<div style="width: 100px;  
            height: 50px;  
            border: 1px solid black;"> 
  <a href="#" 
     style="display: block;  
            line-height: 50px;  
            background: white url(bullseye.jpg) no-repeat;"> 
    <img src="bigx.png" 
         style="display: none;" />&nbsp;</a> 
</div>

IE needed some fiddlin', so the result is a bit different.
 
<div style="width: 100px;  
            height: 50px;  
            border: 1px solid black;"> 
  <a href="#" 
     style="display: block;  
            height: 50px;  
            background: white url(bullseye.jpg) no-repeat; 
            overflow: hidden;"> 
    <img src="bigx.png" 
         style="visibility: hidden;" />&nbsp;</a> 
</div>
IE didn't like {display: none;} on the img, so made it {visibility: hidden;}. I didn't use the {width: 0;} trick because IE put a small placeholder on screen. The problem with visibility is that the element is still there, and that means IE will expand its containing element to hold it. Probably not a problem in your case, but it is in the general. That requires that <a> have {overflow: hidden;}.

So, Moz and Opera are happy with either, but IE requires the tricked up version.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sturdyworks
Offline
newbie
Pasadena, CA
Last seen: 14 years 24 weeks ago
Pasadena, CA
Joined: 2005-06-06
Posts: 2
Points: 0

Logo swap help (Dan Cederholm, pg. 212)

Gary,

Your approach works great! That "overflow: hidden" is a gem and is not in any of my $250 worth of books. It along with "visability: hidden" will now start showing up in my code. Good explaination, and you got rid of the span tag.

I would say perfect except for that little chunk of space after the image in Internet Exploder Smile

Thanks, Brad

PS. Below is new logo swap code (images in my last post)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0" encoding="EUC-JP"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<title>Firefox Logo Swap</title>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
div#logo
{
float: left;
width: 300px;
height: 36px;
/*border: 1px solid black;*/
}
div#logo a
{
display: block;
height: 36px;
background: url(./ff-logo-hifi.gif) no-repeat;
overflow: hidden;
}
div#logo img
{
visibility: hidden;
}
</style>
</head>
<body>
<div id="logo">
<a href="./ff-img-swp.html">
<img src="./ff-logo-lofi.gif"
width="300" height="36" alt="Logo" />
</a>
</div>
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 43 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Logo swap help (Dan Cederholm, pg. 212)

Add #logo img {margin-right: -3px;}. It's an IE thing, what do I know?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.