Two display problems between IE and FF

[Alan Silver]

Hello,

The latest incarnation of my troubles can be seen at
www.kidsinaction/fd3/x.html - both HTML and CSS validate. I have two
problems with it...

1) If you view this in FF, quite often the block of links on the left
break out of the white box and extend below it, leaving the footer stuck
out in grey space. To see this, make the browser window shorter, and at
some point a gap will appear between the white box and the green footer
(which is supposed to be inside it). I would like all of the content to
stay within the white box. IE shows this as I want it.

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 imagine that much of this is caused by my inexperience, so any tips
would be greatly appreciated. I would like to avoid using hacks as much
as possible, and try and fix these problems by improving my CSS if that
can be done.

TIA

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

[xram]

The link you gave doesn't work for me, but hearing your problems
perhaps this article will be of help to you:
http://positioniseverything.net/easyclearing.html

[Alan Silver]

In article <11**********************@38g2000cwa.googlegroups. com>, xram
<de************@gmail.com> writes

The link you gave doesn't work for me,
Aaaaaaaaaaaaargh!!

Harumph, the link should have been:-

http://www.kidsinaction.org.uk/fd3/x.html
but hearing your problems
perhaps this article will be of help to you:
http://positioniseverything.net/easyclearing.html

Hmm, I've read that one, but don't think it addressed this issue. That
article discussed the problem of what happens when a container contains
floated elements and there aren't any cleared elements after. That's not
my problem as I have a #footer div that has clear set to "both." That
seems to be the source of the problem.

Anyway, now I gave you the right URL, please could you have a look and
see what you think. Thanks

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

[VK]

Alan Silver wrote:

1) If you view this in FF, quite often the block of links on the left
break out of the white box and extend below it, leaving the footer stuck
out in grey space. To see this, make the browser window shorter, and at
some point a gap will appear between the white box and the green footer
(which is supposed to be inside it). I would like all of the content to
stay within the white box. IE shows this as I want it.

I guess I have to comment in this one :-) as I suggested this way
<http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_frm/thread/0eb9968459442c07>

Full disclosure: html <> body container communication is semi-buggy on
FF. If you squeeze the page good enough (lesser than 500px or less,
depending on the content), body seems stop reporting its size properly
to html container. That is the reason of the gap you noticed.
You always can use the "conventional" solution: html and body glued
together and a div as "body holder".
At the rare moment then I use layers instead of table layout I still
prefer my solution better because of the rendering speed, especially on
big pages - because body has the same behavior as table, it renders
upon data arrival, doesn't need to wait for closing </div> or so. Yet
(as you already discoved) the very same thing can be made in N ways in
HTML.

[Alan Silver]

In article <ce**************@nospamthankyou.spam>, Alan Silver
<al*********@nospam.thanx.invalid> writes

Hello,
Update...
The latest incarnation of my troubles can be seen at
www.kidsinaction/fd3/x.html - both HTML and CSS validate.
The correct URL is actually http://www.kidsinaction.org.uk/fd3/x.html
I have two problems with it...
Only one now ;-)
1) <snip>

This was fixed by removing the height from the body element. Not sure
why it was there, but removing it fixed this problem.

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 imagine that much of this is caused by my inexperience, so any tips
would be greatly appreciated. I would like to avoid using hacks as much
as possible, and try and fix these problems by improving my CSS if that
can be done.

TIA

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

[VK]

Alan Silver wrote:

1)

<snip>

This was fixed by removing the height from the body element. Not sure
why it was there, but removing it fixed this problem.

Hah! I did not know that - thanks. In my original variant I wanted the
body container would take all height even if the content is small, that
was the reason of height:100%

(that was a topic of "why width:100% is now useless", so we may skip on
"why height:100% is now useless" or so :-)

[Alan Silver]

In article <11*********************@g10g2000cwb.googlegroups. com>, VK
<sc**********@yahoo.com> writes

Alan Silver wrote:

1) If you view this in FF, quite often the block of links on the left
break out of the white box and extend below it, leaving the footer stuck
out in grey space. To see this, make the browser window shorter, and at
some point a gap will appear between the white box and the green footer
(which is supposed to be inside it). I would like all of the content to
stay within the white box. IE shows this as I want it.
I guess I have to comment in this one :-) as I suggested this way
<http://groups.google.com/group/comp....ring.styleshee
ts/browse_frm/thread/0eb9968459442c07>

Heh heh, nice to see you commenting on your own ideas!! The more I look
at this method, the more I like it. It removes some extraneous markup
that was really only there for the CSS. Your way has the content
directly inside the body, which i far more logical.
Full disclosure:

<snip>

As I commented a short while ago (although your news server may not have
shown the post yet), I fixed this problem simply by removing the height
from the body selector. That fixed it fine.

I'm still stuck on the other problem though (header disappearing in IE),
so if you have any idea about that I would be very grateful.

Thanks for the reply.

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

[VK]

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.
I just don't see any purpose of this clear:both in the footer. Clear
regulates the flow of the /following/ content, and if there is no
content to follow why use it? It doesn't affect anyhow on the layout.

[Alan Silver]

In article <11**********************@j73g2000cwa.googlegroups .com>, VK
<sc**********@yahoo.com> writes

>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. I just don't see any purpose of this clear:both in the
footer. Clear regulates the flow of the /following/ content, and if
there is no content to follow why use it? It doesn't affect anyhow on
the layout.

OK, maybe I misunderstood what clearing does, but I thought that if you
set "clear:both" on an element, it effectively said "make sure you put
me below any floated elements." Now, given that the #footer is supposed
to go right across the bottom, below both the floated elements, I
cleared it.

If I remove that clear from the #footer, then it looks like this...

http://www.kidsinaction.org.uk/fd3/y.html

As you can see, FF makes the height of the body (the immediate parent of
the #footer) only high enough to contain the footer, allowing the
floated links to stick out below the bottom of the body. IE6 shows it as
though the #footer were cleared, as it has a bug that means that
containers get expanded to surround floated elements.

So, any idea how I get the #footer right across the bottom, below both
floated elements? TIA

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

[VK]

Alan Silver wrote:

If I remove that clear from the #footer, then it looks like this...

http://www.kidsinaction.org.uk/fd3/y.html

No it doesn't, you broke something in the layout. Rather than look
what, just take the version x and carefully remove clear:both out. That
gives you (together with height:100% removed):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB"><head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1"><title>Lower DIV layout</title>

<style type="text/css">
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #DDD;
}

body {
margin: 10px auto;
padding: 0;
border: 1px solid #000000;
border-width: 0 1px 1px 1px;
width: 80%;
font: 100% Trebuchet MS, Geneva, sans-serif;
color: #000;
background-color: #fff;
max-width: 1000px;
position: relative;
}

/****** header ******/
#header {
position: absolute;
margin: 0;
padding: 0;
border: 1px solid black;
border-width: 1px 0;
top: 0;
left: 0;
color: #000;
background: rgb(232,241,240);
height: 70px;
width: 100%;
}
#strapline {
text-align: center;
padding: 0 7em 0 0;
width: 25em;
height: 100%;
margin: auto;
}

/****** Page content ******/
#pagecontent {
position: relative;
float: right;
width: 74%;
margin: 70px 0 0 0;
padding: 0 0.9%;
background: #fee;
}

/****** Main section links ******/
#toplevellinks {
color: #000;
background: rgb(0, 146, 142);
border: 1px solid #000;
border-right: 2px solid #000;
margin: 70px 0 0 0;
padding: 0;
float: left;
width: 20%;
font-size: 0.8em;
font-weight: bold;
}
#toplevellinks li {
padding: 0.3em 0.1em 0.3em 0;
border-bottom: 1px solid #000;
margin: 0;
list-style: none;
}
#toplevellinks li a {
display: block;
text-decoration: none;
padding-left: 20px;
color: #fff;
}
#toplevellinks li a:hover, #toplevellinks li a:focus {
background: rgb(0, 146, 142) url(images/arrow.gif) no-repeat center
left;
}
#toplevellinks #currentsection {
color: #000;
background: rgb(132, 186, 178);
}
#toplevellinks #currentsection a:hover {
color: #fff;
background: rgb(132, 186, 178) url(images/arrowlt.gif) no-repeat
center left;
}
#secondlevellinks {
font-weight: normal;
margin: 0;
padding: 0;
border-top: 0;
}
#secondlevellinks li {
list-style: none;
margin: 0.2em 0 0.2em 1em;
padding: 0.1em 0em 0.1em 0;
border-top: 1px solid rgb(0, 146, 110);
border-bottom: none;
}
#toplevellinks #currentsection a.currentpage {
color: #000;
background: rgb(132, 186, 178);
border: 5px solid rgb(0, 146, 110);
border-width: 0 5px;
padding-left: 15px; /* 5px removed to compensate for the 5px left
border added above */
}
#secondlevellinks li a:hover {
background: rgb(132, 186, 178) url(images/arrowlt.gif) no-repeat
center left;
}

/****** footer ******/
#footer {
text-align: center;
font-size: 80%;
width: 100%;
border-top: 1px solid black;
padding: 1em 0 1em 0;
background: #efe;
}
</style></head>

<body>

<div id="pagecontent">
<h1>Stuff and nonsense</h1>
<p>Lorum ipsum fake Latin mumbo-jumbo that I made up and some other
stuff to add a bit of content to the page to make sure it looks like
there's some real content here which there isn't and I can't believe
you've nothing better to do with your time than read this rubbish.</p>
<p>More stuff goes here or at least it will when I've put something
real on the page. I don't know if I ever will 'cos I sem to be spending
most of my life trying to get the CSS to work in IE, but that's another
story - or not.</p>
</div>

<ul id="toplevellinks">
<li id="currentsection"><a href="" class="currentpage">Companies</a>
<ul id="secondlevellinks">
<li><a href="">Companies home</a></li>
<li><a href="">Name check</a></li>
<li><a href="">Prices</a></li>
<li><a href="">Company orders</a></li>
<li><a href="">Xpress service</a></li>
<li><a href="">Off the shelf</a></li>
<li><a href="">LLP</a></li>
<li><a href="">Right to manage</a></li>
<li><a href="">Flat management</a></li>
<li><a href="">Ltd By Guarantee</a></li>
<li><a href="">Community Interest</a></li>
<li><a href="">Sensitive Words</a></li>
<li><a href="">The Package</a></li>
<li><a href="">About Companies</a></li>
</ul>
</li>
<li><a href="">Secretarial</a></li>
<li><a href="">Restoration</a></li>
<li><a href="">Tax advice</a></li>
<li><a href="">Products</a></li>
<li><a href="">Business support</a></li>
</ul>

<div id="header">
<div id="strapline">
<p id="strap">fab header stuff goes here</p>
</div>
</div>

<div id="footer">
<p>footer stuff - real content removed for simplicity</p>
</div>
</body></html>

[Alan Silver]

In article <11********************@38g2000cwa.googlegroups.co m>, VK
<sc**********@yahoo.com> writes

Alan Silver wrote:

If I remove that clear from the #footer, then it looks like this...

http://www.kidsinaction.org.uk/fd3/y.html

No it doesn't, you broke something in the layout. Rather than look
what, just take the version x and carefully remove clear:both out. That
gives you (together with height:100% removed):

Beg to differ, but all I did was copy the previous version and remove
the height:100% and clear:both. That's what I posted and that's what you
had in your reply. I ran the two through diff and (aside from whitespace
differences) they were exactly he same. Moreover, the code you posted
looked exactly like I described in my post.

Did you try the version you posted? I just did and it looked exactly how
I described in my original post. In FF the footer stuff does not clear
the links list, and in IE the header contents don't show. Yours looks
exactly like mine.

Please try again<g>

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

[Tony]

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.

[Alan Silver]

In article <12*************@corp.supernews.com>, Tony
<to****@dslextreme.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)

[Tony]

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]

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.

[Alan Silver]

In article <12*************@corp.supernews.com>, Tony
<to****@dslextreme.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)

[Alan Silver]

In article <El**************@nospamthankyou.spam>, Alan Silver
<al*********@nospam.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)

[Alan Silver]

In article <El**************@nospamthankyou.spam>, Alan Silver
<al*********@nospam.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)

[Alan Silver]

In article <gN**************@nospamthankyou.spam>, Alan Silver
<al*********@nospam.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)

[Tony]

Alan Silver wrote:

In article <El**************@nospamthankyou.spam>, Alan Silver
<al*********@nospam.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.

[Tony]

Alan Silver wrote:

In article <El**************@nospamthankyou.spam>, Alan Silver
<al*********@nospam.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.

[Alan Silver]

In article <12*************@corp.supernews.com>, Tony
<to****@dslextreme.WHATISTHIS.com> writes

Alan Silver wrote:

In article <El**************@nospamthankyou.spam>, Alan Silver
<al*********@nospam.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.

I thought it might be a new version of the bug, so being the good
citizen I am, I tried reporting it using their bug feature. Boy, what a
waste of time!! I gave up in the end and decided to let someone who has
more hours spare than me work out how to report a bug!!

As I mentioned in another post, I did work around the problem by moving
the header below the footer in the HTML. This isn't ideal, but it's not
such a terrible compromise, and it seems to work in all browsers.

Thanks for the reply.
Ta ra

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