Relative box positioning: IE vs FF problem..

#1 August 17th, 2006, 10:55 AM

Hi

Sorry no screen shots or links...I want to achieve the following visual
effect:

I want three boxes to appear on screen, all within a parent box (so 4
in total).

Concerning the three inner boxes, I want them to appear in a two column
format. One box in the left hand column that will contain an image and
the two other boxes stacked one above the other in the right hand
column that will contain text.

Using relative positioning, I can achieve what I want for the three
internal boxes and this works in Internet Explorer (IE) and in FireFox
(FF).

However, when I add the parent box it "correctly" surrounds the
daughter boxes in IE, but appears as a thin strip in FF (i.e. the
daughter boxes hang out of the bottom of this box).

I can't use absolute positioning because I don't know how much text
these will contain, or how big the image will be.

The HTML text is simply three <div/elements embedded within a parent
<div/>.

Any help would be most appreciated in this.

Thanks

Griff

#2 August 17th, 2006, 11:15 AM

Griff wrote:

Quote:

Hi
>
Sorry no screen shots or links...I want to achieve the following visual
effect:
>
I want three boxes to appear on screen, all within a parent box (so 4
in total).
>
Concerning the three inner boxes, I want them to appear in a two column
format. One box in the left hand column that will contain an image and
the two other boxes stacked one above the other in the right hand
column that will contain text.
>
Using relative positioning, I can achieve what I want for the three
internal boxes and this works in Internet Explorer (IE) and in FireFox
(FF).
>
However, when I add the parent box it "correctly" surrounds the
daughter boxes in IE, but appears as a thin strip in FF (i.e. the
daughter boxes hang out of the bottom of this box).
>
I can't use absolute positioning because I don't know how much text
these will contain, or how big the image will be.

Guessing, but would the inner boxes be floated. If so declare width and
height on containing div.

Louise

#3 August 17th, 2006, 11:25 AM

Quote:

Guessing, but would the inner boxes be floated. If so declare width and
height on containing div.
>
Louise

Hi Louise

But...I don't know how big the parent box will need to be, because I
don't know how big the daughter boxes will be.

Give me 10 mins or so and I'll post some example HTML and CSS...

Thanks

Griff

#4 August 17th, 2006, 11:35 AM

Griff schrieb:

Quote:

Give me 10 mins or so and I'll post some example HTML and CSS...

No, post the URL to a minimal example instead.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

#5 August 17th, 2006, 11:35 AM

Okay - here's the tidied up code....The effect in both IE and FF is
that the "daughter" boxes appear below the parent box.

NOTE: if I add [height:5px;] to the CSS for div#Border then it works as
expected in IE, but not in FF. It seems that I'd need to know the
ABSOLUTE height of the parent box, but without knowing the amount of
text of the size of the image I don't see how I can guess at that.

First the HTML

<body >
<div id="Border">
<div id="Left">Left</div>
<div id="Right">
<div id="Top">Top</div>
<div id="Bottom">Bottom</div>
</div>
</div>
</body>

Now the CSS
body
{
margin:0px;
padding:8px;
}

div
{
padding:1em;
margin:1em;
border: solid 1px black;
}

div#Border
{
background-color:#333;
}

div#Left
{
background-color:#555;
position:relative;
float:left;
}
div#Right
{
background-color:#777;
position:relative;
float:right;
}

#6 August 17th, 2006, 12:05 PM

Griff wrote:

Quote:

Okay - here's the tidied up code....The effect in both IE and FF is
that the "daughter" boxes appear below the parent box.
>
NOTE: if I add [height:5px;] to the CSS for div#Border then it works as
expected in IE, but not in FF. It seems that I'd need to know the
ABSOLUTE height of the parent box, but without knowing the amount of
text of the size of the image I don't see how I can guess at that.

<cut markup>

For a more likely approach especially as the generated height of the
left boxes is indeterminate, see
http://www.boclair.com/test/contained-floats.html

Louise

#7 August 17th, 2006, 12:15 PM

Okay - that works in IE but not in FF. I'm using FF 2 beta 1

#8 August 17th, 2006, 12:35 PM

Griff wrote:

Quote:

I want three boxes to appear on screen, all within a parent box (so 4
in total).

Go and read brainjar.com and their article on "css positioning"

(Floats are _meant_ to hang out of the bottom of things, unless you
tell them not to. IE gets things wrong again).

#9 August 17th, 2006, 01:05 PM

Andy Dingley wrote:

Quote:

Griff wrote:
>

Quote:

>I want three boxes to appear on screen, all within a parent box (so 4
>in total).

>
Go and read brainjar.com and their article on "css positioning"
>
(Floats are _meant_ to hang out of the bottom of things, unless you
tell them not to. IE gets things wrong again).

Or check http://www.quirksmode.org/css/clearing.html for a nice compact
decription/solution.

Grtz,
--
Rik Wasmus

#10 August 17th, 2006, 01:05 PM

Griff wrote:

Quote:

Okay - that works in IE but not in FF. I'm using FF 2 beta 1
>

Sorry about that. The file I loaded still had the height uncommented.

See now
http://www.boclair.com/test/contained-floats.html

Louise

#11 August 17th, 2006, 02:25 PM

Rik wrote:

Quote:

Andy Dingley wrote:

Quote:

>Griff wrote:
>>

Quote:

>>I want three boxes to appear on screen, all within a parent box (so 4
>>in total).

>Go and read brainjar.com and their article on "css positioning"
>>
>(Floats are _meant_ to hang out of the bottom of things, unless you
>tell them not to. IE gets things wrong again).

>
Or check http://www.quirksmode.org/css/clearing.html for a nice compact
decription/solution.

I think the quirksmode suggestions is suspect.

There could be no objection to the "old" method of clearing the floats
before closing the containing div but the suggestion to use the overflow
property hack is not a good one in my opinion.

Firefox, for one, treats overflow:hidden (and overflow:visible) as would
be expected; without the containing div having a set or implied height,
its contents cannot be viewed.

As for overflow:auto, who's to know if this will result in some browser
drawing scroll bars.

http://www.w3.org/TR/REC-CSS2/visufx...opdef-overflow

Louise

#12 August 17th, 2006, 02:35 PM

boclair wrote:

Quote:

Rik wrote:

Quote:

>Andy Dingley wrote:

Quote:

>>Griff wrote:
>>>
>>>I want three boxes to appear on screen, all within a parent box
>>>(so 4 in total).
>>Go and read brainjar.com and their article on "css positioning"
>>>
>>(Floats are _meant_ to hang out of the bottom of things, unless you
>>tell them not to. IE gets things wrong again).

>>
>Or check http://www.quirksmode.org/css/clearing.html for a nice
>compact decription/solution.

>
I think the quirksmode suggestions is suspect.

Not ideal by any means, but workable.

Quote:

There could be no objection to the "old" method of clearing the floats
before closing the containing div but the suggestion to use the
overflow property hack is not a good one in my opinion.
>
Firefox, for one, treats overflow:hidden (and overflow:visible) as
would be expected; without the containing div having a set or implied
height, its contents cannot be viewed.
>
As for overflow:auto, who's to know if this will result in some
browser drawing scroll bars.

Well, you as the deisgner usually know. It's a method with several prerequisites
(?). I'll only use it on a container with set by either the container itself or
it's parents, or one set dimension which I know is not going to overflow in that
dimension due to content-dimensions, which I'm in control of.

On a completely unpredictable system (CMS's for third parties etc.), it isn't a
true solution, that's right. If only you yourself will be working on it it will
save you a lot of headache/HTML-clutter.

Grtz,
--
Rik Wasmus

#13 August 17th, 2006, 04:45 PM

On 2006-08-17, Rik wrote:

Quote:

boclair wrote:

Quote:

>>
>As for overflow:auto, who's to know if this will result in some
>browser drawing scroll bars.

>
Well, you as the deisgner usually know.

You do not know; you *cannot* know.

You don't know the size of my browser window, or my font size. You
are making an assumption that is responsible for vast numbers of
badly rendered pages on the WWW.

Quote:

It's a method with several prerequisites (?). I'll only use it on a
container with set by either the container itself or it's parents,
or one set dimension which I know is not going to overflow in that
dimension due to content-dimensions, which I'm in control of.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

#14 August 17th, 2006, 06:15 PM

boclair wrote:

Quote:

I think the quirksmode suggestions is suspect.

That's because of your calm and generous nature.

I think it's a fecking evil bogosity and would have nothing at all to
do with the perverse idea.

What is Bytes?

Popular Articles