12 replies [Last post]
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

H i all

(especially Big John if you are reading this Laughing out loud )

I'm nearly there. I've combined Big John's pefiecta 3 col css design with Paul O'Brien's full height design. It seems to work in Mozilla, IE6, Safari and Opera. But Mac IE 5.x? NO. (I haven't got IE 5.x for the PC to check it either).

Page with minimal textual content (ie uses 100% height rules):

http://207.44.137.103/allbrowserertest.html

Page with between 100% and 200% page height textual content:

http://207.44.137.103/longallbrowserertest.html

Page with over 200% page height textual content:

http://207.44.137.103/maclongertest.html

As you will see, the first two have a 200% page height in Mac IE 5.1, the third extends beyond that, proving that the layout is fluid, but the background stops at 200%.

HEEEEEELLLLLLLPPPPPPP! (please)

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 46 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

4u Big John: Mac IE 5.1 doubles page height

Unfortunately, IE5 for Mac does not handle floats very well at all. I haven't bothered looking into how to rectify such problems yet (I use floats regularly).

You should do a google search for IE5 mac float examples and fixes.

For reference, IE5 for Mac is in no way related to IE5 for Windows, they are entirely different browsers.

The next sentence is true. The previous sentence is false. Discuss...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

4u Big John: Mac IE 5.1 doubles page height

co2 wrote:
Unfortunately, IE5 for Mac does not handle floats very well at all. I haven't bothered looking into how to rectify such problems yet (I use floats regularly).

You should do a google search for IE5 mac float examples and fixes.

For reference, IE5 for Mac is in no way related to IE5 for Windows, they are entirely different browsers.

Hi

Thanks for the feedback. I had already extensively searched for a solution and found the float problem, which it doesn't appear to be. Paul O'Brien has also seen the problem and describes it (I think) as an inheritence problem.

Essentially, I have a page container that has 100% height, inside which are the body container with the ehader and footer overlaid, all in separate containers. The body container has height:100% too. And so does the next div inside that. It would appear that Mac IE adds these together!

I have done a version without the 100% heights except for the container as Paul O'Brien has suggested, posted as

http://207.44.137.103/macie5shorttest.html

and

http://207.44.137.103/macie5longertest.html

to see if they work, but I need someone with a mac and IE 5.x to check them!

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 46 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

4u Big John: Mac IE 5.1 doubles page height

Same problem I'm afraid in IE5 Mac. It's extended beyond what you want.

IE5 Mac doesn't like the:

html { height: 100%; }

... at all. I've used this a few times, and IE5 Mac just pluses the page by an extra 50%. Sad

The next sentence is true. The previous sentence is false. Discuss...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

4u Big John: Mac IE 5.1 doubles page height

co2 wrote:
Same problem I'm afraid in IE5 Mac. It's extended beyond what you want.

IE5 Mac doesn't like the:

html { height: 100%; }

... at all. I've used this a few times, and IE5 Mac just pluses the page by an extra 50%. Sad

Hi

My friend Allan Smith has also looked at these pages and reports no probs with the longer one and the shorter shows only a non-full height bit at the top of the page. I think he has IE 5.1.

Did you check these later two links or the first ones I posted?

Anyway, I've re-done them with the html style set to no height, and body, fullheightcontainer, wrapper and outer styles all set to 100%.

What I can say is that IF body is set to anything other than 100% height, minimal content does not extend to full page height. Just setting the fullheight container to 100% doesn't do it either, even if body is 100%.

Hopefully, your are right about the problem with the html style.

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 46 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

4u Big John: Mac IE 5.1 doubles page height

Here's a screen grab of what I got in IE5 mac (OS X)... I've drastically reduced the quality for filesize reasons, but, you can see on your short version, the scrollbar...

...this is your latest file by the way.

The next sentence is true. The previous sentence is false. Discuss...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

4u Big John: Mac IE 5.1 doubles page height

Hi

A bit more research, and my friend has gone on holiday for a week!

1. If Mac IE is given BOTH a height and width in the html style, it does indeed go wrong. Can't see any reference to just height.
2. The changes I made by removing the height from the html style didn't work, and indeed simply proved that (as the problem persisted) the problem wasn't with html style itself.
3. This site (http://www.quirksmode.org/css/100percheight.html) has a good discussion of the problem, although I would treat some of the author's comments with caution). His solution is to make mac ie go into quirks mode, but this is done via the doctype declaration, and to do this would cause Safari (and probably other browsers) problems.

So, all I propose to do is fiddle with Mac IE to get it as good as I can. If it can be made to work in Strict (xhtml) mode, so much the better.

My fist post listed two urls. They are still valid. They now have 100% height for the html and body styles, together with 100% height on the divs fullheightcontainer and outer. But the wrapper does NOT have 100% height.

What will/should these look like?

On the short one, is the screen short (very), full height or more than full height?

On the long one, scroll to the end. The textual list should run to "more30" twice, in all of the three columns. It should have borders all the way down and pink background for the outer columns and blue for the inner (center). This pattern should extend all the way down, but on two of my last three tests did not (the test with html and body set to 100% height and just fullheightcontainer also height:100% worked OK for this longer version in IE 5.1, according to Allan Smith).

These files are QUICK to download (about 4k each), so if you have a Mac and IE5.1, or know someone who has, get them to try them for me, please Laughing out loud

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

4u Big John: Mac IE 5.1 doubles page height

co2 wrote:
Here's a screen grab of what I got in IE5 mac (OS X)... I've drastically reduced the quality for filesize reasons, but, you can see on your short version, the scrollbar...

...this is your latest file by the way.

Hi

The image quality is fine Laughing out loud.

Allan Smith posted me the same (type) of image a few minutes ago on that version of the css. Our posts crossed, I posted the version with 100% on the wrapper missing ten minutes ago. Can you tell from your cache whether it was with or without that set that you took the screenshot from?

Edited: In fact, I can see from when you posted it was before I posted this change, so you might want to try this newer one.

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 46 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

4u Big John: Mac IE 5.1 doubles page height

Works a lot better now... the divs seem fine. The page still scrolls beyond the browser window though.

The next sentence is true. The previous sentence is false. Discuss...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

4u Big John: Mac IE 5.1 doubles page height

co2 wrote:
Works a lot better now... the divs seem fine. The page still scrolls beyond the browser window though.

Hi

I guess you mean that on the short version the page scrolls off the bottom, just not so much, and the longer version has all the colors in the background and borders, and extends down only far enough to show the textual filler, and then comes the footer, yes?

So, what I am assuming is that by having the 100% height in wrapper has done this.

Despite the logic that says the fullheightcontainer for the page should have 100% height, I'm taking it out, along with the 100% height in the outer div. This leaves 100% height in just the html, body and wrapper. Looking at this in all the modern Windows browsers it goes horribly wrong, but what the heck, Mac IE is known to be odd to say the least.

Any chance of trying those two urls again?

Trevor

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 18 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

4u Big John: Mac IE 5.1 doubles page height

Now you know why I put this particular issue
to one side. Besides, why should I have to
do all the suffering? Buahaha!!

IE5/Win is fine except for a box model problem
concerning the width of the header and footer,
and too-large text which is a typical IE5 problem.
Text control must be a certain way or IE5 throws
a tantrum.

BTW, you may now download many standalone
versions of IE/Win that all work on one machine:

http://www.skyzyx.com/downloads/

http//www.positioniseverything.net/

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

4u Big John: Mac IE 5.1 doubles page height

Hi John

(is that pic really you Smile :?: )

I have, I think, almost cracked it, just testing a few bits in IE Mac.

When I've got it working in that (too busy this week), I have to figure out the hacks (like where the 3px is fed to IE Mac, or where a width is 151 or 152 px instead of 150 px) to see how these change when the border width changes

Anyway, got all the box model bits tightened down now (errors in coding!). It checks out in all browsers I have (IE 5, 5.5, 6, Opera 7.23, Mozilla, Safari 1.2) and folks I know who have older versions say it's OK too.

I'll be back Laughing out loud

Trevor

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 18 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

4u Big John: Mac IE 5.1 doubles page height

Yes, that is me, after an 18 mile mountain bike ride
on old cattle roads, and with the sun in my eyes.
Not exactly studio quality, but it makes me
consider changing my name to "Rocky".

http//www.positioniseverything.net/