Two display problems between IE and FF

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)

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

In article <1148385685.652886.230110 (AT) 38g2000cwa (DOT) googlegroups.com>, xram
<deephardnfunky (AT) gmail (DOT) 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)

In article <ceyMuZNDlecEFwJb (AT) nospamthankyou (DOT) spam>, Alan Silver
<alan-silver (AT) nospam (DOT) 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)

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.

In article <1148395142.722012.77820 (AT) g10g2000cwb (DOT) googlegroups.com>, VK
<schools_ring (AT) yahoo (DOT) 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)

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

In article <1148397804.133058.174130 (AT) j73g2000cwa (DOT) googlegroups.com>, VK
<schools_ring (AT) yahoo (DOT) 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)

In article <1148402087.724822.8000 (AT) 38g2000cwa (DOT) googlegroups.com>, VK
<schools_ring (AT) yahoo (DOT) 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)