a:hover span IE 6 & 7 issue

[JeffV]

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

http://www.godsurfer.com/details.php?id=297

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;
background:#fffff;
}

#detailsHelp a:hover {
background:#ffffff;
position: relative;
}

#detailsHelp a span {
background:#ffffff;
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-size:small;
font-weight: bold;
text-align:left;
/* 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!
</span>
</a>
</span>
</span>
</div>

Any and all help is appreciated!

Thanks,

Jeff

 

[dorayme]

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

http://www.godsurfer.com/details.php?id=297

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

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?

 

[JeffV]

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?

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...

 

[John Hosking]

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

http://www.godsurfer.com/details.php?id=297

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...

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.

Here is my CSS snipet:

[Totally superfluous CSS and markup snipped]

 

[dorayme]

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

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:

<http://dorayme.890m.com/alt/jeff.png>

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!

 

[JeffV]

I realized after I posted my reply what you meant.

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

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

 

[dorayme]

I realized after I posted my reply what you meant.

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

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

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
Life!</b>
<!--header-->

I run out of time now...

 

[Chris F.A. Johnson]

On 2008-04-16, JeffV wrote:
....

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

<http://cfaj.freeshell.org/testing/godsurfer.jpg>