Sticky Tooltip script status text not centering (IE9)

**sonofray** · 01-24-2012, 09:35 PM

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

**ddadmin** · 01-25-2012, 12:25 PM

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>

**sonofray** · 01-25-2012, 02:38 PM

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.

**sonofray** · 01-25-2012, 03:07 PM

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.

**jscheuer1** · 01-25-2012, 05:09 PM

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.

**sonofray** · 01-25-2012, 07:15 PM

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

**jscheuer1** · 01-25-2012, 07:56 PM

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;
}

**sonofray** · 01-25-2012, 09:32 PM

VICTORY! You are a legend.

The whole time it was that flingin-flangin stickystatus height.

**sonofray** · 01-26-2012, 03:29 PM

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

**jscheuer1** · 01-26-2012, 05:01 PM

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;
}