Stylesheets - Test this for me please! Header + Flash + Footer

Author

Test this for me please! Header + Flash + Footer

Paul Neave

2007-10-19, 10:17 pm

Hello all.

Please try this link for me and let me know what you see:

http://www.neave.com/temp/stretch_test.html

You should see a green header filling the top of the page, a red footer
at the very bottom of the page and a white Flash movie filling the gap
in between. You'll need at least Flash Player 7, otherwise it will just
show black. It shouldn't scroll, it should act like a framed page but
uses CSS DIVs instead.

There's a big cross in the Flash movie that goes into the corners of the
page. It should stay in these corners as you resize the browser window.

Here's what I see:
http://www.neave.com/temp/stretch_test.gif

I've tried this on a PC in Opera 9, Firefox 2 and IE7 and works well.
Only on Safari for PC does it not work properly. If you could test it on
a Mac and other browsers I'd really appreciate it.

As you probably know, making a simple table-like page with a header and
footer in CSS is a real pain, and I'm using quite a few hacks in the CSS
to get this to work (view source to see them!), so if you can see any
obvious ways to solve browser problems, please let me know.

Thanks loads!
Paul.

dorayme

2007-10-19, 10:17 pm

In article <p1bSi.28302$DB2.26374@newsfe1-win.ntli.net>,
Paul Neave <paul.neave@nospampleaseXXXXXXXXXX> wrote:

> Hello all.
>
> Please try this link for me and let me know what you see:
>
> http://www.neave.com/temp/stretch_test.html
>
> You should see a green header filling the top of the page, a red footer
> at the very bottom of the page and a white Flash movie filling the gap
> in between. You'll need at least Flash Player 7, otherwise it will just
> show black. It shouldn't scroll, it should act like a framed page but
> uses CSS DIVs instead.
>
> There's a big cross in the Flash movie that goes into the corners of the
> page. It should stay in these corners as you resize the browser window.
>
> Here's what I see:
> http://www.neave.com/temp/stretch_test.gif
>
>
> I've tried this on a PC in Opera 9, Firefox 2 and IE7 and works well.
> Only on Safari for PC does it not work properly. If you could test it on
> a Mac and other browsers I'd really appreciate it.
>
> As you probably know, making a simple table-like page with a header and
> footer in CSS is a real pain,

I did not know this but never mind...

> and I'm using quite a few hacks in the CSS
> to get this to work (view source to see them!), so if you can see any
> obvious ways to solve browser problems, please let me know.
>

In Safari on a Mac, it appears like in FF except that the footer
is unstable. More often than not, it does not appear at all. It
can appear at one browser size and disappear with a very small
adjustment either horiz or vert of the browser size via the
mouse...

Safari is definitely the odd man out on this. I notice it renders
the Flash diagonals differently too, they do not go neatly into
the 2 bottom corners as on the other browsers! They are
equi-distant from the corners at the bottom but in about 10% on
each side.

The problem in Safari seems to be the height in the <object>
code. When this is taken out, the headers and footers work fine
and the latter does not do the disappearing act. But, of course,
you don't get what you want then in other respects. There seems
to be some interference between the space reserved for the footer
and that for the content in Safari calculations? Safari takes
that 100% not to mean what the other browsers take it to mean. It
has its eye fixed at a "virtual point" lower than the bottom of
the browser! Lowering the percentage height achieves more
stability by lessening the chances of a user having the browser
short enough to trigger the interference - but buggers up the
intention of your layout.

As afar as operations in Opera, Safari, Camino, iCab, Firefox are
concerned I got the same results by paring your css down to what
you can see via:

<http://people.aapt.net.au/miltonreid/flash/flash.html>

--
dorayme

Paul Neave

2007-10-20, 6:18 pm

dorayme wrote:
> In article <p1bSi.28302$DB2.26374@newsfe1-win.ntli.net>,
>
> I did not know this but never mind...

Heh, well it has been for me!

>
> In Safari on a Mac, it appears like in FF except that the footer
> is unstable. More often than not, it does not appear at all. It
> can appear at one browser size and disappear with a very small
> adjustment either horiz or vert of the browser size via the
> mouse...
>
> Safari is definitely the odd man out on this. I notice it renders
> the Flash diagonals differently too, they do not go neatly into
> the 2 bottom corners as on the other browsers! They are
> equi-distant from the corners at the bottom but in about 10% on
> each side.

Yes I see this on Safari for PC too. It's like the header pushes the
whole Flash content down off the page.

> As afar as operations in Opera, Safari, Camino, iCab, Firefox are
> concerned I got the same results by paring your css down to what
> you can see via:
>
> http://people.aapt.net.au/miltonreid/flash/flash.html

That's fantastic, thanks so much! It looks like it works on all browsers
for PC too now, although I can't test IE6.

Brilliant, I'm a happy man now.
Thanks!
Paul.