I am doing fine now. I learned a new technique from
Gary that involved use of "overflow: hidden;" and
"visibility: hidden;" detailed below.
His 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 below, and he got rid
of the span tag.
I would say perfect except for that little chunk of
space after the image in Internet Exploder :-)
Brad
Gary said before:
I didn't deconstruct [the originally posted] code;
just started from scratch.
The Firefox version was easy and straightforward.
Code:
<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.
Code:
<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 [from post on www.csscreator.com]
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
