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 ---------------------------------- ---------------------------------- Here is the pertinent banner HTML: ---------------------------------- <!-- 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> </div> <!-- end header div --> <!-- end banner --> -------------------------------- End of pertinent banner HTML -------------------------------- -------------------------------- transglobal-space.gif is a translucent gif the same size as the images used in the background CSS. Whether it is <span class="transhover">...</span> or <div class="transhover">...</div> does not matter. No matter how I DIVvy up the DIVs or SPANs, I cannot get the transhover image to fall inline. If I code the DIVs to be absolute, then things start shifting all over the place, which I'd like to avoid, if I can. Not sure how I should code this. 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. Otherwise, any suggestions to rework the code above/below are appreciated. It'll be by last step before completing our blog's first stage and tabling the second stage for the summer, so mucho gracias! -------------------------------- -------------------------------- Here is the pertinent CSS (which has been tested as the only CSS with same results): -------------------------------- body { background:#677; margin:0; padding:10px 0 14px; font:x-small Verdana,Helvetica,Sans-serif; text-align:center; color:#4d4d4d; font-size/* */:/**/small; font-size: /**/small; } /* Page Structure ----------------------------------------------- */ #wrap { position:relative; top:10px; left:6px; background:#566; width:800px; margin:0 auto; text-align:left; } #wrap2 { position:relative; top:-10px; left:-6px; background:#fff; padding:10px; } /* Header (Banner & Description) ----------------------------------------------- */ #header { background:#fff; padding:0; margin:0; color:#fff; width:100%; } #header img { border: 0px; } .transhover { display: inline; background: #fff; } .transhover a:link, #transhover a:visited, #transhover a.active:link { background: url("/wp-content/themes/beatrice/images/transglobal-floss.gif") no-repeat; } .transhover a:hover { background: url("/wp-content/themes/beatrice/images/sites-in-our-sight.gif") no-repeat; } ------------------------------- End of pertinent CSS ------------------------------- -------------------------------
______________________________________________________________________ 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/
