Two display problems between IE and FF

VK wrote:

Alan Silver wrote:

I'm still left with the second problem though (see below) and would
really appreciate any help. I'm pretty sure this is not the peekaboo bug
as I tried the usual suggestions for that and none of them helped.

The problem appears in IE6 and IE7, but not in FF 1.0.7 or Opera 8.54

Any ideas? TIA

2) If you look at the page in IE, the header section does not have its
content displayed. In FF it shows up fine. I have discovered that the
problem is caused by having "clear:both" in the #footer. I have no idea
why the one affects the other, but it does. If I remove this line from
the CSS, then IE shows the header correctly, but (oddly) still has the
footer clearing both other bits. FF does not have the footer clearing,
and displays it in the little space between the links and the main
content. How can I have it so that the footer appears cleared below the
links and content, but does not cause the header content to disappear?

I have no idea why IE does that, I saw some mention of "disappearing"
content when clear is used too extensively. So me real CSS expert may
comment on that.

Disappearing content when a clear follows a float in IE = "Peekaboo bug"
See http://www.positioniseverything.net/.../peekaboo.html

But this doesn't look like the peekaboo bug.

Doing a little digging:

First, remove position:absolute from #header - this will allow the
header to be visible. It appears at the bottom of the page, just above
the footer.

Then move the header <div> up to the top of the page, just before <div
id="pagecontent">

For #pagecontent, change margin: 70px 0 0 0; to margin: 0px;

Do the same for #toplevellinks

I did exactly those changes & it works fine for me. There IS a
difference of 1 or 2 pixels between the old layout & new in Firefox -
but that's easily fixed by tweaking the borders.

In article <1276ihtbhkdd1ee (AT) corp (DOT) supernews.com>, Tony
<tony23 (AT) dslextreme (DOT) WHATISTHIS.com> writes

Disappearing content when a clear follows a float in IE = "Peekaboo
bug"
See http://www.positioniseverything.net/.../peekaboo.html

But this doesn't look like the peekaboo bug.

No, I came to that conclusion.

Doing a little digging:

Dig away, but be prepared to find some dirt!!

First, remove position:absolute from #header - this will allow the
header to be visible. It appears at the bottom of the page, just above
the footer.

Then move the header <div> up to the top of the page, just before <div
id="pagecontent"

OK, stop right here. The reason I used absolute positioning for the
header was so that I could put the HTML down the bottom of the page. I
need this for various reasons, including search engine optimisation.

For #pagecontent, change margin: 70px 0 0 0; to margin: 0px;

Do the same for #toplevellinks

I did exactly those changes & it works fine for me. There IS a
difference of 1 or 2 pixels between the old layout & new in Firefox -
but that's easily fixed by tweaking the borders.

Yup, but that doesn't solve my problem. I really need to have the header
stuff where it was, but have IE display it.

Thanks for the reply, and ideas how I can fix this without moving the
HTML?

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver wrote:

OK, stop right here. The reason I used absolute positioning for the
header was so that I could put the HTML down the bottom of the page. I
need this for various reasons, including search engine optimisation.

Not sure I understand that, but OK...

For #pagecontent, change margin: 70px 0 0 0; to margin: 0px;

Do the same for #toplevellinks

I did exactly those changes & it works fine for me. There IS a
difference of 1 or 2 pixels between the old layout & new in Firefox -
but that's easily fixed by tweaking the borders.


Yup, but that doesn't solve my problem. I really need to have the header
stuff where it was, but have IE display it.

Thanks for the reply, and ideas how I can fix this without moving the HTML?

Not really - have you tried playing around with the z-index? That's the
only thing I can think of offhand...

Tony wrote:

Yup, but that doesn't solve my problem. I really need to have the
header stuff where it was, but have IE display it.

Thanks for the reply, and ideas how I can fix this without moving the
HTML?

OK -

it turns out that it IS the peekaboo bug - just a really insidious
version of it. Removing the "clear:both" from the footer causes it to
display correctly in IE (which is why I say it is peekaboo).

Obviously, that won't do for Firefox, which needs the clear:both so the
footer displays in the right place.

Is there any reason you can't/won't use a hack? Because I was able to
fix this by using a simple hack:

From #footer, remove 'clear:both;'

After the close of #footer, add the following:

html>body #footer {
clear: both;
}

Tested & works perfectly in IE6, Firefox, Netscape (7 I think) and Opera 8.

In article <127763f1p85amc8 (AT) corp (DOT) supernews.com>, Tony
<tony23 (AT) dslextreme (DOT) WHATISTHIS.com> writes
<snip>

it turns out that it IS the peekaboo bug - just a really insidious
version of it. Removing the "clear:both" from the footer causes it to
display correctly in IE (which is why I say it is peekaboo).

Oh, I assumed that as it didn't seem to respond to any of the usual
fixes for peekaboo that it wasn't. Wrong again Silver!!

Obviously, that won't do for Firefox, which needs the clear:both so the
footer displays in the right place.

Is there any reason you can't/won't use a hack?

No, I just try to keep them as a last resort as they are a fragile way
of doing things.

Because I was able to fix this by using a simple hack:

From #footer, remove 'clear:both;'

After the close of #footer, add the following:

html>body #footer {
clear: both;
}

Tested & works perfectly in IE6, Firefox, Netscape (7 I think) and Opera 8.

Thanks, I'll check it in IE7 as that is where the danger may lie. Most
of these hacks come from poor support for various CSS features in IE.
Given that IE7 is going to fix some, but not all of these, this hack is
only going to keep working if IE7 either doesn't support the ">"
operator (which I think it does), or if it doesn't have peekaboo (which
I don't know).

Anyway, I'll try it out and see. Thanks again.

--
Alan Silver
(anything added below this line is nothing to do with me)

In article <El66gbfldBdEFwxa (AT) nospamthankyou (DOT) spam>, Alan Silver
<alan-silver (AT) nospam (DOT) thanx.invalid> writes

Tested & works perfectly in IE6, Firefox, Netscape (7 I think) and Opera 8.

Thanks, I'll check it in IE7 as that is where the danger may lie. Most
of these hacks come from poor support for various CSS features in IE.
Given that IE7 is going to fix some, but not all of these, this hack is
only going to keep working if IE7 either doesn't support the ">"
operator (which I think it does), or if it doesn't have peekaboo (which
I don't know).

And it failed!! Ho hum. It seems that IE7 still suffers from peekaboo,
although it now supports ">".

Any other ideas? Thanks again

--
Alan Silver
(anything added below this line is nothing to do with me)

In article <El66gbfldBdEFwxa (AT) nospamthankyou (DOT) spam>, Alan Silver
<alan-silver (AT) nospam (DOT) thanx.invalid> writes

this hack is only going to keep working if IE7 either doesn't support
the ">" operator (which I think it does), or if it doesn't have
peekaboo (which I don't know).

OK, to follow up on my previous post (which hasn't shown up here yet),
all the reports I could find on the web indicate that IE7 *has* fixed
peekaboo, which means either they are wrong, or this bug isn't peekaboo
after all.

It is possible that I have discovered a hitherto undiscovered example of
peekaboo and that IE7 hasn't fixed it, but that seems unlikely.

So, any further suggestions? I know IE7 isn't out yet, but I can't
develop a new site now, knowing that it won't work in IE7. Thanks again.

--
Alan Silver
(anything added below this line is nothing to do with me)

In article <gNzz69gDAGdEFwn1 (AT) nospamthankyou (DOT) spam>, Alan Silver
<alan-silver (AT) nospam (DOT) thanx.invalid> writes

It is possible that I have discovered a hitherto undiscovered example
of peekaboo and that IE7 hasn't fixed it, but that seems unlikely.

Well, to follow up to myself again (getting a bit lonely here!!), I
discovered that by moving the #header div below the #footer div in the
HTML, the problem went away. Given that #header is positioned
absolutely, it should be taken out of the flow completely, so this looks
like a rendering bug in IE, even in IE7.

Anyway, hope this is useful to someone.

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver wrote:

In article <El66gbfldBdEFwxa (AT) nospamthankyou (DOT) spam>, Alan Silver
alan-silver (AT) nospam (DOT) thanx.invalid> writes

Tested & works perfectly in IE6, Firefox, Netscape (7 I think) and
Opera 8.

Thanks, I'll check it in IE7 as that is where the danger may lie. Most
of these hacks come from poor support for various CSS features in IE.
Given that IE7 is going to fix some, but not all of these, this hack
is only going to keep working if IE7 either doesn't support the ">"
operator (which I think it does), or if it doesn't have peekaboo
(which I don't know).

And it failed!! Ho hum. It seems that IE7 still suffers from peekaboo,
although it now supports ">".

Any other ideas? Thanks again

I have plenty of other ideas, but most of them involve doing things that
even Jack Bauer would consider inhuman to the programmers at Microsoft.

You COULD just ignore IE7 for now & hope they finally fix it. (yeah, right)

About the only other thing I can think of is to use conditional
statements to define styles depending on the browser.

Alan Silver wrote:

In article <El66gbfldBdEFwxa (AT) nospamthankyou (DOT) spam>, Alan Silver
alan-silver (AT) nospam (DOT) thanx.invalid> writes

this hack is only going to keep working if IE7 either doesn't support
the ">" operator (which I think it does), or if it doesn't have
peekaboo (which I don't know).

OK, to follow up on my previous post (which hasn't shown up here yet),
all the reports I could find on the web indicate that IE7 *has* fixed
peekaboo, which means either they are wrong, or this bug isn't peekaboo
after all.

I think that you may have found an undocumented variety of Peekaboo -
normaly, peekaboo shows up when you have a float followed by (and
touching) a clear. In this case, it shows up when you have a
position:absolute followed by & touching a clear. At the very least, I
know it's something I've never heard about before.