a:hover span IE 6 & 7 issue

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:

Story Details:
Information:


About this Page:

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.


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.


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!


Thanks for helping GODSurfer grow!

Re: a:hover span IE 6 & 7 issue

In article
,
JeffV wrote:

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

--
dorayme

Re: a:hover span IE 6 & 7 issue

On Apr 16, 3:02 pm, dorayme wrote:
> In article
> ,
>
> JeffV wrote:
> > 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?
>
> --
> 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 :)

It is just something that I want done...

Re: a:hover span IE 6 & 7 issue

JeffV wrote:
> 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.

Your
thingies should be

, with a

instead of

Re: a:hover span IE 6 & 7 issue

In article
,
JeffV wrote:

> On Apr 16, 3:02 pm, dorayme wrote:
> > In article
> > ,
> >
> > JeffV wrote:
> > > 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?
> >
> > --
> > 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:



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!




>
> It is just something that I want done...

--
dorayme

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-
size)?

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
<7056d21c-2d07-4ca4-980f-4541b1fb351e@m36g2000hse.googlegroups.com>,
JeffV wrote:

> 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
and style, and put styles to your sheet:

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

| href="register.php">Register

Bringing God to your ONLINE
Life!


I run out of time now...

--
dorayme