SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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é

  4. #4
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

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