473,320 Members | 2,145 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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

Aug 17 '06 #1
13 2450
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
Aug 17 '06 #2
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

Aug 17 '06 #3
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.)
Aug 17 '06 #4
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;
}

Aug 17 '06 #5
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
Aug 17 '06 #6
Okay - that works in IE but not in FF. I'm using FF 2 beta 1

Aug 17 '06 #7

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).

Aug 17 '06 #8
Rik
Andy Dingley wrote:
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.

Grtz,
--
Rik Wasmus
Aug 17 '06 #9
Griff wrote:
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
Aug 17 '06 #10
Rik wrote:
Andy Dingley wrote:
>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.

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
Aug 17 '06 #11
Rik
boclair wrote:
Rik wrote:
>Andy Dingley wrote:
>>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.
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
Aug 17 '06 #12
On 2006-08-17, Rik wrote:
boclair wrote:
>>
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.
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)
Aug 17 '06 #13
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.

Aug 17 '06 #14

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Ken Kast | last post by:
Here's my situation. I have a statically positioned table that has an image in a cell. I also have some layers, defined by absolute-positioned DIVs for some animation. Everything works until I...
2
by: Stephen Weatherly | last post by:
Could anyone please help me with a problem I am having with my table widths??? If I have 2 images within a td tag, but using CSS relative positioning I position one over the top of the second (I...
2
by: Catherine Lynn Wood | last post by:
I need to know how to overlap DIV content within 'relative' associated rendering. I am building div layers in the middle of a page and when I set positioning to absolute in the CSS, it references...
1
by: Wilhelm Kutting | last post by:
Hi i like to make a complex layout with css. All the content is inside a container div. I like to get the following sequence without the css-layout: logo title mainnav content i can only...
3
by: Markus Ernst | last post by:
Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following...
1
by: Fred Nelson | last post by:
Hi: I'm working on one of my first web applications in asp.net 2.0 and I'm having a problem with absolute versus relative positioning of controls that I place on pages that use master pages with...
2
by: nonsensitor | last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out. The first problem is...
3
by: mikewse | last post by:
I have a strange problem where it seems IE is doing the correct layout but Firefox and Safari isn't. I think I'm probably wrong, and there is something in the standards that say behaviour should be...
7
by: Cruelemort | last post by:
All, I have a div in my page that has a set width of 1000px, height of 200px, inside this i declare two more div's, both relatively positioned and floated left, the first is placed to the top...
0
by: slaterino | last post by:
Hi, I am in the process of creating a web site at the following address: http://www.cca-ltd.co.uk/New/en/index.html At the moment when you hover over the navigation links a list appears on the...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.