MeFi and MeTa should be standards-compliant.

October 11, 2001 12:47 AM

How about a standards-compliant version of MetaFilter or MetaTalk?

Disclaimers: (1) ignominious self-link; (ii) tested in Internet Explorer 5.1 and Netscape 6, should work in all CSS-compliant browsers; (c) guaranteed to look hideous in Netscape 4 et al; (IV) XHTML 1.0 Strict and CSS validated by W3C.

posted by kirkaracha to Feature Requests at 12:47 AM (26 comments total)

You're right. It does look hideous in NN4.7.

posted by andrew cooke at 12:56 AM on October 11, 2001

Cruelly, standards-compliant = hideous in Netscape 4.x.

(ii) should read "test in Macintosh versions of Internet Explorer 5.1 and Netscape 6" however, it should still look good in CSS-compliant browsers.

posted by kirkaracha at 1:04 AM on October 11, 2001

Ummm...tested
posted by kirkaracha at 1:05 AM on October 11, 2001

You know, mathowie really needs to steal that Bert-enhanced metafilter logo from your site...
posted by hincandenza at 1:05 AM on October 11, 2001

both of them look like ass in IE6 though.

(hincandenza, I made that image)
posted by mathowie (staff) at 1:06 AM on October 11, 2001

Good ass...or badass?
posted by kirkaracha at 1:15 AM on October 11, 2001

I don't know - one of the things that I think is fab about the MeFi look as it filters down to me is its chunkiness, and the first thing I noticed about this was the extreme weeniness of the type at the top (not necessarily the main body type, although that's much smaller than usual, too). The only sensible use for type that small is legal disclaimers, which people aren't supposed to be able to read.

Mozilla 0.9.3 - is this CSS compliant enough (I'm kind of not up to speed on these things, since I work with tree-killers most of the time)? It does seem that a lot of people who are consciously web-designers make things that are deeply micro in the type department. Do people intend the type on their sites to be this titchy? Is it an effect of preferring to define type in terms of pt or pica rather than px? It seems to me that if you're given control over these things you might want to use it.

Does this seem fractious? Sorry, my early morning caffeine high. I'm genuinely curious about what is supposed to be a design choice and what is simply a side-effect of browser choice.

Long live the Big Ass Metafilter type styles. On the blue and grey backgrounds I can read them for hours without strain. And do.

In fact, I should be at work now.

In fact, Oops.
posted by Grangousier at 2:01 AM on October 11, 2001

kirkaracha, you might like to fix the DOCTYPE tag as seems to be broken... somehow. Making the DTD "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" seems to work better for me. (but no, I'm not sure why)

However, the problem with standards compliance is that it also requires the users posting stories and comments to adhere to the standards. I'm actually writing an HTML parser and auto-validator that fixes posts now, so I know how much of a pain this is to do.

(oh, and hincandeza, I think you must have missed that thread :)
posted by Lionfire at 2:01 AM on October 11, 2001

Kirk, I wonder if it would work better if you changed the Ps to DIVs? And you can akways provide a Netscape style sheet with the P margins tweaked for NS 4. Either reference it via a browser sniffer of make it the default and overwrite it with an @-command for more compliant browsers.

Is this just a static copy? Or are you making it with the XML feed?
posted by rodii at 7:17 AM on October 11, 2001

Dude, MeFi is about non-compliance! Question authority!

I'll be having a sit-in on the side-blog later this afternoon.
posted by jpoulos at 9:41 AM on October 11, 2001

andrew cooke: part of the reason it looks hideous in Netscape is because I used DIVs instead of tables for the top navigation area. We could use a SSI to dynamically include a DIV or table version (the DIV version has a lot less code).

Grangousier: I initially used ems to spec the font sizes so they would scale according to the users' preferences. I changed them to pixels. I'm not a fan of tiny type, either. I don't have easy access to a Windows machine so I couldn't test them in Windows.

Lionfire: Thanks for the tip on the DOCTYPE. I initially used BBEdit's default and I replaced it with the declaration from the XHTML spec (not sure why BBEdit doesn't use that).

rodii: I'd prefer to use Ps because the comments and posting information seem to me to be more logically paragraphs than sections of the page, but I could change them to DIVs if necessary. I could work up a more Netscape-friendly style sheet and use at-import. They're just static pages.

posted by kirkaracha at 9:46 AM on October 11, 2001

It was mathowie's all along.
posted by kirkaracha at 9:59 AM on October 11, 2001

I know. Comedy = Tragedy + Time; the second time I posted that stupid comment, it was for comedic effect!
posted by hincandenza at 10:36 AM on October 11, 2001

Here's what I'm seeing in IE 6 on win2k:

valid MetaFilter

valid MetaTalk

It looks like you've left off a "float:right" on the sidebar, to allow the text to flow next to and around it on MetaFilter. On both, the top menu thing isn't aligned, but I could lose the graphics to make that easier.

If I go with valid markup, I'd like to ditch tables entirely from the site, and netscape 4 users can get a low-end look. Also keep in mind these sites can never be fully valid, because people insert non-standard markup all the time in posts.
posted by mathowie (staff) at 10:45 AM on October 11, 2001

some of the top hoo-ha is a fraction off in Win98/Opera 5.11 - the fine lines don't quite line up (actually, they don't in Win98/IE5.5, either, but much less noticably).

then again, they break just a bit in the current version in Win98/Oper 5.11, too.

web design is a bitch, ain't it?
posted by epersonae at 11:57 AM on October 11, 2001

Also keep in mind these sites can never be fully valid, because people insert non-standard markup all the time in posts.

Agreed, but--just thinking out loud--would wrapping the posts in CDATA sections exempt them from validation? There ought to be some way of validating the "outer" content while leaving the inserted content alone.
posted by rodii at 12:02 PM on October 11, 2001

mathowie: the sidebar has a "float:right," but I had defined the style as "#sidebar" instead of "div#sidebar." It didn't make a difference on Mac IE 5.1; maybe it does in Windoiws. There aren't any tables now.

epersonae: some of the top hoo-ha was off because I had specced a white bottom border for the menu area that conflicted with the white line in the graphic; I took out the border definition. Also, the lines are part of the MetaTalk, MetaFilter, and community blog graphics, so they could be off, too (I'm floating those graphics over DIVs that have the horizontal lines as backgrounds).

And yes, it is a bitch.

posted by kirkaracha at 12:44 PM on October 11, 2001

Innocent question: What's the point of standards-compliance? Is it just to stand as an example of how HTML should be written?
posted by jpoulos at 12:52 PM on October 11, 2001

The top bar is a bit off in Netscape 6.1. Everything right of the logo shifts down a pixel.
posted by mrbula at 1:45 PM on October 11, 2001

What's the point of standards-compliance? Is it just to stand as an example of how HTML should be written?

Theoretically speaking, and rather simplified, once everything is standards compliant every device that renders a web page (ie, windows desktop, printer, palm, mac os9.x laptop) will be able to determine for itself how to properly display the page. The current situation is that people who write pages have to specifically write pages for each device that may look at it.

Theoretically speaking.
posted by cCranium at 2:10 PM on October 11, 2001

What's the point of standards-compliance?

There are a couple of points. It's dramatically easier, more efficient, and cheaper to do a standards-based layout than a hacked-together-for-Netscape 4 layout: the Web Standards Project estimates that using standards can reduce development time, effort, and budget by 25%. It's generally easier to port content from a standards-based layout to different devices, since you can load different style sheets based on the device (the current MetaFilter layout is well-designed and flexible, but a lot of sites aren't). A standards-based design usually results in a smaller file size, so files will download more quickly. Standards-based code is easier to understand because it's more logical, and easier to maintain because it's simpler. And it's really nice to finally be able to write code according to specifications that are several years old and have browsers do what the specs say they should.
posted by kirkaracha at 2:33 PM on October 11, 2001

hmm. weird, at about 1000px wide, the text floats up in metafilter, to the proper place, but below that jumps down below the sidebar, as if there isn't enough room for it. This can happen on metafilter currently, if a very long non-breaking string of text shows up in the left column, but in this mockup, there doesn't appear to be anything forcing a 1000px width. Are there some absolute widths written into the stylesheet somewhere?
posted by mathowie (staff) at 3:14 PM on October 11, 2001

After my snarky comment at the top of this thread I thought I should come back to say that I've just (this afternoon) switched to NN6.1 (while MeFi is, of course, important, this actually reflects the company I work for's decision to stop supporting NN4). So yet another NN4 user bites the dust.

And hey, it does look better in NN6. ;-)
posted by andrew cooke at 7:02 AM on October 12, 2001

welcome to the 21st century, andrew. I'm sure you'll enjoy it here! :)
posted by epersonae at 5:39 PM on October 12, 2001

I’ve made a lot of changes recently to my standards-compliant versions of MetaFilter and MetaTalk.

• DHTML dynamically collapses and expands the sideblog without reloading the page
• The Customize form switches the home page between default and lofi style sheets
• MetaFilter logo randomly changes
• Time and date in top nav are localized to user’s computer

If JavaScript is turned off, the sideblog collapse link goes to a separate file the way the current MetaFilter page does, and a default MetaFilter logo is displayed.

I’ve got a JavaScript that will control the font-family and font-size for body text and small text; the Customize form is saving a cookie with these settings, and I’m working on getting the info out of the cookie.

The Customize form only affects the style sheet for the home page, but it would be easy to have the preference affect every page.

CSS and HTML (XHTML 1.0 Strict) validated by W3C.

posted by kirkaracha at 1:08 PM on December 12, 2001