nested divs IE7 vs Firefox

geoff · Feb 13, 2007

Dear All,

I have a problem concerning nested divs and table aligning. In FF all
works well, in IE7 the inner div is hidden by its parent! Attached is
a minimal html file displaying the problem. The problem seems to be
the interplay between the "position:relative" and <table
align="right">, since removing either of these results in similar
pages in the two browsers, but not the output I need.

Many thanks in advance,

Geoff.

/------------------------------ minimal example
--------------------------------/

<html>
<body style="background-color:blue;">

<div style="position:absolute;top:54px;left:200px;width:
500px;background-color:black;">
<div style="position:relative;bottom:20px;left:20px;background-
color:white;">

Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text

<table align="right">
<tr><td><div style="width:150px;height:200px;background-
color:red;">hello world</div></td></tr>
</table>

Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text Some text Some text
Some text Some text Some text Some text Some text

</div>
</div>

</body>
</html>

Toby A Inkster · Feb 13, 2007

geoff said:
I have a problem concerning nested divs and table aligning. In FF all
works well, in IE7 the inner div is hidden by its parent!

Have you tried playing around with z-index? It doesn't really explain why
what you observe is happening, but may provide a simple solution.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

Jonathan N. Little · Feb 13, 2007

Dear All,

I have a problem concerning nested divs and table aligning. In FF all
works well, in IE7 the inner div is hidden by its parent! Attached is
a minimal html file displaying the problem. The problem seems to be
the interplay between the "position:relative" and <table
align="right">, since removing either of these results in similar
pages in the two browsers, but not the output I need.

Well you should use <table style="float: right;'> and not deprecated
<table align="right">,

anyway it is not just IE7 but almost all IE's. Funny thing is it almost
works in IE4.0!

Remove the positioning on the table and IE will display it. It appears
to be some version of the classic IE peekaboo bug. (Just love IE!) But
your should post a URL of what your are really trying to do, maybe a way
to simplify what your are doing and get the desired presentation without
the bug.

geoff · Feb 14, 2007

Well you should use said:
<table align="right">,

Thanks for the replies. Unfortunately the same problem exists when I
use style-float instead of align-right!

z-index doesn't have any effect either.

I have posted the example above at the following url

http://www.iam.unibe.ch/~geoff/minimal.html

View it in FF and IE and you'll see the problem.

Jonathan N. Little · Feb 14, 2007

Thanks for the replies. Unfortunately the same problem exists when I
use style-float instead of align-right!

z-index doesn't have any effect either.

I have posted the example above at the following url

http://www.iam.unibe.ch/~geoff/minimal.html

View it in FF and IE and you'll see the problem.

Yes it will. Later in my post I said:

"Remove the positioning on the table and IE will display it. It appears
to be some version of the classic IE peekaboo bug. (Just love IE!) But
your should post a URL of what your are really trying to do, maybe a way
to simplify what your are doing and get the desired presentation without
the bug."

It is most certainly connected to IE's peekaboo bug that is why I
suggested you post a *url* to your whole page so we might find an
alternative way to approach your design problem that may circumvent IE's
bug.

John Hosking · Feb 14, 2007

[Attribution missing for Jonathan N. Little, who wrote:]

Well you should use <table style="float: right;'> and not deprecated
<table align="right">,

Click to expand...

Thanks for the replies. Unfortunately the same problem exists when I
use style-float instead of align-right!

z-index doesn't have any effect either.

I have posted the example above at the following url

http://www.iam.unibe.ch/~geoff/minimal.html

View it in FF and IE and you'll see the problem.

Add width:500px; to the white div. Tested in IE6.

You can also exchange the table in your code:
<table style="float: right;">
<tbody><tr><td><div style="width: 150px; height: 200px;
background-color: red;">hello world</div></td></tr>
</tbody></table>

for *just* a div, and float the *div* right:
<div style="width: 150px; height: 200px; background-color: red;">hello
world</div>

Test. Export styling. Test again. Etc.

Also recommended (by 4 out of 5 wemasters): add doctype for HTML 4.01
Strict. Coats the stomach and settles upset IE.

HTH

Bergamot · Feb 15, 2007

Thanks for the replies. Unfortunately the same problem exists when I
use style-float instead of align-right!

That's because they are handled the same way, especially in quirks mode.

z-index doesn't have any effect either.

z-index only affects positioned elements. Float isn't positioned by default.

http://www.iam.unibe.ch/~geoff/minimal.html

Looks like a variation of the peek-a-boo bug to me. IE6 is badly broken
where it comes to floated elements, but 1 of 2 properties can usually
whip it into shape. You just need to trigger standards mode if you want
results comparable to Firefox or Opera. Use the right DOCTYPE,
preferably HTML 4.01 Strict.

Try adding to the floated element's rules:
position: relative;

If that doesn't work, try adding to the float or its parent container:
zoom: 1;

zoom is proprietary to IE. Other browsers will ignore it, which is very
handy.

For more fun with IE6 bugs, see:
http://www.positioniseverything.net/explorer.html

geoff · Feb 19, 2007

Thanks to everyone who replied.

Geoff.

Neopets coding help	4	Sep 23, 2021
Help needed with thank you message	5	Sep 11, 2021
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
How to have two html audio players on one page?	0	May 3, 2022
Help with my responsive home page	2	Dec 14, 2022
Having trouble centering contents of td ?	3	May 2, 2023
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023

nested divs IE7 vs Firefox

geoff

Toby A Inkster

Jonathan N. Little

geoff

Jonathan N. Little

John Hosking

Bergamot

geoff

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads