Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

    Code:
    <!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.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Try removing the div you call #detailpane from your HTML.

  • #3
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    And after that add this to div.myForm

    Code:
    padding: 10px;
    That will make it look somewhere near what you had before.

  • #4
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oops, missed your second post by a few seconds, thank you, going to try it.

  • #6
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #7
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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.

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by artfultheory View Post
    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:
    Code:
    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.

    This triggers the bug:
    Code:
    div.selectList a:hover { background-color: maroon; }
    This triggers the bug:
    Code:
    div.selectList a:hover { background-position: 0 0; }
    This does not trigger the bug:
    Code:
    div.selectList a:hover { color: maroon; }

  • #9
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Working Code

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

    Code:
    <!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>
    Last edited by artfultheory; 07-02-2007 at 06:12 AM. Reason: removed irrelevant stylesheet links


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •