www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Another thread about "Works in FF but not IE" - HELP

  1. #1
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046

    resolved [RESOLVED] Another thread about "Works in FF but not IE" - HELP

    Hi all,

    I am learning CSS and having some issues in IE 6 and 7

    I have attached / uploaded the images as well.

    I am trying to do a CSS only tooltip (W3C standards) & no Javascript.

    I am pulling some of my code form 2 sites

    http://codylindley.com/blogstuff/js/tooltip/tooltip.htm

    and

    http://psacake.com/web/jl.asp


    Looks ok in FF and Opera, but in IE7 it aligns up wrong and in IE6 it doesn't show up at all.

    Any help would be great.

    here is my code:

    Code:
    <html>
    <title>Test CSS</title>
    <head>
    
    <style>
    
    /*   */
    
    a.tooltip
    {
        text-decoration:none;
        position: relative;
    }
    
    a.tooltip span
    {
    	display:none;
    }
    
    a.tooltip:hover span
    { 
        /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        z-index:1;
    }
    
    /*   */
      
    #shell
    {
    	width:170px;
    	position:relative;
    }
    
    #top
    {
    	height:25px;
    	background:url(images/tooltiparrow.gif);
    	background-repeat:no-repeat;
    	background-position: 16px 100%;
    	position:relative;
    }
    
    #bottom
    {
    	margin:-1px 0px 0px 0px;
    		
    	border-bottom-style:solid;
    	border-bottom-color:#C0C097;
    	border-bottom-width:2px;
    	
    	border-right-style:solid;
    	border-right-color:#C0C097;
    	border-right-width:2px;
    	
    	border-left-style:solid;
    	border-left-color:#C0C097;
    	border-left-width:2px;
    	
    	background:url(images/top.png);
    	background-repeat:no-repeat;
    	background-position:0% 0%;
    	
    	position:relative;
    	padding:10px;
    	background-color:#FFFFCC;
    }
        
    </style>
    
    </head>
    <body>
    <table align="center">
    <tr>
    <td>
    <a class=tooltip href="#">This is a tooltip 
    	<span>
    	<div id="shell">
    		<div id="top">
    		</div>
    		<div id="bottom">
    			Words, words, words. More words than I care to speak!
    		</div>
    	</div>
    	</span>
    </a>
    </td>
    </tr>
    </table>
    
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Another note:

    I also like the way this tooltip follows the cursor as well, dont know if this can be done with CSS, but if anyone has any thoughts on this, please post.

    This is the URL

    http://codylindley.com/blogstuff/js/tooltip/tooltip.htm

  3. #3
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    Try adding this style
    Code:
    p {
    	padding: 0px;
    	margin: 0px;
    }
    and wrap This is a tooltip with a <p> tag
    Code:
    <a class=tooltip href="#">
            <p>
                This is a tooltip 
            </p>
    	<span>
    	<div id="shell">
    		<div id="top">
    		</div>
    		<div id="bottom">
    			Words, words, words. More words than I care to speak!
    		</div>
    	</div>
    	</span>
    </a>

  4. #4
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Thanks jasonahoule,

    that worked for IE7 but still nothing shows up in IE6.

    Any other useful information ;-)

  5. #5
    Join Date
    Mar 2007
    Location
    Orlando
    Posts
    670
    Sorry, can't help with that one. Not without Javascript.

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    WAY too complex, plus you cannot nest block level elements inside inline elements.

    This is quite easy to do, with only one span and another inline element, in this case I will use a <b>. The png top image is not even required for this. The span itself can be given the appropriate size, padding and background colour, and a border all the way around. A nested <b> can then get the arrow image as a background and positioned absolutely to cover the top border wherever it is positioned.

    In IE6, for it to change the styling of a child element on the <a> hover state, some styling of the <a> itself must also change on hover. In this case, as the <a> must have position:relative to provide a reference for the span position, applying the relative position on the <a> hover state satisfies the change condition for IE6.

    Also remember that when you position something absolutely, you must specify two co-ordinates to determine where it is to be positioned - different browsers will guess the position incorrectly otherwise.

    Try this :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style>
    
    a.tooltip
    {
    	color: #666666;
    }
    a.tooltip:hover {
    	text-decoration: none;
    	position: relative;
    }
    
    a.tooltip span
    {
    	display: none;
    }
    
    a.tooltip:hover span
    {
    	position:absolute;
    	z-index:1;
    	top: 35px;
    	left: 0px;
    	width: 150px;
    	display: block;
    	padding: 10px;
    	background-color: #FFFFCC;
    	border: 2px solid #C0C097;
    }
    .tooltip b {
    	position: absolute;
    	width: 26px;
    	height: 15px;
    	top: -15px;
    	left: 20px;
    	background-image: url(images/tooltiparrow.gif);
    	font-size: 1px;
    }
    </style>
    
    </head>
    <body>
    <a class=tooltip href="#">This is a tooltip 
    	<span><b></b>Words, words, words. More words than I care to speak!</span>
    </a>
    
    </body>
    </html>

  7. #7
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    WOW, Thanks Centauri that did the trick. works in all but Opera (bottom & right hand border is missing) but I can live with that.

    Also I like that I only have to have one pic now and its valid CSS.

    Thanks again guys for all your help.

    Phill

  8. #8
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    ok,

    found a bug.

    If I have a div tag below the tooltip, the tooltip goes under the div tag. how can I make this go over the div tag so it gives the tooltip on top of all other elements?

    Well its only an issue in IE, go figure

    Thanks again in advance

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Try changng the z-index of a.tooltip:hover span to 100.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles