molyblue wrote:
Hello, gang! I am working with WordPress and am trying to create a hover effect on a linked image within my website banner. Both my CSS and XHTML validate, but Firefox on Mac OS X/WinXP and Opera8 on WinXP render my code incorrectly (I think). Safari does fine as does IE6.
sample page = http://tinyurl.com/86ubp
I think FF and Opera are correct (as is usually the case). I think what is happening is that the <a> element inside transhover is only as high as its inherited line-height. You can't force it to be taller by using height, because inline elements don't respond to height. So transhover is only as tall as the <a> element, which is only as tall as the potential text it would have in there. You can fix it by adding display: block to the <a> element, but doing this means the image will display on the line below the previous image. So, just change the way you are positioning the elements in there. Float the first image to the left and transhover div (I would change it to a div) to the right. Should work fine.
<!-- start banner --> <!-- Full banner home page link workaround --> <div id="header"> <a href="/"><img src="/wp-content/themes/beatrice/images/t-square.gif" alt="[illustration (link): logo (dental floss box on squarish mango background)]" title="transcendental floss home page" /><img src="/wp-content/themes/beatrice/images/banner-larrabee.jpg" alt="[photo (link): Larrabee State Park, WA (landscape)]" title="transcendental floss home page" /></a>
<div id="upmost-segue"><img src="/wp-content/themes/beatrice/images/upmost-segue.gif" alt="graphic spacer" /></div>
<!-- HERE'S THE PHP ROTATOR IMAGE FOLLOWED BY WHAT SHOULD BE THE INLINE
HOVER EFFECT -->
<?php showImage(); ?><span class="transhover"><a
href="/transglobal-floss-uplinks/"><span><img
src="/wp-content/themes/beatrice/images/transglobal-space.gif"
alt="illustration: satellite dish | text: transglobal floss"
title="transglobal floss uplinks" /></span></a></span>
On an offtopic note, please don't include alt text for decorative images, such as spacer gifs or pictures of satellite dishes. Use alt="" instead. Here's an article I wrote about this:
http://www.communitymx.com/abstract.cfm?cid=C618E
Email me offlist if you need more info.
I've tried searching through archives but cannot make sense of what I
find. If someone knows this has been covered, then perhaps some assistance
with finding the needed archived info, please.
Did you search the archives using Google? That's the best way. Don't use the search feature of incutio that we have -- it stinks.
http://css-discuss.incutio.com/?page=SearchCssDiscussList
Zoe
-- Zoe M. Gillenwater Design Specialist UNC Highway Safety Research Center http://www.hsrc.unc.edu
______________________________________________________________________ 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/
