Nick Fitzsimons wrote: >Pete Home wrote: > > >> I thought I had followed the research to the letter, but I still >>cannot get 'nested' boxes to work. >> >>Basically I want a outline around 2 divs when one of then has a box >>within it. >> >>Here's the code and CSS links; >> >>www.cityboxer.com/gambling/betting.htm and >>www.cityboxer.com/gambling/newcss.css >> >>The outline box seems to work on 3 of 4 sides in ie6 and the inner >>box with the video is correct. In FF1.5 it's a complete mess (even >>though the outline box works, it doesn't encompass the inner divs) >>and the inner box is a complete hash. >> >> >First rule of CSS development: if it looks right in IE6, it's (usually) >broken :-) > > Hi Pete, Agree! ;-)
>Within the inner box you have two divs, "section_content" and "video", >which are floated left and right respectively. When an element is >floated, it is taken out of the normal document flow - in other words, >the block that contains it acts as if it isn't there. _Not_ honouring >this rule is one of the major bugs in IE6, and is one of the primary >reasons why testing in IE6 should only be done after you've got it >looking right in Firefox, Opera, Safari and suchlike standards-compliant >browsers. If you do this then it'll probably look broken in IE6, but >then you can apply various workarounds and hacks to bring IE6 into line. > > Adding just a clearing <div> after closing the <div id="video"> will help all browsers, even IE. :-) >In this case, have a look at: ><http://www.positioniseverything.net/easyclearing.html> >which should help you sort it out. Note that IE7 fixes the float >container bug, so you'll need to check the layout in that, too: if you >have problems, somebody here will help :-) > >Cheers, >Nick. > > The black top bar in the #video background, appearing in FF: this is due to the default margin for the h2 below; IE is (against css-rules) extending the box, so it seems IE = right. But adding a {margin: 0;} is helping, even without collapsing IE. See also source code in: testpage <http://home.tiscali.nl/developerscorner/css-discuss/test-cityboxer.htm>. :-) Greetings, francky btw 1: Check the html-validator <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.cityboxer.com%2Fgambling%2Fbetting.htm> and also the css-validator <http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.cityboxer.com%2Fgambling%2Fnewcss.css> every now and then; there are some errors and typo's (which can give strange effects in one or more browsers). btw 2: You are using quite big images for the corners. A small combined image for the boxborder (743 bytes): http://home.tiscali.nl/developerscorner/css-discuss/images/cityboxer-boxborder.gif and a small one for the video-box (377 bytes): http://home.tiscali.nl/developerscorner/css-discuss/images/cityboxer-blkbox.gif can be enough; with some background positioning all corners can be put in the right place. See for instance: http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-01.htm ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
