Comments on: Comments on 6335

Post number 6335

aladfar — Mon, 12 Mar 2001 09:24:52 -0800

The Layout Reservoir: For those reluctant to embrace standards compliant design, the good people at Blue Robot have provided an excellent starting point. The reservoir features three CSS based designs for you to borrow, edit, and learn from. It's a good thing.

By: harmful

harmful — Mon, 12 Mar 2001 09:59:36 -0800

On a modem connection, I can see these pages load as text, and then quickly "snap" into place as the stylesheet is rendered. Makes me wish I could turn off stylesheet rendering (temporarily at least) to see how it looks in the base form. Say what you will about the Browser Upgrade Initiative, I'm glad it's encouraging pioneers like these folks to try and break new ground.

By: harmful

harmful — Mon, 12 Mar 2001 10:04:23 -0800

Just noticed, though, that they don't seem to provide a link for downloading or viewing the style sheet by itself. A tool like CodeLifter (mentioned on Webmonkey) might make extracting the external stylesheet a bit easier.

By: Outlawyr

Outlawyr — Mon, 12 Mar 2001 10:18:09 -0800

"I can see these pages load as text" On DSL I saw the same thing the first time I loaded each page. One more reason I won't be using these anytime soon. I love Zeldman and agree with the theory behind what he's trying to do, but if you're only getting a few hits a day anyway I don't think there's much point in forcing your few devoted fans to upgrade their beloved - if out of date - browser.

By: igloo

igloo — Mon, 12 Mar 2001 10:26:43 -0800

I'm on a T1 and the delay is quite noticeable there too. I've found this Box Lesson to be easy to follow and faster loading.

By: daveadams

daveadams — Mon, 12 Mar 2001 11:08:06 -0800

I've found this Box Lesson to be easy to follow and faster loading. Really? On the first three examples, I could see the plaintext version for just a split-second before it snapped into fancy-CSS version, but on the Box Lesson you linked to, the whole page was loaded and I had time to scroll all the way down to the bottom and back up slowly and decide that nothing was going to render beyond plain text when suddenly it snapped into place. Either way, it's annoying. What's the point of that pre-stylesheet rendering? Is it a browser bug? Anyone? Nevermind, I just tried it with Mozilla 0.8 and it worked great. I'm assuming IE 5.5 is the problem. Must be MS trying to subvert the use of CSS. ;)

By: likorish

likorish — Mon, 12 Mar 2001 11:16:31 -0800

No delay on IE 5/Mac. I wish I'd known about these layouts before ripping every hair out of my head while trying to create my own CSS dependent layout.

By: Awol

Awol — Mon, 12 Mar 2001 11:17:17 -0800

I get little or no delay at all on IE5.5 on a DSL-backed LAN connection. As for reading stylesheets, IE5.0 for the Mac allows you to view the sheet in the browser by entering the location of it. Whereas PC's force you to download it and open it in Notepad, which is a pain in the ass. Personally, I like being able to scrap tables and completely change my layout just be redefining a few divs, so I wholeheartedly agree with the WaSP campaign. Now just to polish up my redesign.... OFFTOPIC: any one know why SXSW award winners haven't been posted anywhere yet? It's almost noon Pacific time already....

By: cCranium

cCranium — Mon, 12 Mar 2001 11:31:45 -0800

d'you think it's MS' interpretation of the @import command? I haven't noticed that brief text rendering on any other sites that do CSS-layout, although a quick look at A List Apart (after wiping my cache to avoid a cached stylesheet), which uses @import, shows that not all sites using it have that plain text flash. That's weird. (IE5.5 on Win2k) awol: And better yet for PCs, if you have Visual Interdev installed with it's default associations, it'll open Interdev and it's super-bloated CSS editor when you want to look at a stylesheet. Ick.

By: cfj

cfj — Mon, 12 Mar 2001 11:41:24 -0800

blue robot is one of my favorite sites, and i love the simplicity of the design. but before everyone abandons tables, you should be aware of an issue with CSS div-based layouts that i wrote about here. (please pardon the self-link, but it's easier than keying it all in again.)

By: tremendo

tremendo — Mon, 12 Mar 2001 11:53:27 -0800

> What's the point of that pre-stylesheet rendering? Is it a browser bug? Just guessing here, but I think the browser just starts displaying the document before it finishes loading everything, including the external stylesheet in the same way it normally renders text first while graphics are still loading. I suppose a way (a hack with its own drawbacks) would be to actually include the stylesheet definition in the document's <head> instead of making it external. That way it would load before the page's content. And yes, this defeats one of CSS's greatest advantages. Although in some cases it may be practical to combine both inline and external styles.

By: Awol

Awol — Mon, 12 Mar 2001 11:59:19 -0800

cfj- There are way to avoid the div-based problem you mentioned, either by tight proportions or setting the z-indexs so that if someone wanted a two-inch wide browser window, more crucial information will be displayed on top. Of course that is if you're left little recourse, otherwise you can absolute position and value your divs, and they'll work just like tables (i.e. you'll need to scroll for offscreen content). I agree forsaking tables is early and unnecessary for a lot of people, but for those with a small (and generally geek-heavy) audience, it's fun to try something new that most of your readers'll be able to see just fine anyway.

By: mimi

mimi — Mon, 12 Mar 2001 12:15:53 -0800

Awol: I've been wondering myself....the Web Awards winners, will be posted here on Sunday night after the ceremony...nothing yet. Ayone with gossip want to start a new thread?

By: cfj

cfj — Mon, 12 Mar 2001 12:40:41 -0800

awol: yes, you can work around the overlapping problem by using those methods, but they have disadvantages too. especially if you factor in the dreaded netscape 4, which doesn't get along with CSS positioning very well. i agree, there's nothing wrong with "proof of concept" designs. but i'm starting to see a flood of "good, now i can get rid of tables" posts, and other posts recommending it, and not much discussion of the very real drawbacks to this approach. it's great to know how to do this type of layout, but it's not time yet for everybody to toss their tables into the bit bucket.

By: cCranium

cCranium — Mon, 12 Mar 2001 13:49:24 -0800

cfj, give the dreaded Netscape 4 a nice, plain unpositioned layout, because it doesn't properly handled CSS-positioning. Regarding tables, I just think that's it's especially nifty that I can drastically change the layout of my page (indeed, my entire site) just by making a few changes to an external stylesheet, and not have to worry about having the style fall-through.

By: Awol

Awol — Mon, 12 Mar 2001 14:09:49 -0800

This Just In: According to a blurb on Who Would Buy That?, they've won the Best Weblog Category. (Boo-hoo, Alison, sorry.)

By: Skot

Skot — Mon, 12 Mar 2001 14:14:10 -0800

Watch that caffeine intake, Awol! Here's a working link.

By: Awol

Awol — Mon, 12 Mar 2001 14:21:26 -0800

ssorry I gott a ttyping probllem. Tthanks...

By: caderoux

caderoux — Mon, 12 Mar 2001 15:37:16 -0800

I always use <LINK REL="stylesheet" TYPE="text/css" HREF="/styles/std.css" TITLE="stylesheet"> in my <HEAD>, and I never get that odd behavior. Any advantages to using @import?

By: kindall

kindall — Mon, 12 Mar 2001 15:48:05 -0800

@import is not supported by Netscape 4.x, so you can put all your Netscape-compatible styles in the LINK tag and then supplement them with additional styles for IE and other more modern browsers via @import. That's how I've mostly seen it used, anyway.

By: cCranium

cCranium — Tue, 13 Mar 2001 05:13:55 -0800

kindall's right, but @import's only supported by CSS-2 compliant browsers, so it handles a wider range of non-compliant browsers then just NN4.x I know, I'm being picky, but hey. caderoux, I do the same thing - I use a server-side detection script to determine which stylesheet to load - which is why I was suspecting it's an issue with the @import implementation. Since ALA uses some regular LINK tags too, the plain text effect may not be seen because the text's already formatted to a degree.

By: ericost

ericost — Tue, 13 Mar 2001 11:50:39 -0800

I just launched a resource similar to Paul's: CSS Layout Techniques.