SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink pure-css tooltip correct positioning

    Hi folks,

    thanks in advance for the help you might give to me.

    If you open this:
    http://www.giuseppecraparottacv.co.uk/work-web1.html ,
    and hover on the first "Let me tell you something..." , a pure-css tooltip will appear.

    My current problem is that the tooltip displays too far from the link in IE6 and 7, while looks good in FF, NETSCAPE AND OPERA 9.10.

    The tooltip is currently positioned through margin-left and top. Why that?
    Because using top and left properties associated with absolute positioning provoked inacceptable displaying in Opera 9.10 .

    So my "I position my tooltip where I want" goal is achievable in two ways:
    1) though top and left, but correcting the Opera buggy displaying; can you help with this?
    2) through margin-top and margin-left, but forcing IE 6 and 7 to interpret these properties exactly as the other browsers; can you help with this instead?

    I'm just trying to write an easy-to-follow post :-) .

    Any help?
    Thank you so much.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Welcome to Sitepoint


    IE doesn't like absolute elements unless they have a left position set because they often take their alignment dependent on the current text-alignment.

    You need to set a stacking context with position:relative on the pop up and then give a left position of 0. As other browsers are already working ok then this is best done with conditional comments to avoid upsetting anyone else.

    Add the comments in the head and after the original css file as follows:

    Code:
    <!--[if IE ]>
    <style type="text/css">
    .popup {position:relative;}
    .popup:hover span {left:0;}
    </style>
    <![endif]-->

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When absolutely positioning something, specify x and y co-ordinates and what is is positoned relative to, so the browser doesn't have to guess. In this case, the popup is desired to be positioned relative to the link, so the link should have its position set to relative, and the popup span can then be positioned via top and left instead of margins.

    However, the span is cut off due to the hidden overflow on the ul. This seems to have been applied due to the <li>s being floated and being made too wide due to the 100% width plus padding. There is no need to float the <li>s at all, and the width can then be removed, and consequently, the hidden overflow can then be removed from the ul.
    Code:
    ul {
    min-width:574px;
    width:36.5em;
    margin:0 auto;
    list-style-type:none;
    border-right:4px solid #737272;
    border-left:4px solid #737272;
    }
    
    li {
    padding:1.1em 1.5em 0.9em 1.5em;
    font-size:0.9em;
    }
    
    .popup {
    color:#00B9F6;
    line-height:1.8em;
    position: relative;
    }
    
    .popup:hover span {
    display: block;
    position:absolute;
    z-index:100;
    left:20em;
    top:-1em;
    width:20em;
    color:#000000;
    line-height:1em;
    padding:1.2em;
    background-color:#5DCCF0;
    }
    Works the same in IE as FF


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
  •