On Thu, Jan 19, 2012 at 11:42 AM, Ghodmode <ghodm...@ghodmode.com> wrote: > On Thu, Jan 19, 2012 at 9:38 AM, BJ Novack <b...@ninjawebservices.com> wrote: >> I've been banging my head against this for too long. Why does IE8 drop the >> div class="checkout-progress" and everything below it right to the bottom of >> the dang page? I've tried taking my clearing fix of overflow:auto off that >> div, I've tried assigning a width to the page content as is in the IE7 >> stylesheet, I've tried narrowing the elements within the page content for >> IE8 . . . and a bunch of other things that had no hope of working, like all >> my old IE6/7 and haslayout hacks, but I tried 'em anyway. No love. >> >> Test case here: >> >> http://doneinstyle.com/test/oaktreetest2/index.htm > > IE9 does it too. > > It looks like the border on the div.checkout-progress is making it > wider than its container and then wrapping it around sidebar_right.
* correction... not wider than its container, just wider than the horizontal space allocated for it by the padding on its container. > If you take off the property width:100% it fixes it. Unless they're > floated or have a fixed width, DIVs take up the available width by > default. By giving it a fixed width (100%), the width of the block > itself was 100%, then the borders added to that. Now that I look at it, my question isn't why does the element move to the bottom in IE, but why doesn't it in Firefox? The effect is the same: the div.checkout-progress is wider than expected because of the borders and that makes it overlap (underlap?) with the sidebar. So it seems like moving it below the sidebar should be the correct behavior. If I give the #sidebar_right a background-color in Firebug, it cuts off the right end of the div.checkout-progress and makes the problem easier to see. > -- > Ghodmode > http://www.ghodmode.com/blog > > >> Actual code from here: >> http://oaktreehomeandgarden.co.uk/shop/ >> >> It happens when you view the shopping cart. >> >> Test page validates at W3 for both html and css (though there is some jquery >> css generated by the cart that doesn't validate, and the actual cart >> generates some unencoded ampersands in URLs.) >> >> All help appreciated greatly. >> >> -- >> Best regards, >> BJ >> >> >> http://ninjawebservices.com >> mailto:b...@ninjawebservices.com ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
