Francky, Thanks for all your help (and Nick's), I've got a lot further than before, but for the life of me I cannot understand why certain things work in FF but not IE and visa versa. I know there are bugs, but it seems to make no sense. IE is now a real mess, but FF is a lot better!
I've managed to get the outer boarder to encompass 3 out of the four sides, following your instructions (I hope), but for some reason the left hand boarder just wont move to the bottom of the box. Also, for some reason the top navigation doesn't work any more! I can see why people going from Table layouts to CSS want to use Absolute positioning, at least it makes sense! If you get chance to look again, I'd be very grateful. Pete -----Original Message----- From: francky [mailto:[EMAIL PROTECTED] Sent: 08 August 2006 22:18 To: Nick Fitzsimons Cc: [EMAIL PROTECTED]; css-d@lists.css-discuss.org Subject: Re: [css-d] Sliding door rounded corner boxes 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=htt p%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-boxbord er.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-playgar den-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/
