Eystein Mack Alnæs wrote: > The page works in Safari2, Firefox1.5 & Opera8, but the IEs breaks > the layout in both side columns. I have tried to work around the box- > model problem, but still arent quite there. I am especially > interested in a solution that lets the user increase the font-size > without breaking the layout.
> http://www.eystein.no/vimenn/ You have a 'part-float' construct already. Now, make it an 'all-float' construct, which is something even IE/win understands... :-) .column-two { background: #999 url(../../Media/Common/column_fade.jpg) left bottom repeat-x; padding-bottom: 65px; margin: 0 -10px 0 0; float: left; width: 128px; } .column-three { background: #999 url(../../Media/Common/column_fade.jpg) left bottom repeat-x; padding-bottom: 65px; margin: 0 0 0 -10px; float: right; width: 188px; } ...all browsers will be happy with that one. The negative backside margin (-10px) is just a precaution - in case something should push IE/win's broken box-model too hard at a later date... :-) Now, the basic additions for IE/win... @media screen { * html .column-two * { width: 128px; widt\h:120px; } * html .column-three * { width: 188px; widt\h:180px } * html .column-two *,* html .column-three * { float: left; margin: 0; position: relative; overflow: hidden } * html .column-two * *,* html .column-three * * { float: none; width: 99.7%; overflow: visible; } } ...this "rule" will control width and overflow in IE/win for all elements down the columns, and rearrange the "rule" for elements nested further in. A simple trick that only works when stuff is supposed to fill the columns in width, so you may have to specify any deviation from that "rule" to avoid "stretching". A bit of fine-tuning is needed at your end if you want both IE5+ and IE6 to appear close to identical. IE5.0 is not perfect on those lists yet, and I don't have IE5.5 available for checking. --- Note: if at all possible, put all IE/win styles inside the same @media wrapper for better organizing of hacks. --- The original layout - with the above additions - can take a lot of stress and will not break when font-resizing is applied i IE/win or other browsers. It will however hide stuff in IE/win and let it overflow in other browsers, if you don't make sure text can wrap. Should be no problem when content is added correctly. All tested in Opera8.5/9prev1, Firefox1.5, Safari1.2.4, IE6 & IE5.0. IE/Mac got the columns right, but is missing some other stuff and navigation. regards Georg -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
