SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: CSS tooltip isn't working in IE6
-
Oct 1, 2007, 04:26 #1
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
CSS tooltip isn't working in IE6
Hi,
I've created a little set of icons in the top left of my site, and where you rollover them, a tooltip is displayed accordingly:
Problem is, in IE6 it doesn't display the tooltip at all, here's the HTML code:
Code HTML:<div id="notice"> <ul class="plain"> <li class="paperclip"><a href="/hrtest/richg/testdesign/workforceonline/index.php"> <span>You have <strong>2</strong> new notes</span></a> </li> <li class="smallhouse"> <a href="/hrtest/richg/testdesign/workforceonline/index.php"> <span>You have <strong>3</strong> houses</span></a> </li> <li class="calendar"> <a href="/hrtest/richg/testdesign/workforceonline/index.php"> <span>You have <strong>1</strong> calendar events</span></a> </li> <li class="newmail"> <a href="/hrtest/richg/testdesign/workforceonline/index.php"> <span>You have <strong>2</strong> new messages</span></a> </li> <li class="quote"> <a href="/hrtest/richg/testdesign/workforceonline/index.php"> <span>You have <strong>5</strong> new notices</span></a> </li> </ul> </div>
And here's the CSS:
Code CSS:#notice { /* this code allows the notice to float, see notices.php for rest of code */ width: 30px; background: #fff; border-left: 1px solid #777799; border-right: 1px solid #777799; border-bottom: 1px solid #777799; position: absolute; right: 10px; top: 0px; } #notice a span { display: none; } #notice a:hover span { display: block; position: absolute; width: 170px; height: 18px; margin-left: -172px; margin-top: -19px; background: #fff; border: 1px solid #777799; color: #777799; } .plain li { background-repeat: no-repeat; list-style: none; background-position: center;}
And the class around the lists literally just defines an image background.
I'm afraid I can't upload a working exampleSorry to be a pain, but I'm really at a loss with this, it displays fine in Firefox but not in IE6 at all :/
Thanks
-
Oct 1, 2007, 04:53 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
HI,
This is a long standing, well known bug in IE and can simply be fixed like this:
Code:#notice a:hover{visibility:visible}
-
Oct 1, 2007, 05:05 #3
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Wow! That's awesome, thank you so much for that, I'd of never of thought of that myself so really appreciate it.
Just a shame now that the IE positioning is completely out to Firefox!Will have a play around
-
Oct 1, 2007, 05:19 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Just a shame now that the IE positioning is completely out to Firefox!
-
Oct 1, 2007, 05:54 #5
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Ah awesome, thank you so much! Certainly a big improvement after removing the margins, although it's still a bit out in Firefox now (slightly too far to the left, and a bit too low) but I think it's unsupported here anyway, so it should be okay, even though it's not quite right (it's still perfectly readable and useable which is the main thing I guess!)
Thanks again
-
Oct 1, 2007, 06:58 #6
- Join Date
- Mar 2002
- Location
- northern MI
- Posts
- 1,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Is it "your site" or an intranet site? Just curious, the image looked like the latter.
-
Oct 1, 2007, 07:09 #7
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Sorry yeah, it's an intranet I'm making with a friend
Bookmarks