Sent by francky on 8 August 2006 22:10
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-REMOVED]]
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/
