CSS Tooltip has a problem when it's next to a select field

I like the effect of the CSS based tooltip but it has a couple of issues and I was hoping there is a working solution.

1) In IE 6: When the css text box appears next to a select box. The select field appears in front of the help text field. It does not do this in Firefox.

2) In Firefox: The colored text box is a fixed one line of width set. It does not expand to fit the text. In IE, I can add a br tag and it will insert a new line or push the box out wider. In Firefox the text continues outside the box border.

The following is the CSS and an example of how I am using it.

<td class="plg_text1" nowrap>Field label:<a class="info" style="padding-left:10px;" href="#">?<span>This is the field help that appears when you hover over the question mark</span></a></td>

a.info{
    position:relative; /*this is the key*/
    z-index:24;
    color:#000;
    text-decoration:none
}

a.info:hover  {
    z-index:25;
    padding-top:5px;
    padding-bottom:5px;
    text-decoration:none
}

a.info span{display: none}

a.info:hover span { /*the span will display just on :hover state*/
    font-family:Verdana, Tahoma, Arial;
    font-style:normal;
    font-size: 7pt;
    display:block;
    position:absolute;
    top:3em; left:-15em; width:20em;
    border:1px solid #5D96B9;
    background-color:#FFFFA0; color:#555;
    padding:2px;
    text-align: left
}

Thanks,
Blaine
Bl248Asked:
Who is Participating?
 
dakydConnect With a Mentor Commented:
Will something like this work for your firefox issue?  The idea is to make the table the container so that when you absolutely position the span, it'll be positioned relative to the table instead of relative to the page.  I've got a margin-left on the body so you can actually see the span, but odds are you won't need it.  Hope it helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
a.info {
    z-index:24;
    color:#000;
    text-decoration:none
}

a.info:hover  {
    z-index:25;
    padding-top:5px;
    padding-bottom:5px;
    text-decoration:none;
}

a.info span {display: none}

a.info:hover span { /*the span will display just on :hover state*/
    font-family:Verdana, Tahoma, Arial;
    font-style:normal;
    font-size: 7pt;
    display: block;
    position:absolute;
    top:3em; left:-10em;
    border:1px solid #5D96B9;
    background-color:#FFFFA0; color:#555;
    padding: 2px;
    text-align: left;
}

table {
    display: block;
    width: 400px;
    position: relative;
}

body {
    margin-left: 100px;
}
</style>
</head>

<body>
<table>
<tr>
<td class="plg_text1" nowrap>Field label:<a class="info" style="padding-left:10px;" href="#">?<span>This is the field help that appears when you hover over the question mark</span></a></td>
</tr>
</table>
</body>
</html>
0
 
mreuringCommented:
Well, hate to break it to you, but you cannot solve the IE problem with a pure css-solution. IE being driven by a dinosaur-age engine has a troublesome rendering-bug that puts any select-box (and a few other form-elements) at z-index infinity. The usual fixes are, 1. Hiding all possibly interfering form-elements when hover-popups apear or 2. Scripting an iframe to fit underneath the popup, this will somehow overrule the z-index infinity of the form-elements involved.
I haven't had a look at the FireFox issue yet, will have to come to you on that.

  Martin
0
 
Bl248Author Commented:
Hi dakyd,

I am using this feature in a table but adding that table CSS breaks my site layout, The table for some reason does not want to expand out to 100% width. This is part of a more complex form that has several tables and I would need to break it out to see whats causing this.

It does not sound like there is a nice solution to this and I may have to go about it differenty but I did like the CSS based popup help.
0
 
dakydCommented:
Not sure if it'll help, but you can try assigning an ID to the table and then changing the CSS so it only applies to that specific table.  So, change this:
    table {
        display: block;
        width: 400px;
        position: relative;
    }
to this:
    #theTbl {
        display: block;
        width: 400px;
        position: relative;
    }

and then add an id to this particular table:
    <table id="theTbl">

Without seeing the rest of your layout, that's just a stab in the dark, there are tons of different ways that the tables and the CSS/styling could interact.  And if that doesn't work, it'll be a real chore to wade through all those tables to figure out what goes where.  And while we're talking about tables and their layouts ...

>> This is part of a more complex form that has several tables and I would need to break it out to see whats causing this.

I'm sure you've heard it before from others on this site, but this is part of the reason why tables aren't such a good idea for layouts.  Maintenance is a real nightmare, as you have seen.  Tables are rigid structures, and it takes a lot of acrobatics to make them position objects, so much so that it's fairly easy to make the entire structure fall apart.  CSS-based layout schemes tend to be much more flexible, and in many ways, they're also much more powerful.  For an example of what I mean, check out http://www.csszengarden.com/ - every single one of those samples has the same HTML, it's just the CSS that's different.  It might take a bit of work at first, but the end result is worth it.  Anyhow, now that I'm off of my soapbox, hope that helps in some way.
0
 
Bl248Author Commented:
Hi Dakyd,

I was actually able to use some of your suggestion to position the help window area to a fixed area that does not effect or interact with other table or form elements. This is acceptable for me now.

I appreciate your help.

0
All Courses

From novice to tech pro — start learning today.