View Full Version : [UNKNOWN][3.??] Quicktips display extra horizontal line/border above text in IE7

10 Jan 2010, 9:32 PM
Ext version tested:

Ext 3.1
Adapter used:

css used:

only default ext-all.css

Browser versions tested against:

Operating System:

WinXP Pro

Quicktips display extra horizontal line/border above quicktip text in IE7.
Test Case:
See ExtJS web site samples for quicktips. Code reproduced below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tips Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script><script type="text/javascript">_uacct = "UA-1396058-1";urchinTracker();</script>
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="qtips.css" />
<script type="text/javascript" src="qtips.js"></script>

<style type="text/css">
.tip-target {
width: 100px;
padding: 5px 0;
border:1px dotted #99bbe8;
color: #15428b;
font:bold 11px tahoma,arial,sans-serif;

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

<h1>Tips examples</h1>
<p>Note that the js and css is not minified so it is readable. See <a href="qtips.js">qtips.js</a> for the tip creation code
and <a href="qtips.css">qtips.css</a> for the css.</p>

<h3>Easiest Tip</h3>
<div id="tip1" class="tip-target">Basic ToolTip</div>
<div id="tip2" class="tip-target">autoHide disabled</div>
<div id="ajax-tip" class="tip-target">Ajax ToolTip</div>
<div id="track-tip" class="tip-target">Mouse Track</div>
<div id="tip4" class="tip-target" ext:qtip="My QuickTip">QuickTip</div>

<div class="x-clear"></div>
<h3>Callout Tip</h3>
<div id="leftCallout" class="tip-target" style="width: 150px;">Anchor right, rich content</div>
<div id="bottomCallout" class="tip-target" style="width: 200px;">Anchor below</div>
<div id="trackCallout" class="tip-target" style="width: 150px;">Anchor with tracking</div>

<div style="display:none;">
<div id="content-tip">
<li>5 bedrooms</li>
<li>2 bathrooms</li>
<li>Large backyard</li>
<li>Close to transport</li>
<div class="x-clear"></div>
<img src="images/house.jpg" alt="Website Thumbnail" />

See this URL : http://www.extjs.com/deploy/dev/examples/simple-widgets/qtips.html

Steps to reproduce the problem:

In IE7, go to url http://www.extjs.com/deploy/dev/examples/simple-widgets/qtips.html.
Move mouse over right most example on first row displaying "QuickTip".
Note extra horizontal line at top.
Repeat for IE8 or FF and extra line is not displayed.
The result that was expected:

No extra horizontal line.
The result that occurs instead:

An extra horizontal line/border above text for quick tip.
Screenshot or Video:

See attachment.
Debugging already done:

Possible fix:

not provided