I am just about ready to enter my submission to the CSS Zen Garden, but I need a little more testing in the browser compliance area. I have tested the page on both IE6 and Firefox and it renders as intended, but if anyone out there has IE5.5, Opera, or any Mac browsers, would you mind checking out the page and comparing it to the IE6/Firefox version? It would be a big help.

Thanks.

Looks good in Galeon, but I don't have access to anything other than that, IE6 and Firefox right now.

it is not showing up properly in 5.5
the main body is off to the left, and the text is very small
batman and his sidekick are sitting on a white piece.

ie 5.50.4807
text size set to medium

screenshot of page

Are you using ZoneAlarm by any chance? The HTML source has been munged slightly by ZoneAlarm to add the privacy bits

<!-- ZoneLabs Privacy Insertion -->

<script language='javascript' src='http://127.0.0.1:1035/js.cgi?pa&r=6422'></script>

<script type="text/javascript"></script>

Can't help you on the browsers sorry. Looks very good though

it also adds this at the bottom, after the html is closed

<!-- ZoneLabs Popup Blocking Insertion -->

<script language='javascript'>postamble();</script>

Looks fine in:
Safari 1.2.1
Omniweb 5 Beta 5
Camino 0.7

Doesn't look fine in:
IE 5.2.3

All browsers set to defaults for font size and such.

Looks great in Opera (default settings):

Version 7.23
Build 3227
Platform Win32
System Windows XP

Jim

Wow, that is amazing. I had no idea it had that kind of power.

Customsex, I couldn't view the screenshot you posted. I keep getting a "Page cannot be displayed."

As for the Javascript privacy insertion, I'm not sure if my computer is adding that or if it a part of the original source code (which is not to be altered). Would someone mind checking the source code of the Zen Garden page to see if it is included?

It's good to know that things are looking good in the majority of browsers. As for IE5.2.3, I'm not really worried because it isn't supposed to have full CSS support anyway. But IE5.5 should have CSS support, although it is a bit buggy and may require some CSS hacks in order for it to display correctly.

Thanks for all the input so far.

That javascript is not part of the original. ZoneAlarm is adding it to stop popups and various other things.

dont hate me for screwing up the rest of the look of this thread
im going to try to embed it here. hopefully it will solve the viewing problem you have. if not, i could email it or someone else could host it.

Ah, I understand. The floating images are in the correct position, but the main container isn't centering up as desired. I'll have to look into that. Thanks for the screenie.

Edit: I've made a couple minor changes that I hope will correct the problem that customsex is seeing in IE5.5. Do you mind checking it to see if it is fixed? Thanks.

Edit #2: After studying the screen shot in greater detail, I noticed that IE5.5 is rendering the text at a different size. In an attempt to have the page display as intended, I have adjusted the text size amounts from percentages to hard coded pixel heights. The only thing this may not correct is the floating images (The Flash, Batman and Robin), which are positioned from the top by line height figures.

I don't think it's CSS related, but it looks odd to have the Golden Age Flash and Golden Age Batman and Robin and very Golden Age Superman with the Silver Age Green Lantern. (Justice Society reference art) You might want to fix that. At least they're all DC.

In Mozilla 1.5, both the Flash and Batman and Robin render too high, with the Flash's helmet obscuring a piece of the last line of text above him and Batman's ears and the corner of the word balloon lying behind the sidebar above them.

yeah, what he said
only, on mine Batman and Robin completely cover the 'RESOURCES' box and part of the 'ARCHIVES' box

text now displays correctly, as does the positioning of the main body
Flash is up too far by the same amount as Batman and Robin

The Flash and Robin & Batman now cover some of the text. I'm using IE 6.0 and have large fonts set though which sometimes screws up layout.

Are the characters supposed to be obscuring the text?

User-Agent: Mozilla/5.0 (X11; U; Linux i686; rv:1.6) Gecko/20040413 Debian/1.6-5



(scaled to 50% to fit in the thread)

Yeah, I stretched a bit on Green Lantern, but I couldn't find a decent image to use for that position. Forgive me.

Well, I am in a quandry. The positioning of the floating images is determined in em amounts (based on line height), which is relative depending on the browser that is being used. Earlier browsers translate 1em differently than the newer standard-compliant browsers do. The benefit to using em amounts to determine height is that when the text is increased in browsers that support that feature, the floating graphics move down to accomodate the change.

The downside, of course, is that on browsers that mis-translate em size, the graphics appear above or behind other page elements.

An alternative would be to place the floating images based on hard coded amounts, which would pretty much determine correct spacing in almost every browser that is using a default font style, but would be slightly upset when font sizes are increased (i.e., graphics under other page elements).

Which do you think is the lesser of two evils?

Are the characters supposed to be obscuring the text?

No. For reference, it looks like the attached in IE6.

I'm using IE 6.0 and have large fonts set though which sometimes screws up layout.

Which is something that the CSS should be immune to.

I see the same -- if you hold down Ctrl and use the mouse scroll wheel, it'll switch through the text sizes and you'll be able to see what happens. In short, the graphics move up and down the page.

Cybjorg: The positioning of the floating images is determined in em amounts (based on line height)

tman: I'm using IE 6.0 and have large fonts set though which sometimes screws up layout

Roger: Which is something that the CSS should be immune to.

em height is supposed to change with the text size. For an example, do the same thing in Firefox and watch the graphics scale with the text size.

The problem is that the text size is fixed (although firefox wants to change it regardless) so the graphics are scaling without the text in IE6. I guess what he needs to do is make both the text and graphics scalable, or neither one.

In this alternative, I have specified the font sizes by percentages rather than by absolute values, so any sort of text scaling in IE6 should now effect the text and the graphics.

so any sort of text scaling in IE6

It still goes a little odd, but it's better. Can you adjust the z-order of the images so that they'll always appear under the text boxes if there's a problem?

That second one works much better for me (in Linux Mozilla) if I enlarge text to >130% so that it's greater than my configured minimum size of 8px (configured in prefs.js as the UI only goes down to 9px - I think I'd need a browser restart to tweak that setting)

Can you adjust the z-order of the images so that they'll always appear under the text boxes if there's a problem?

Done.

Edit: Although I have change the z-index value of the page elements to 2, the linklist (boxes on the right) to 3, and the floating elements (Flash and Batman) to 1, for some reason in Internet Explorer, the floating elements are still overlapping the other page elements when viewing text as "small" or "smallest".

Safari 1.2.1 renders the first example as the attached image, the second one is better positioned, but still not prefect.

"You sass that hoopy Ford Prefect? Theres a frood who really knows where his towel is."

Customsex, how am I looking in IE 5.5? Have I corrected the center align issue?