SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<span>You have <strong>2</strong> new notes</span></a>
    		</li>
    		<li class="smallhouse">
    			<a href="/hrtest/richg/testdesign/workforceonline/index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<span>You have <strong>3</strong> houses</span></a>
    		</li>
    		<li class="calendar">
    			<a href="/hrtest/richg/testdesign/workforceonline/index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<span>You have <strong>1</strong> calendar events</span></a>
    		</li>
    		<li class="newmail">
    			<a href="/hrtest/richg/testdesign/workforceonline/index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<span>You have <strong>2</strong> new messages</span></a>
    		</li>
    		<li class="quote">
    			<a href="/hrtest/richg/testdesign/workforceonline/index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<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 example Sorry 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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 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}
    IE won't action changes on inner elements in the anchor unless a property is actioned for the anchors hover. visibility:visible is the perfect fix as it doesn't affect the look of the layout at all as the default is visible anyway.

  3. #3
    SitePoint Addict
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just a shame now that the IE positioning is completely out to Firefox!
    For the absolute span rather than using margin-left use left instead. IE will base its natural position on other factors (such as text-alignment) and will often differ from other browsers.

  5. #5
    SitePoint Addict
    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

  6. #6
    Object Not Found junjun's Avatar
    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.

  7. #7
    SitePoint Addict
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •