Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS "ziggurat" thumbnail layout

Trying something a bit special on this portfolio site. Curse you, Zeldman!



12:21 pm on May 31, 2002 (gmt 0)

Hello and welcome to my first post:

Seduced by the lure of standards-compliant web-authoring, I have embarked on a CSS-based adventure. The site in question snipped url - in profile is in its infancy, no content, only layout. It is supposed to look the way it does in Netscape 6.2. IE6 for PC causes problems because the "fixed" property for positioning is unsupported.

To heck with IE 6. The site's content, when it arrives, will still be visible to IE 6 clients, just not so pretty. I think Netscape/Mozilla is on the rise again and some day soon it won't seeem arrogant to ask visitors to use a browser with (near) 100% standards support.

No my problem is with IE 5.1.4 for the Mac. It renders the page almost perfectly except for the ziggurat profile of the red thumbnails. (The thumbs are floated and should hug the white spacers). Is there a CSS expert in the house who can enlighten me as to what might be wrong with my CSS or XML? Please.



(edited by: engine at 2:22 pm (utc) on May 31, 2002)


1:01 pm on May 31, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

And welcome to webmaster world!

Not sure, looks a bit squiffy in NS6 on Lin.

I expect tedster or papabear will be along shortly to clean out those urls in your post ;) They don't allow it.

Try posting some specific code instead.



4:28 pm on May 31, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hello cheapo! Glad to have you join us!

One of the early hurdles for developers embarking on the CSS journey is.... yep! Cross-browser support! Sheeeesh! Just when we thought it was safe! Well, for the most part it is... as long as you stick to the commonly supported styles (quite a few in fact!) and learn to handle element rendering variations (more than you might suspect) which are all controllable via CSS.

Niceties such as position:fixed or div { overflow:scroll;} are not fully supported across the newer browsers. While Mozilla, Netscape 6/7 and Opera support fixed elements, as you already know, MSIE does not. With over 85% of the browser market currently using some version of IE5.0 through v.6 you should try to ensure that your "fixed" element will scroll unobstructed when viewed in IE.

Opera does not support div {overflow:scroll} or {overflow:auto}, the latter can lead to quirky results elsewhere as well. Now here, I must admit that I am starting down the path of useability and making every effort to leave rigid page construction behind. I admit to using more than my fair share of iframes in the past in an effort to "controll" layouts. Div {overflow:scroll/auto} has the potential for abuse in this realm. Inviting scrollbars into a layout when they can be avoided (by allowing normal page flow) is debatable at best. There are other methods to present "blocks" of information.

Using logical page layout combined with the @import rule can protect NN4 and other CSS older user-agents from CSS they cannot comprehend, while still delivering useable content. Using CSS that 85% of the browsers (MSIE) that Internet surfers will use to access your site demands careful consideration.

There are design alternatives and even compromises, but cross-browser testing is required to find the best solution.
- papabaer


5:54 pm on May 31, 2002 (gmt 0)


Your notes re the use of scrollbars are taken to heart. In fact that DIV (.welcome) will likely not have scrollbars in the final site. It was something I just wanted to try.

What I am really concerned about is the flow of the floated red thumbnail DIVs. They are supposed to step up (like a flight of stairs) from left to right, over 2, up 1. If you look at it in IE6 or N6 it looks right. In IE 5.1.4 on the Mac, you get the white spacer DIVs in a row along the top, then you get the red thumbnails all in row below the lowest spacer DIV.

The weird thing is, it once worked fine on the Mac. Then I did a little more work and I guess I screwed something up. But I can't figure what. (It is getting so that I doubt whether it ever did work correctly in IE 5.1.4.)




8:35 pm on May 31, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

cheapo, floats can be tricky in even the best of situations: everything has to be just so or you end up with "a bunch of independently minded little buggers!" You are doing the right thing by testing your CSS across browsers... and platforms. Do you have a copy of Opera yet? If not by all means consider getting one, it's a free download: [opera.com...]

There are things you should take note of in Opera's rendering. It will help you to adjust your layout to perfection.

The thing with CSS and positioning... is that ORDER, can be crucial. Especially with floats and relatives (for instance). I'll take a look, but do consider testing using additional browsers. Opera is a good place to start... especially since you can easily view your site with CSS turned off (CTRL + G).

- papabaer


5:32 pm on Jun 7, 2002 (gmt 0)

I have frigged about with this site a bit and it now looks almost the way it should in all browsers. There is, however, a glitch in IE 5.1.4 for the Mac: The site loads OK if your browser window is maximised--You'll see a bunch of numbered red thumbnails. Reduce the window width by approximately half and hit "refresh". None of the thumbnails show up!

If you had launched the site in a small window you'd think "WTF, there's no content!"

Does anyone have any brilliant suggestions as to how this problem might be solved? (URL in profile)




9:44 pm on Jun 7, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Matt, It just may be that IE 5.1.4 does not support the level of CSS that you are using and there may not be a simple work-around. I don't have a Mac to test with so this is just conjecture. Opera 6.03 and Moz 1.0 check in fine by the way... ;)

Featured Threads

Hot Threads This Week

Hot Threads This Month