views:

67

answers:

0

Because a customer requested it, I've changed a div to

position: absolute;
top: 5px;
bottom: 5px;
overflow: auto;
min-width: 945px;

which basically makes the div fill out the available area vertically, and show a vertical scrollbar if it doesn't fit. I had another problem that seems to be unrelated to this with the same setup, but this is more annoying:

In the div, I have elements with a tooltip. The tooltip is created with jQuery Tooltip and is just formatted text, nothing fancy. When the tooltip is to be displayed in IE7 (or IE8 in compatibility mode), the entire div disappears for anything between a few milliseconds and one or two seconds. Then it appears again and sometimes the tooltip is shown, sometimes it's cancelled. I couldn't find any information about this bug, and I don't know if it's really related to the tooltip. Did anyone experience a similar bug and/or knows how to fix it?

With IE9 dev preview in IE7 standards more, the flicker is longer and with some luck, I got a snapshot of the actual layout during the flicker. The calculated height of the content div is 0px. That must be the reason why it's not visible. The question is still why this happens.

I somehow managed to get to a state where the tooltip is almost shown (just has display: none), and unchecking this style in the developer toolbar will show the tooltip and hide the content div. The tooltip, by the way, is basically just a div with the following styles:

z-index: 3000;
border-bottom: #111 1px solid;
border-left: #111 1px solid;
border-right: #111 1px solid;
border-top: #111 1px solid;
padding-bottom: 5px;
background-color: #eee
position: absolute;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
opacity: 0.85;
display: none;

I just don't get what in this makes the content div disappear.

Update: I managed to reproduce the problem with a minimalistic HTML page. The contents is like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link rel="Stylesheet" href="jquery.tooltip.css" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.tooltip.js" type="text/javascript"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("p").tooltip({
            bodyHandler: function () { return "something"; },
            showURL: false,
            fade: 250
        });
    });


</script>
<div style="overflow: auto; position: absolute; top: 0px; bottom: 0px; min-width: 945px; background-color: blue">

<p>ping</p>
</div>
</body>
</html>

Add the following files from jQuery and jQuery tooltip to the same directory as the HTML file:

  • jquery.js
  • jquery.tooltip.js
  • jquery.tooltip.css

Hovering over "ping" will make the dark blue background disappear in IE7 mode (e.g. IE9 in IE7 standards mode). Note that in IE9/IE7, the div is not visible until the mouse is moved away, while in IE8/IE7 or real IE7, it just flickers.

Another Update:

The problem does not appear without jQuery Tooltip. If you modify the HTML file like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link rel="Stylesheet" href="jquery.tooltip.css" />
</head>
<body>
<script language="javascript" type="text/javascript">
    function showtip() {
        document.getElementById("tooltip").style.display = "block";
    }
    function hidetip() {
        document.getElementById("tooltip").style.display = "none";
    }
</script>
<div style="overflow: auto; position: absolute; top: 0px; bottom: 0px; min-width: 945px; background-color: blue">

<p onmouseover="javascript:showtip();" onmouseout="javascript:hidetip();">ping</p>
</div>
<div id="tooltip" style="display: none;" >
<h3></h3>
<div class="body">something</div>
<div class="url" />
</div>
</body>
</html>

(Basically just the tooltip div inserted manually, and changing display through plain old JavaScript).