|
|
Posted by Deephay on 09/06/07 03:51
On Sep 6, 3:43 am, Ben C <spams...@spam.eggs> wrote:
> On 2007-09-05, Deephay <tudo...@gmail.com> wrote:
>
> > On Sep 5, 5:23 pm, Ben C <spams...@spam.eggs> wrote:
> [...]
> > I feel CSS behaves oddly in Firefox, according to CSS spec:
>
> > "The border box of a table, a block-level replaced element, or an
> > element in the normal flow that establishes a new block formatting
> > context (such as an element with 'overflow' other than 'visible') must
> > not overlap any floats in the same block formatting context as the
> > element itself."
>
> > But why does the middle column actually overlapped with them?
>
> Because it doesn't establish a new block formatting context, it's just a
> normal block-level element.
>
> Only some block boxes start "block formatting contexts"-- floats, table
> cells, positioned things, things with overflow other than visible.
>
> You could actually use this to solve your problem, and I almost
> suggested it the first time.
>
> Note that this particular thing has only very recently been tightened up
> in the CSS 2.1 spec. It used to say something like "browsers may make
> block formatting context narrower when there are floats in the way".
>
> Now it says "must" and is altogether clearer about the whole thing.
>
> Try this, then try commenting out overflow: hidden and reloading:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/REC-html40/strict.dtd">
> <html>
> <head>
> <title>Test Page</title>
> <style type="text/css">
> div
> {
> border: 2px solid black;
> }
> .left
> {
> float: left;
> background-color: pink;
> width: 25%;
> height: 300px;
> }
> .right
> {
> float: right;
> background-color: palegreen;
> width: 25%;
> height: 300px;
> }
> .middle
> {
> overflow: hidden;
> background-color: blue;
> height: 400px;
> }
>
> </style>
> </head>
> <body>
> <div class="left"></div>
> <div class="right"></div>
> <div class="middle"></div>
> </body>
> </html>
Hi Ben,
Thanks, I thought the initial value of overflow is not visible, but it
is. It is now matches my need (at least in Firefox).
Another thing:
I think Firefox does not handle CSS correctly, if you add a "width:
100%;" for the middle column, the
middle column will overlap with the right float, which is not correct
for that case since "overflow: hidden"
makes the middle column established a new block formatting context.
Cheers.
[Back to original message]
|