a:hover span IE 6 & 7 issue

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Please visit the following site and hover over the information icon
(top right hand side):


In FF the text from the description does not show through the
information box that displays (when you mouse over the info icon).

In IE 6 * 7 it does...

Here is my CSS snipet:

#detailsHelp {
   color: #1A315F;

#detailsHelp a {
   text-decoration: none;

#detailsHelp a:hover {
   position: relative;

#detailsHelp a span {
   display: none;

#detailsHelp a:hover span {
z-index: 1001;
display: block;
    position: absolute; top: 10px; left: -260px;
   /* formatting only styles */
    padding: 5px; margin: 10px;
    background: #eee; border: 1px dashed #FEB14C;
    width: 250px;
    color: #1A315F;

font-weight: bold;
   /* end formatting */

Here is my HTML:

<div id="toolBar">Story Details:
<span class="siteInfo">Information:
<span id='detailsHelp'>
<a href='#'><img src='images/information.gif' border='0' alt='Bringing
God to your online life!'/>
<span>About this Page:<br/>
Here you will see the title of the Article, Blog or Website that a
user added.  You can click
on the title and you will go directly to that site.<br/><br/>
If you have visited that site already and would like to discuss the
site with other users of
GODSurfer.com then login (or register) and add your comments below in
the comments section.<br/><br/>
If you happened to like the Article, Blog or Website then please
consider voting for it (the Surf It button).  This is your way of
telling everyone in the Christian community that this a worth while
site to visit!<br/><br/>
Thanks for helping GODSurfer grow!

Any and all help is appreciated!



Re: a:hover span IE 6 & 7 issue

In article

Quoted text here. Click to load it

First see what happens to the whole page when you change the text size
you are viewing it at. Try a few clicks up. Fix that up and then worry
about this detail.

About this detail, why do you need a drop down box to give information
when there is so little on the page anyway?


Re: a:hover span IE 6 & 7 issue

Quoted text here. Click to load it

I don't fully understand what you mean about changing the text size.
I did it just for grins in the browser and got the same results just
with bigger text :)

It is just something that I want done...

Re: a:hover span IE 6 & 7 issue

In article

Quoted text here. Click to load it

Perhaps you did not click more than one or twice. it starts to break up
one or two clicks more than my normal, this is perhaps 3 or 4 clicks up:


I would think that should not happen as distinctively as this?

Btw, body {font-size: 10px;} is not a good idea.

It is these fundamental things I would have thought that need attention
before drop down menus. But best of luck!

Quoted text here. Click to load it


Re: a:hover span IE 6 & 7 issue

I realized after I posted my reply what you meant.

Do you have a suggestion on how to fix this particular issue (text-

The font-size:10px; was a suggestion from another site.  Do you
suggest that I take that out?

Re: a:hover span IE 6 & 7 issue

In article

Quoted text here. Click to load it

You have font-size repeated so many times that I had to transfer to a
text-editor to use GREP. Try at least these things if you do not want to
take a complete broom through:

1. Remove ALL font-size for the moment.

2. Remove the *many* references to line-height. leave it out. Put
line-height: 1.3 in body if you like (no units)

3. Consider something like this for the top, but please, this is just a
quick play and it does behaves better, but you need to remove the <b>
and style, and put styles to your sheet:

<div id="content">
<div id="body">
<div id="header"><a href="http://www.godsurfer.com /"><img
src="http://www.godsurfer.com/images/WebLogo.gif" title="GodSurfer.com -
Bringing God to your online life!" alt="GodSurfer.com - Bringing God to
your online life!" align="middle" border="0"></a></div>

<div style="float: right;">      
<a href="#" onclick="overlay();">Login</a> | <a
href="register.php">Register</a></div> <b>Bringing God to your ONLINE

I run out of time now...


Re: a:hover span IE 6 & 7 issue

On 2008-04-16, JeffV wrote:
Quoted text here. Click to load it


   Chris F.A. Johnson, webmaster         <http://Woodbine-Gerrard.com
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Re: a:hover span IE 6 & 7 issue

JeffV wrote:
Quoted text here. Click to load it

Could it be this:
#detailsHelp a {
    text-decoration: none;
    background: transparent; }

I don't know why FF renders it opaque.

There is also an error (in addition to many warnings) in the CSS.
#detailsHelp a:hover {
    position: relative;
    z-index: 100;
    background: ffffff; }

It should be #ffffff.

Why don't you make "Information" part of the hovered link? Also, it
seems you're only making this a link so that it can do the hover-popup
trick; there isn't really any link action, right? It'd be more honest
(and potentially useful, IMO) to make this a show/hide function intead
of a poping-up non-link.

Your <br/> thingies should be </p><p>, with a <p> instead of <div>
containing the whole text.

Quoted text here. Click to load it

[Totally superfluous CSS and markup snipped]

Pondering the value of the UIP: http://improve-usenet.org /

Site Timeline