Double "padding" in IE6 - no float involed

HTML & CSS
1

Hello,

in my lightbox I get strange right “padding” in ui-lightbox-innerContainer in IE6 and only in this browser.
Take a look at this screenshot:

You can test this out here:
http://rrh.vot.pl/example/example.html

There is Firebug Lite included there.

I use no floats so I can’t figure out how to fix it - hope you can help me! :slight_smile:

2

Paul O’B: now it works! Thanks buddy! :slight_smile:

3

That was only for quirks mode, where IE6 acts as if it were IE5. Anyone trying to support IE5 is a glutton for punishment, who should be given a wide berth by those not into the S&M scene. :wink:

cheers,

gary

4

Hi,

IE6 takes the padding into account in the 100% absolute width of your bottombar and stretches the parent.

Also reduce the margin/padding on html to allow the lightbox to center properly. Add padding/margin to the thumbnails themselves to move them away from the edge.

Use this:


body{margin:0;padding:0}/* fixes central position offset.
* html #ui-lightbox-bottombar {    
    padding:5px 0;
    margin:0;
}
5

I suspect, not tested, that the offset is taken not from the body edge, but from the right edge of the thumbnails, and that it is not a doubling, but is 100px apparent added offset.

I’m not enamored of the light box paradigm, so have little info as to its methods, especially as implemented with jQuery libraries.

Sorry I can’t be of more help, but that might give you a new clue toward debugging.

cheers,

gary

6

I don’t know if it is of any influence but In older IE browsers it was needed to set text-align center for the body tag to realy center the content.