Mon, 2005-06-06 16:40
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>
Mon, 2005-06-06 21:36
#1
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;" /> </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;" /> </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
Tue, 2005-06-07 00:39
#2
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 
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>
Tue, 2005-06-07 04:01
#3
Logo swap help (Dan Cederholm, pg. 212)
Add #logo img {margin-right: -3px;}. It's an IE thing, what do I know?
cheers,
gary