Trying new CSS on Mefi January 27, 2001 5:19 PM Subscribe
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.
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.
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
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
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
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
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:
posted by mathowie (staff) at 5:59 PM on January 27, 2001
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
yes, that's great! thanks for the zillion new features.
posted by gluechunk at 6:12 PM on January 27, 2001
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
"Wow, must be something only Netscape can see. I like this."
posted by Mark 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
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
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
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
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
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
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
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
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
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
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
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
I tested it on Mac IE 5.0 and it worked fine.
posted by mathowie (staff) at 10:04 PM on January 28, 2001
I honestly don't know which IE engine AOL 5.0 uses, only that it's generally bad. And yes, it's fine for me in real IE 5.5b1.
I don't actually use the AOL browser for MeFi or anything else, thank God. I was just testing for ya.
posted by aaron at 10:32 PM on January 28, 2001
Is it possible to have the text flow around the sidebar? For example:
posted by gleemax at 7:46 AM on January 29, 2001
Blah blah blah | | Blah blah blah | | Blah blah blah |___| Blah blah blah blah Blah blah blah blahIt 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
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)?
It works in IE 5.5, Mozilla (recent nightly), and Opera 5.02.
posted by gleemax at 11:40 AM on January 29, 2001
.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
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
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
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
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
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
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
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
It's a band-aid for now.
posted by mathowie (staff) at 8:43 PM on January 29, 2001
Yeah, just open a thread into a new window when you want to follow it. It's second nature to me now.
I am so filled with duhitude right now. Thank you for applying the clue stick to my head. (Though in my defense, I must note that in general I hate spawned windows.)
posted by aaron at 8:47 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
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
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
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
Mac-oids will want to Command-click instead.
posted by kindall at 11:43 PM on January 29, 2001
The wrapping works fine in IE5.5b1/Mac, but then CSS is one of the things 5.5b1 was supposed to handle a lot better than 5.0. And hardly anyone has 5.5b1.
Thanx hijinx and kindall!
posted by aaron at 12:21 AM on January 30, 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
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
You are not logged in, either login or create an account to post comments
posted by mathowie (staff) at 5:25 PM on January 27, 2001