I have an HTML document exported from Microsoft Word that I have instrumented with Dojo tooltips. One of the CSS paragraph styles in that document specifies "text-indent: -36pt". When a tooltip is created in a paragraph given that style, the sensitive text for the tooltip gets the indent.
When the following cut-down example is displayed on Firefox or Safari, the output is:
a Agreement, fou baah
However on IE 6 and 7 it's:
a ent, fou baah
<head>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.1.0/dojo/resources/dojo.css";
p.testStyle { text-indent:-36.0pt; }
</style>
<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.Tooltip");
</script>
</head>
<body>
<p class=testStyle>
phew baa <span id='test_tip'>Agreement</span>,
fou baah
<div label='this is the text of the tooltip'
dojoType='dijit.Tooltip' connectId='test_tip'>
</div>
</body>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.1.0/dojo/resources/dojo.css";
p.testStyle { text-indent:-36.0pt; }
</style>
<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.Tooltip");
</script>
</head>
<body>
<p class=testStyle>
phew baa <span id='test_tip'>Agreement</span>,
fou baah
<div label='this is the text of the tooltip'
dojoType='dijit.Tooltip' connectId='test_tip'>
</div>
</body>
Probably an IE bug. Any suggestions for a workaround? (preferably not involving modifying the HTML exported from Word)
Found a workaround
Later: the workaround is to use a CSS style on the span that overrides the paragraph. In the example, replace
with
Works on IE6 and IE7.