| Author |
Relative box positioning: IE vs FF problem..
|
|
|
| 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
| |
| boclair 2006-08-17, 6:40 am |
| Griff wrote:
> 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
| |
|
|
> 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
| |
| Johannes Koch 2006-08-17, 6:44 pm |
| Griff schrieb:
> 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.)
| |
|
| 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;
}
| |
| boclair 2006-08-17, 6:44 pm |
| Griff wrote:
> 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
| |
|
| Okay - that works in IE but not in FF. I'm using FF 2 beta 1
| |
| Andy Dingley 2006-08-17, 6:44 pm |
|
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).
| |
|
| Andy Dingley wrote:
> Griff wrote:
>
>
> 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
| |
|
|
| boclair 2006-08-17, 6:44 pm |
| Rik wrote:
> Andy Dingley wrote:
>
> 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/visuf...ropdef-overflow
Louise
| |
|
| boclair wrote:
> Rik wrote:
>
> I think the quirksmode suggestions is suspect.
Not ideal by any means, but workable.
> 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
| |
| Chris F.A. Johnson 2006-08-17, 6:44 pm |
| On 2006-08-17, Rik wrote:
> boclair wrote:
>
> 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.
> 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)
| |
| Andy Dingley 2006-08-17, 6:44 pm |
| boclair wrote:
> 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.
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |