PDA

View Full Version : DHTML Tooltip Text Alignment



JKeats
06-27-2005, 04:30 PM
Hi there... I'm using the following script on one of my pages -

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

The page I'm using it on is here:

http://www.side-pot.com/links.php

As you can see everything works great, it's just that on the rollovertext that is multiple lines... the text is aligned on the right. I'd like to have it aligned on the left instead. I'm not sure how to do this.

Any help would be much appreciated. Thanks!

jscheuer1
06-27-2005, 09:14 PM
The link to your page is not working at the moment. The text in the demo page is aligned left so, at the moment, I have no real clue what to say. Did you change the style at all?

JKeats
07-06-2005, 03:33 PM
sorry for the delay in my response... i got busy with other mods to the site and forgot about this one!

the link should be working now... not sure what happened before. the server has gone down a couple times over the past couple of weeks... it was probably durring one of those down times that you tried to access the site.

jscheuer1
07-06-2005, 03:57 PM
To begin with, where you have:


<head>
<style type="text/css">

#dhtmltooltip{
position: absolute;
width: 250px;
border: 0px solid black;
padding: 2px;
background-color: white;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</style>
</head>

<body>Take out the extra stuff, make it just:


<style type="text/css">

#dhtmltooltip{
position: absolute;
width: 250px;
border: 0px solid black;
padding: 2px;
background-color: white;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</style>If that doesn't fix it, try adding this red declaration in so it looks like this:


<style type="text/css">

#dhtmltooltip{
text-align:left;
position: absolute;
width: 250px;
border: 0px solid black;
padding: 2px;
background-color: white;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</style>