overflow hidden problem in IE : with fixed height & width!

**Fre420** · Oct 29, 2007 08:49

Hi all,

I got a small rendering problem in IE.
I got a fixed width/height div, with an ul with floated li's in it.
The ideal situation would be that that div did an overflow hidden on the ul.

it works perfectly on Firefox, but not on IE.
most solutions about solving overflow hidden problems in IE are about giving the overflow hidden element a fixed width & height.
but as you can see ... it doesn't solve the problem.
I also tried to do this on the ul, giving it an overflow hidden (as it also has a fixed width & height), but still problems in IE.

can somebody guide me thrue this problem ?

link to the example :
http://entity-webdesign.be/mio/finis...e-gallery.html

html code :

Code:

<div id="listing_list" class="image_thumbs">
  <ul id="lightboxlijstblok">
    <li>
      <a href="" title="Mio C520 &amp; C520t - Image 1 title"><img src="img/galleries/C520-C520t/image-1-thumb.jpg" alt="Mio C520 &amp; C520t - Image 1 title" /></a>
    </li>
    <li>
      <a href="" title="Mio C520 &amp; C520t - Image 2 title"><img src="img/galleries/C520-C520t/image-2-thumb.jpg" alt="Mio C520 &amp; C520t - Image 2 title" /></a>
    </li>
    <li>
      <a href="" title="Mio C520 &amp; C520t - Image 3 title"><img src="img/galleries/C520-C520t/image-3-thumb.jpg" alt="Mio C520 &amp; C520t - Image 3 title" /></a>
    </li>
    ....
  </ul>
</div>

css code

Code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }


#listing_list.image_thumbs { width:288px; height:414px; padding:0; border:1px solid #ccc; border-bottom:none; border-top:none; overflow:hidden;}
#listing_list.image_thumbs ul { width:288px; height:414px; margin:0; padding:0; }
#listing_list.image_thumbs li { width:134px; height:73px; margin:5px; padding:0; float:left; display:inline; }
#listing_list.image_thumbs li a {  width:132px; height:71px; padding:0; margin:0; display:block; background:none; }
#listing_list.image_thumbs li a img { width:132px; height:71px; }
#listing_list.image_thumbs li a:link, #listing_list.image_thumbs li a:visited { border:1px solid #ddd; }
#listing_list.image_thumbs li a:hover, #listing_list.image_thumbs li a:active { border:1px solid #999; }
#listing_list.image_thumbs li.selected a:link, #listing_list.image_thumbs li.selected a:visited { border:1px solid #999; }
#listing_list.image_thumbs li.selected a:hover, #listing_list.image_thumbs li.selected a:active { border:1px solid #444; }

thnx in advance

**Paul O'B** · Oct 29, 2007 17:30

Hi,

In IE elements that have position:relative applied to them will become visible in a container where overflow:auto has been set (yet another IE bug).

if you remove the position:relative from here the overflow will be hidden.

Code:

#listing_list li a {  height:32px; width:218px; padding:4px 4px 4px 54px; display:block; position:relative; text-decoration:none; font:normal 11px/16px Arial, Helvetica, sans-serif; background-position:10px 3px; background-repeat:no-repeat; }

Note that the above line appears twice in your code so you will have to do that twice!

Also note that you will run into problems in ie6 and under with this code:

Code:

#listing_list.image_thumbs ............

IE6 doesn't understand dot notation like that and what's worse is that it gets it only half right which may make you think that it is working but its not. It inly applies the first set of rules with those names that is sees but if you add another set with different classnames then IE6 and under ignore them.

Heres a demo that you can use to understand what I mean.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#test.red {background:red;}
#test.blue{background:blue}
#test.green {background:green;}
</style>
</head>
<body id="test" class="red">
<!-- <body id="test" class="green"> -->
<!-- <body id="test" class="blue"> -->
<h1>Ie6 Classname bug</h1>
<p>Only the first #test.classname will affect this page. e.g. #test.red</p>
<p>Change the classname in the body and you will see that no style gets applied. Or alternatively change the order of the stylesheet and the rule that comes first is the one that gets applied.</p>
</body>
</html>

The only viable solution is not to concatenate using the dot notation format and find other means of doing what you require (e.g by adding the id to a parent and the classname to a child etc.)

Hope that helps

**Fre420** · Oct 30, 2007 03:51

Originally Posted by Paul O'B

Note that the above line appears twice in your code so you will have to do that twice!

Also note that you will run into problems in ie6 and under with this code:

Code:

#listing_list.image_thumbs ............

IE6 doesn't understand dot notation like that and what's worse is that it gets it only half right which may make you think that it is working but its not. It inly applies the first set of rules with those names that is sees but if you add another set with different classnames then IE6 and under ignore them.

damn, I didn't knew that & I use it so much !

thnx again for the help Paul O'B, haven't tested it yet, but as always I'm sure it'll work fine (like every answer I got from you)

cheerz, Fré

**Fre420** · Oct 30, 2007 04:40

Originally Posted by Paul O'B

Code:

#listing_list.image_thumbs ............

IE6 doesn't understand dot notation like that and what's worse is that it gets it only half right which may make you think that it is working but its not. It inly applies the first set of rules with those names that is sees but if you add another set with different classnames then IE6 and under ignore them.

Hey Paul O'B, how is this bug called, where can I find more info on it?
it only applies to classes on an ID, or also double classes?

**Paul O'B** · Oct 30, 2007 08:31

or also double classes?

Yes it applies to double classes as well unfortunately (it's fixed in IE7 though).

I probably documented it first in the forums years ago but others have also documented it.

http://www.quirksmode.org/bugreports...lassnames.html
http://sonspring.com/index.php?id=102
http://www.ryanbrill.com/archives/mu...-classes-in-ie

User Tag List

Thread: overflow hidden problem in IE : with fixed height & width!

Thread Tools

Display

overflow hidden problem in IE : with fixed height & width!

Bookmarks

Bookmarks

Posting Permissions