I have designed a page which seems to work well in FF2, FF3 and IE7 but breaks up so badly in IE6 that it's hard to see what was intended. I've yet to try any other browsers.
http://www.mull-bed-and-breakfast.co.uk/hmi/pages/bb-sw-mull.html The layout has a header, and two columns. The left ('div#navleft') column is floated left, and the second ('div#txtcol') is alongside it. Txtcol contains a series of structurally identical entries ('div.item') with rounded corners achieved with a combination of background and normal images in header and footer divs within div.item ('div.header1', 'div.footer1'). To get the footer1 correctly placed required a 'clear'. Originally I positioned div#txtcol using a left margin equal to the width of div#navleft, but this meant the 'clear' positioned 'footer1' below 'div#navleft' (though still inside div#txtcol). In other words the first div.item within div#txtcol had exaggerated height. Hence the 'overflow: hidden;' , which creates a new block formatting context (preventing the 'clear' from clearing the float on 'div#navleft'). Curiously FF2, FF3 and IE7 don't seem to mind whether the left margin is 0 or equal to the width of div#navleft (140px). But in IE6 the whole 'div#txtcol' is pushed down below 'div#navleft' so there's a huge gap below the banner, and in this gap appears some background colour either from the page footer ('div#footer') or the 'div#inner' which exists to give faux-column colouring below div#navleft. I'm trying to include some conditional CSS to cope with this, haven't got it right yet. The current CSS for div#txtcol is: div#txtcol { background-color: #F6EFC3; /* primrose */ /* position: relative; top: 0; left: 0px;*/ margin: 0 0 0 0px; padding: 0 0 4px 0; height: auto; overflow: hidden; /* Creates new block formatting context */ } /* Hack to control scope of Clear in div.footer1 (corrects overflow set hidden above) */ * html#txtcol { overflow: visible; height: 1% } I'm still playing with the conditional CSS for IE6, so the exact layout may vary from time to time. Any suggestions, please ? Tim Dawson -- Isle of Mull, Scotland ______________________________________________________________________ css-discuss [EMAIL PROTECTED] 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/
