a:hover span IE 6 & 7 issue

Discussion in 'HTML' started by JeffV, Apr 16, 2008.

  1. JeffV

    JeffV Guest

    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
    JeffV, Apr 16, 2008
    #1
    1. Advertising

  2. JeffV

    dorayme Guest

    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
    dorayme, Apr 16, 2008
    #2
    1. Advertising

  3. JeffV

    JeffV Guest

    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...
    JeffV, Apr 16, 2008
    #3
  4. JeffV

    John Hosking Guest

    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 <br/> thingies should be </p><p>, with a <p> instead of <div>
    containing the whole text.

    >
    > Here is my CSS snipet:


    [Totally superfluous CSS and markup snipped]


    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
    John Hosking, Apr 17, 2008
    #4
  5. JeffV

    dorayme Guest

    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:

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




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


    --
    dorayme
    dorayme, Apr 17, 2008
    #5
  6. JeffV

    JeffV Guest

    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?
    JeffV, Apr 17, 2008
    #6
  7. JeffV

    dorayme Guest

    In article
    <>,
    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 <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...

    --
    dorayme
    dorayme, Apr 17, 2008
    #7
  8. 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>

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Apr 17, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    10
    Views:
    23,417
    Neredbojias
    Aug 10, 2005
  2. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    546
    dorayme
    Jun 26, 2009
  3. Stéphane Klein
    Replies:
    2
    Views:
    1,757
    John Nagle
    Mar 30, 2010
  4. Stefan Behnel
    Replies:
    0
    Views:
    486
    Stefan Behnel
    Mar 29, 2010
  5. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    277
    Kilic Beg
    Jun 7, 2004
Loading...

Share This Page