IE6 :hover { background-color } resizes, hides my scrollbar

artfultheory

07-01-2007, 09:53 PM

I'm sure as usual I'm the cause of my own pain, and as usual, the story begins "So, in IE6 I have this nicely formatted..."

... scrollable selection list. However, after I've hovered any of list items, the list width expands and the scrollbar gets clipped off.

<!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>
<style>
body { font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif; font-size: 9pt; }
div.myForm { width: 15em; background-color: beige; }
div.detailPane { margin: 1em; }
div.selectList { background-color: white; border: solid 1px black; width: 100%; height: 4em; overflow: scroll; overflow-x: hidden; }
div.selectList a { padding-left: .2em; white-space: nowrap; color: Black; display: block; text-decoration: none; }
div.selectList a:hover { background-color: Maroon; color: White; }
</style>
</head>
<body>
<div class="myForm">
<div class="detailPane">
Hovering over the list hides the scrollbar in IE6
<div class="selectList">
<a href="">test1</a>
<a href="">test2</a>
<a href="">test3</a>
<a href="">test4</a>
</div>
</div>
</div>
</body>
</html>

Any suggestions as to either a fix or better overall approach would be appreciated.

BODY style isn't relevant to the bug.
.MYFORM style isn't relevant to the bug, but I'll need an outer positioning div in my final solution.
.DETAILPANE { PADDING } is required for the bug (MARGIN has the same problem).
Removing OVERFLOW-X changes the bug to annoying flashing (and makes IE do other funky stuff depending on container sizes).
Removing :HOVER { BACKGROUND-COLOR } removes the bug, but I'd sure like that effect without resorting to javascript.

I've found posts that seem to be related, but they assume I have a lengthy history of dealing with IE "hasLayout" bugs.

My original code was actually wrapped in UL/LI, but I've stripped them for the sake of brevity and this shows the same bug. Just mentioning it to keep the flames down to the ones I actually deserve.

Jutlander

07-01-2007, 10:08 PM

Try removing the div you call #detailpane from your HTML.

Jutlander

07-01-2007, 10:13 PM

And after that add this to div.myForm

padding: 10px;

That will make it look somewhere near what you had before.

artfultheory

07-01-2007, 10:14 PM

Thanks for your reply, Jutlander. Yes, that will remove the display problem, but it also removes the padding/margin, squashing my list box up against whatever container it's in. Would you please recommend an alternate way to pad my listbox?

artfultheory

07-01-2007, 10:14 PM

oops, missed your second post by a few seconds, thank you, going to try it.

artfultheory

07-01-2007, 10:16 PM

Whoa! Magic! Thanks!

I suppose I have to understand about how IE reflows documents after they are loaded and all that jazz to understand what happened there?

artfultheory

07-01-2007, 10:56 PM

Ok, I'm guessing here, but playing around a little more with the code you recommended, the fix works because...
1. IE calculates the width of the scroll/div properly when it first draws.
2. Upon redraw, it calculates it from the nearest parent with "hasLayout".

Because this is an ASP.NET UserControl (.ASCX file), I want:

<div class="aspxpage">
<div class="ascxpage">
Various text and controls
<div class="selectList">Here's the buggy list contents</div>
</div>
</div>

And I don't want to hardcode the DIV size in ASCXPAGE, only its PADDING.
So to make what Jutlander provided me (thanks again), I've now coded in ".ASCXPAGE { WIDTH: 100% }".

Does this make sense? Did I address the problem, or is it going to bite me in the *bleep* again?

Scratch that, it must be wrong because now it looks wrong in FF.

koyama

07-02-2007, 02:18 AM

Ok, I'm guessing here, but playing around a little more with the code you recommended, the fix works because...
1. IE calculates the width of the scroll/div properly when it first draws.
2. Upon redraw, it calculates it from the nearest parent with "hasLayout".
Thanks for informing us about this bug in IE6. It seems that you're right.

As you suggest yourself, triggering hasLayout on .detailPane would fix the issue too:

div.detailPane { margin: 1em; zoom: 1; }

Also, not any styles for the a:hover can trigger the bug. This thing is known from the IE Guillotine bug too (http://www.positioniseverything.net/explorer/guillotine.html).

This triggers the bug:

div.selectList a:hover { background-color: maroon; }

This triggers the bug:

div.selectList a:hover { background-position: 0 0; }

This does not trigger the bug:

div.selectList a:hover { color: maroon; }

artfultheory

07-02-2007, 06:06 AM

Thanks, koyama, "zoom: 1", new tool in my belt! here's the working code, for those who stumble here...

<!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>
<style type="text/css">
body { background: #FFFFCC; font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif; color: Black; }
table, caption, body, ul { font-size: 9pt; margin: 0; padding: 0; }
div.container { zoom: 1; background-color: Silver; padding: 1em; }
ul.listBox { width: 100%; border: solid 1px black; background-color: Beige; height: 5em; overflow: scroll; overflow-x: hidden; }
ul.listBox a { padding-left: .2em; white-space: nowrap; display: block; text-decoration: none; color: black; }
ul.listBox a:hover { background-color: navy; color: white; }
</style>
</head>
<body>
<div class="container">
<ul class="listBox"><li><a href="">Item1</a></li><li><a href="">Item2Item2Item2Item2 Item2Item2Item2Item2</a></li><li><a href="">Item3</a></li><li><a href="">Item4</a></li><li><a href="">Item5</a></li></ul>
</div>
</body>
</html>