Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Sticky Tooltip script status text not centering (IE9)

  1. #1
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question Sticky Tooltip script status text not centering (IE9)

    1) Script Title: Sticky Tooltip script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ckytooltip.htm

    3) Describe problem: In IE9, the tooltip status background does not extend beyond the text, and is not centered, per the stickytooltip.css settings. (I believe I'm up to date - I've updated my JS file in the marvelous Sticky Tooltip Script per the 12/16/2010 update.)

    Thanks!

    - Michael

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Does this also occur on the DD demo page, or just on your own. If the later, make sure your page has a valid doctype at the very top:

    Code:
    <!DOCTYPE HTML>
    DD Admin

  3. #3
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    it does NOT happen on the demo page (Thanks! ... should of thought of that)

    BUT ... the demo page code is not the final updated code. The final, updated JS is here (http://www.dynamicdrive.com/forums/blog.php?b=48) ... and I'm not sure if that works or not.

    Gonna go scrub my CSS and look for a conflict, too.

  4. #4
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    I've replaced my JS with the orginal JS from DD and the updated js (from forums - http://www.dynamicdrive.com/forums/blog.php?b=48) and the problem still persists. So it's my code.

    My doctype is lovingly provided by Dreamweaver:
    (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)

    Can't figure out what's overriding the "text-align:center" in my code. Additionally, I can't seem to style the font in the tooltip itself either (not the status bar). Here's my CSS:

    Code:
    body {
    	background-image: url(images/back.jpg);
    	background-repeat: repeat-x;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    
    #container  {
    	width:960px;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    #navbar  {
    	width:960px;
    }
    
    #slides  {
    	margin-top: 20px;
    }
    
    #midbar  {
    	margin-top: 10px;
    }
    
    #bottomboxes  {
    	margin-top: 10px;
    }
    
    #bot1  {
    	float: left;
    }
    
    #bot2  {
    	float: left;
    	margin-left: 15px;
    }
    
    #bot3  {
    	float: left;
    	margin-left: 15px;
    }
    
    #botgrad {
    	margin-top: 10px;
    }
    
    .clear { clear: both;}
    
    
    
    .stickytooltip{
    box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
    -webkit-box-shadow: 5px 5px 8px #818181;
    -moz-box-shadow: 5px 5px 8px #818181;
    display:none;
    position:absolute;
    display:none;
    border:2px solid black; /*Border around tooltip*/
    background:#3FC;
    font:Arial, Helvetica, sans-serif
    z-index:3000;
    }
    
    
    .stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
    height:13px;
    background:#999;
    color:white;
    padding-top:1px;
    text-align:center;
    font:bold 10px Arial;
    }
    I'm such a hack-noob. forgive me.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    For the font, add the red:

    Code:
    .stickytooltip{
    box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
    -webkit-box-shadow: 5px 5px 8px #818181;
    -moz-box-shadow: 5px 5px 8px #818181;
    display:none;
    position:absolute;
    display:none;
    border:2px solid black; /*Border around tooltip*/
    background:#3FC;
    font-family:Arial, Helvetica, sans-serif
    z-index:3000;
    }
    For the rest:

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    I wish I could post the link, but it's behind the work firewall (internal).

    I pasted the demo HTML at the bottom of my page and it has the same problem in IE (won't center status, color won't span)

    I've pasted the CSS previously (I've changed the font-family tag), but I'll paste the HTML here (it's not much). Note the Sticky Tooltips demo at the bottom. Please forgive the code flood


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TA2000 Omnibus Transparency</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="stickytooltip.js">
    
    /***********************************************
    * Sticky Tooltip script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <link rel="stylesheet" type="text/css" href="stickytooltip.css" />
    
    </head>
    
    <body>
    <div class="container" id="container">
    
      <div class="navbar" id="navbar">
    
        <img src="images/nav.jpg" width="960" height="75" alt="navbar" /></div>
     
      <div id="slides"><img src="images/slides3.jpg" alt="slide1" width="960" height="420" border="0" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="rect" coords="26,146,157,313" href="slide2.html" alt="prev page" />
          <area shape="rect" coords="784,145,939,321" href="slide4.html" alt="next page" />
          <area shape="rect" coords="471,295,498,323" href="#" data-tooltip="sticky1" />
        </map>
      </div>
     
      <div id="midbar"><img src="images/midbar1.jpg" width="960" height="35" alt="midbar1" /></div>
     
      <div id="bottomboxes">
        <div id="bot1"><img src="images/bottomleft1.jpg" width="310" height="180" alt="left1" /></div>
      
        <div id="bot2"><img src="images/bottommid1.jpg" width="310" height="180" alt="mid1" /></div>
       
        <div id="bot3"><img src="images/bottomright1.jpg" width="310" height="180" alt="bot3" /></div>
        <div class="clear"></div>
     
      </div>
      <div id="botgrad"><img src="images/bottomgrad_16.jpg" width="960" height="131" alt="botgrad" /></div>
    </div>
    
    <p>Some page contents here...</p>
    
    <p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
    <p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
    <p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p>
    
    <p>Some page contents here...</p>
    
    
    <!--HTML for the tooltips-->
    <div id="mystickytooltip" class="stickytooltip">
    <div style="padding:5px">
    
    <div id="sticky1" class="atip" style="width:350px">
    Individual advisor identities are identified with supporting totals. Individual advisor identities are identified with supporting totals. Individual advisor identities are identified with supporting totals. Individual advisor identities are identified with supporting totals. Individual advisor identities are identified with supporting totals.
    </div>
    
    <div id="sticky2" class="atip"  style="width:262px">
    <img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
    </div>
    
    <div id="sticky3" class="atip">
    <img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
    </div>
    
    </div>
    
    <div class="stickystatus"></div>
    </div>
    
    </body>
    </html>
    Thanks for your attention to this. It's a small issue .. but it's driving me nuts (and holding up development!)

    - Michael

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Works OK centering the status text here in IE 9. Tested with both versions of the script. One thing though on the font-family thing, you also need a semi-colon at the end of the line:

    Code:
    .stickytooltip{
    box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
    -webkit-box-shadow: 5px 5px 8px #818181;
    -moz-box-shadow: 5px 5px 8px #818181;
    display:none;
    position:absolute;
    display:none;
    border:2px solid black; /*Border around tooltip*/
    background:#3FC;
    font-family:Arial, Helvetica, sans-serif;
    z-index:3000;
    }
    If I put IE 9 into IE 7 mode, then it messes up the centering of the status text. To fix that, get rid of the highlighted:

    Code:
    .stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
    height:13px;
    background:#999;
    color:white;
    padding-top:1px;
    text-align:center;
    font:bold 10px Arial;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    sonofray (01-25-2012)

  9. #8
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Thumbs up John is a CSS Jedi

    VICTORY! You are a legend. The whole time it was that flingin-flangin stickystatus height.

  10. #9
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Exclamation One more question!

    Thanks you for your continued help. One more CSS issue...

    I can't seem to adjust the SIZE of the tooltip text, independent of the tooltip status, no matter what I change (the 8px designation does not work in any browser):

    Code:
    .stickytooltip{
    box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
    -webkit-box-shadow: 5px 5px 8px #818181;
    -moz-box-shadow: 5px 5px 8px #818181;
    display:none;
    position:absolute;
    display:none;
    border:2px solid black; /*Border around tooltip*/
    background:#3FC;
    font-size:8px
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    z-index:3000;
    }
    
    
    .stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
    background:#999;
    color:white;
    padding-top:1px;
    text-align:center;
    font:bold 10px Arial;
    }
    We've accomplished the justification and font family ... just one thing left!

    Thank you, again.

    - Michael

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You missed the semi-colon again (added in red in the below):

    Code:
    .stickytooltip{
    box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
    -webkit-box-shadow: 5px 5px 8px #818181;
    -moz-box-shadow: 5px 5px 8px #818181;
    display:none;
    position:absolute;
    display:none;
    border:2px solid black; /*Border around tooltip*/
    background:#3FC;
    font-size:8px;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    z-index:3000;
    }
    
    
    .stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
    background:#999;
    color:white;
    padding-top:1px;
    text-align:center;
    font:bold 10px Arial;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    sonofray (01-26-2012)

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
  •