Trying new CSS on Mefi

January 27, 2001 5:19 PM

So I was checking out Eric Meyer's CSS book (the best of any CSS book I've read) this morning, and played around with some CSS I'd never used before. In just a matter of minutes, I had the cool CSS-only bar (there's not a lick of javascript being used for display or collapse, it's all CSS and server side logic) with the show/hide option working (I just add display:none; to the stylesheet if you collapse it).

I've been looking for a way to add more information, and keep people up to date on news and metatalk stuff, without overly complicating the interface. I added cookies to the position you prefer it in, and I currently only show it for IE 5+ on windows, IE 5+ on the mac, and Netscape 6+ on all platforms. You won't see anything in Opera or Netscape 4.x because they didn't seem to want to play right.

If you have any problems with it, let me know, especially if you're using a browser that's screwing things up.
posted by mathowie (staff) to MetaFilter-Related at 5:19 PM (42 comments total)

I forgot to add, users not logged in get a welcome message in that area, that members don't have to see. I hope it gives them a good quick introduction and sets the right tone.
posted by mathowie (staff) at 5:25 PM on January 27, 2001

looks okay but... i closed it and then when i tried to pop it out again, i got a 404 error here: http://www.metafilter.com/index?collapse=no

HTTP/1.1 404 Object Not Found
posted by palegirl at 5:28 PM on January 27, 2001

How does it look with a smaller font, like the font size used for updates in the upper-right section?
posted by gluechunk at 5:38 PM on January 27, 2001

palegirl, that should be fixed now. I could bring it down to 10px I guess. Let me try 11px.
posted by mathowie (staff) at 5:48 PM on January 27, 2001

Matt, this is great. I'd love to hear reports about how well float:left works on various browsers.

I agree with gluechunk on the size. .smallcopy size rather than .comments size sounds just right.

By the way, I logged out to see the welcome message and there was nothing different. Is it only new users that that appies to?


posted by rodii at 5:49 PM on January 27, 2001

if you refresh the index page after logging out, you should see:

MetaFilter is a community of users that find and discuss things on the web. The topics run the gamut, and tend to run intelligent and civil. If it's your first time here, hang out, sign up, and get a feel for the place.

It's not set at 11px text. That ok? I'm off for a while, so any showstoppers will have to wait for a while.
posted by mathowie (staff) at 5:59 PM on January 27, 2001

I meant "it's now set" not "it's not set"
posted by mathowie (staff) at 6:03 PM on January 27, 2001

yes, that's great! thanks for the zillion new features.
posted by gluechunk at 6:12 PM on January 27, 2001

And here I was, using Netscape 6 for the first time and I see this sidebar.

"Wow, must be something only Netscape can see. I like this."
posted by Mark at 7:41 PM on January 27, 2001

Matt: so cool. Thank you.
posted by pnevares at 7:41 PM on January 27, 2001

This is very cool.

It would also be an excellent way to direct members to the MetaTalk discussion Avogadro's proposed, if it happens.
posted by sudama at 8:13 PM on January 27, 2001

love it. my only wish would be that it were dhtml so the page wouldn't have to reload when you open or close it.

otherwise, very cool.
posted by o2b at 8:44 PM on January 27, 2001

I just want to add my praise for Eric Meyer's book. I'm pretty thick when it comes to learning new coding, markup and what not, but I've found the book the most accessible intro to CSS of those I've seen. (Oh, the update log thingy is very nice too, Matt. Thanks!)
posted by bradlands at 8:59 PM on January 27, 2001

thanks, Matt. great stuff.
posted by Sean Meade at 4:30 AM on January 28, 2001

If I'm ever elected president, Matt gets to be the Bobby to my John. (And I don't mean that in a dirty way).
posted by Optamystic at 6:03 AM on January 28, 2001

The coolest part is that you can turn it off. I'll probably never see anything posted there, and I can't be the only one who turns it off and leaves it off, so it might be a good idea never to post anything important solely there.
posted by kindall at 9:59 AM on January 28, 2001

Well is there anyway to have it automatically collapse=no if something new has been added to it?
posted by gluechunk at 10:20 AM on January 28, 2001

Naw, I'm going to keep it simple for now. I'd suggest popping it out once a day to check for new stuff, then put it back.
posted by mathowie (staff) at 12:01 PM on January 28, 2001

Memories of Webmonkey's old sliding DHTML navigation bar from 1997 built by Captain Cursor...
posted by tomalak at 3:28 PM on January 28, 2001

FYI: I decided to change it to float right, since it's less intrusive in the page flow that way.

That's the way I originally wanted to do it, months ago, but after trying all sorts of javascript hacks to determine width width and how far right something should go, I gave up. I figured out just now that the only browsers I'm showing this on (IE 5+ pc/mac and Netscape 6) understand what right:0px; means.
posted by mathowie (staff) at 8:16 PM on January 28, 2001

In the sort-of-IE-but-not-quite AOL internal browser (Mac 5.0), it still shows up on the left. And the regular text of the front page writes right over top of it. Collapse does work, though first letter of the date prints over the top of the little arrow thingy.
posted by aaron at 9:38 PM on January 28, 2001

Hmm. that's odd. I suppose you're using AOL 5 on the Mac aaron? If so, that uses the IE 4.5 engine, right?

I tested it on Mac IE 5.0 and it worked fine.
posted by mathowie (staff) at 10:04 PM on January 28, 2001

Is it possible to have the text flow around the sidebar? For example:

Blah blah blah |   |
Blah blah blah |   |
Blah blah blah |___|
Blah blah blah blah
Blah blah blah blah

It bothers me that the entire page is pushed to the right. I'm using IE 5.50.4522.1800IS, if that matters at all.
posted by gleemax at 7:46 AM on January 29, 2001

The text flowing idea is a good one.

Also, it would be cool if the explorer bar version of MeFi had a meta refresh on it. Like every ten minutes or so.
posted by endquote at 9:42 AM on January 29, 2001

How about something like this (after getting rid of the 150 right margin of the page class)?

.sidebar { background: #004D73; border-top: 1px solid #fff; border-bottom: 1px solid #fff; width: 140px; margin: 7px 0px 30px 30px; float: right; }

It works in IE 5.5, Mozilla (recent nightly), and Opera 5.02.
posted by gleemax at 11:40 AM on January 29, 2001

I'd suggest popping it out once a day to check for new stuff, then put it back.

I'd be more likely to do that if it didn't lose the new message indicators.
posted by kindall at 2:23 PM on January 29, 2001

There's a way not to lose the new message indicators? I'm almost never lucky enough to get them to stick around. I load one thread and respond, and then when I try to page back to the front page there's only a 50-50 chance the whole page doesn't reload from scratch. It's gotten so bad that now I always take a snapshot of the front page and shove it into IE's scrapbook, which is a lot slower and always reloads at the top of the page.
posted by aaron at 2:31 PM on January 29, 2001

gleemax, thanks! I was playing with the CSS this morning and couldn't get it to work, but I just dumped that class into the test file I was using and you're right, it works perfectly. I'll make the change now.

aaron, session management in CF basically sucks, and I'm looking at ways to rewrite the whole thing right now.
posted by mathowie (staff) at 3:26 PM on January 29, 2001

You're welcome. I just love MetaFilter. :D
posted by gleemax at 3:58 PM on January 29, 2001

There's a way not to lose the new message indicators?

Yeah, just open a thread into a new window when you want to follow it. It's second nature to me now.

Matt, on Mac IE 5.0 the sidebar now takes up the same amount of space whether it's collapsed or visible. I.e., collapsing it doesn't reflow the text to the wider available space.


posted by kindall at 4:56 PM on January 29, 2001

heh, you're right kindall, same thing's happening to me. Gleemax?

I'll try to get a fix done tonight.
posted by mathowie (staff) at 5:56 PM on January 29, 2001

If it's worth anything to ya, it's also happening on IE 5.5 PC for me.
posted by hijinx at 8:08 PM on January 29, 2001

I just applied a server side fix, I show the old collapsed code when closed, and the new gleemax wrap around code for that class when it's out.

It's a band-aid for now.
posted by mathowie (staff) at 8:43 PM on January 29, 2001

The text doesn't wrap around the expanded bar with IE5 on the Mac; I assume it's probably because it's using some CSS feature Mac IE doesn't support. But the collapsing works now. Woo-hoo!
posted by kindall at 9:22 PM on January 29, 2001

aaron, as a side DYN that others might benefit from, shift-click will always open a link in a new window. It's one of those shortcuts that just becomes second-nature... especially when you program a mouse button to do it for you.
posted by hijinx at 9:24 PM on January 29, 2001

I think it's because you added (according to the source, anyway) 'visibility: hidden' instead of 'display: none'.

hidden (a value of the 'visibility' property)
The generated box is invisible (fully transparent), but still affects layout.

none (a value of the 'display' property)
This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants.
Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

I believe you could simulate the effects of 'display: none' with 'position: absolute' and 'visibility: hidden', but I'm not 100% on that.
posted by gleemax at 9:49 PM on January 29, 2001

shift-click will always open a link in a new window

Mac-oids will want to Command-click instead.
posted by kindall at 11:43 PM on January 29, 2001

love the sidebar and the text-wrapping at the bottom. great stuff, Matt.

how about a new tag-line for MeFi, something like 'a new upgrade every time you visit!'.
posted by Sean Meade at 7:10 AM on January 30, 2001

I think Matt should start having version numbers.
posted by rodii at 5:33 PM on January 31, 2001