Flutterby™! : New look redux 2004-02-04 06:16:28.180166+00

New look redux

2004-02-04 06:16:28.180166+00 by Dan Lyke 38 comments

I can only assume, because no two browsers seem to implement anything remotely similar and none of what any of them do implement seems to match what I understand as the spec or for that matter anything remotely sane, that CSS sucks. But anyway, I think I've answered most of your complaints (via email and in that previous thread), if it's still intolerable please holler. I'm about ready to implement a customization system so that you can tune it so that it's readable in your particular browser, but I'll hold off for now.

Now to take what I've learned here and see if I can transfer it to a few other projects.

And there are now date based archives, and I'm about to go fix the case sensitivity of the search engine.

Getting there, definitely getting there. Nit-like observation: in IE5.5, the grey background of the right-most comment-tally column just barely overlays the right edge of the main post content area (obscuring the last part of "or for that matter anythiXX", for instance). (Comment tally vous? Oh. Sorry. Really, I am. I swear.)

Okay, I've added an extra "em" to the right margin of the center content. Without using some tacky hack to mess with IE

's puny little mind I think this is as close to a compromise as I can get right now. Maybe I'll go back to absolute pixel positioning, but I'm not sure that worked any better.

CSS sucks. My big take-away from this experience is that not only was the browser upgrade project a big failure because it replaced broken layout engines with other broken layout engines, CSS is broken because quite a few apparently smart people have interpreted it in completely different ways, leaving me with layouts that should work but write fonts off the edge of the screen (in different places in different modern browsers), units which mean different things in different browsers, and so forth.

#Comment Re: New Look Redux made: 2004-02-04 08:01:43.613522+00 by: Jeff Cheney

It's not CSS that sucks, or even browser bugs, but your code. Your HTML makes references to selectors that don't exist in your CSS and your CSS contains selectors that aren't used in your HTML. It looks like a sloppy cut and paste job to me...

CSS Does suck.. once you get beyond the very basics. You are exactly right, lots of smart people implemented it differently. And the more complex ANY spec is, the easier it is to do that. Comment: Because I'm a left to right reader.. I LIKE the title, author and comment link on the left. Still looking much better.

And Dan: Thank you for trying to be multi-browser compatible.. and just think: We would not be griping if we did not care about Flutterby.

Jeff, I'm willing to accept that my CSS sucks. And actually, in writing some test cases to prove you wrong I've discovered some of those ways. However...

Several of the classes in the HTML are used by things other than browsers, and, of course, the CSS file is used by a bunch of different HTML pages. I think I've cleaned them up now. Just to be clean, I wrote up a simple test case. On the three browsers I'm playing with it renders differently. I think I've figured out why Mozilla sometimes renders the right column off the right edge of the page area (where it's at least nice enough to offer me a scroll bar), I haven't figured out why sometimes I get cropped text in the left column or why Mozilla

puts the header at a different place than Opera 7.21 or IE

And that's a super-simple case, I'm just trying to get close, not trying to do any pixel perfect positioning, and I haven't tried it with any of the Mac browsers. I submit that anything that doesn't have at least a relatively common definition of an em (especially one that's so well defined in the type world), that appears to encourage rendering outside its appointed area, and has a broken notion of relative font sizes, sucks.

Ok, change is good - but how do I find webvoyuer now? Not that I go there every day ....

I like this revision. I guess I keep a narrower web browser than most folks, since the left-had list o' blogs was making the center content gutter pretty narrow.

You know... Now on IE 6.0.2800.1106 on Windows 2000 SP4 and Windows 2000 SP2, I've got the clipping problem that someone else mentioned. The first entry (more or less) just doesn't seem to paint (most of the time). I can scroll the browser to force a repaint.

Camworld does the same thing to me (and it's heavily CSS based). Clearly it's not a Flutterby issue, but I'd love to know what the formula is to get IE to do this.

Ziffle: Take heart, I'll put up a "Dan's bookmarks" somewhere soon, perhaps not on the main page. For now it's Voyeurweb. And I didn't say it when I mentioned Same River Twice, but you are the exception to the "only ex-river guides should bother to see this film".

MarkD: You weren't the only person who didn't like the narrow column, and since that has been a bitch of mine in the past I had to respond.

Mark (aiworks, for those of you following along at home): Egads, I just looked with 6.0.2800.1106 and I'm not having a redraw problem, but that right colum margin is... grotesque. Funny that it didn't look that bad on Charlene's Windows 98 machine with IE6 this morning.

It's interesting to read the various comments, especially comparing and contrasting what I get in email with what people are posting here, on the design of Flutterby.

The titles on the right side evolved because when I first switched to a database backed system rather than the one that built HTML files directly, I got several comments complaining that the resulting formatting looked like a dump of a databse table (which it was). To keep the sort of flowing ramble that the earlier layout had, I wanted to de-emphasize that things were broken up into records. Then the titles got added for RSS, and we went multi-contributor, and now that leads to people attributing Meuon's words to me.

On wrapping the entries around the titles, every time I've tried to change layout I've gotten notes about wasted space. Flutterby readers value their pixels. I wanted to devote sufficient space to the titles without wasting that space on longer entries. The voices against the wrapping screamed louder, but only by a little bit. But the "give me more text per pixel" voices were responsible for going to two columns.

I was a little surprised at the negative reaction to the additional graphics since it got pretty high marks last time I showed that design around, but it really was extraneous, and I'll bet much of the negative reaction this time was due to browser differences, with text overrunning the graphics and mis-alignments of borders.

The only feedback I've gotten so far about dropping the links from my bookmarks in favor of links of users who post comments is Ziffle's comment above, which kind of surprises me. I'm still up in the air about it, but it keeps me from clicking on links in the middle of the day when I see someone has updated, and I hated that I kept getting blindsided by Flutterby regulars whose sites I wasn't acknowledging. Since I've committed to making Flutterby a community site, I figured that'd be a step in the community direction.

I'm not convinced that CSS sucks - or at least not to the degree espoused here. In general, I've been pretty satisfied with the things I've done with it - no less so than random frustrations I have with any other language/spec/technology. Dan, have you tried using different doctypes? I've found that there can be a drastic difference in CSS behavior between HTML 4.x and XHTML. XHTML seems to be much more solid and consistent.

The titles on the left threw me, but I think that's only because I've gotten used to the old (can we call it "old" yet?) layout. When I first started at Flutterby, it bothered me that they were on the right.

I really, really like the dynamic user list on the left. It was a "cool beans" surprise to find that we float to the top as we post :-) I almost never used the old bookmark link list so I didn't notice it was mising. (I went through it once or twice when I first came here, but after that the links had been moved to my own bookmarks - <geekboy>or been memorized</geekboy>.)

I'm still seeing the random redrawing - or not redrawing - problem with the content column. Not sure whey this is happening. Haven't had time to really review the code.

Oh, and thank you, thank you, thank you for a [date-based] browse interface to the archives.

Except that I just discovered it has moved to where the bookmark links were. I know you wanted to cut down to two columns, but I liked it higher up on the left. Right now it's a casualty of Below The Fold Syndrome (for me, anyway).

Oh, I see what's happening. You're trying to use CSS as a replacement for tables. This is the currently in-vogue notion, but my professional advice is to Not Go There.

Use all your tools in concert. Don't just abandon one to chase the latest craze (I know you don't really think like that, but I'm on a roll) - no matter how the fu-fu buzzword groupies dance around you.

Actually, I don't think I'm trying to use it as a replacement for tables, I'm still using tables where tables are appropriate for tabular data. And actually I think I'm pretty close, there's a little restructuring and probably some better class rather than id tagging that I should get right. I'm trying to use markup that semantically expresses the document, because if CSS lives up to its promise that means I should be able to do a lot of customization easily (which I think Diane saw last night...).

DOCTYPE wise I appear to be publishing HTML4, and I really should try going to XHTML transitional. I think the reason I haven't is that I'm not totally certain I've got the tag hierarchy rules properly coded into the CMS, and I believe that XHTML has some wonky rules about things like the values of name attributes that I haven't addressed (that could have just been some transitional spec that I saw, though).

On the position of the dynamic user list, do you think it'd be reasonable to drop the "latest comments" table down to 15 entries again? I like it longer, but I also like the dynamic user list being visible and usable.

#Comment Re: a couple minor bitches made: 2004-02-05 12:53:16.472633+00 by: John Anderson

Overall I like the new look, and it renders fine on the browser platforms I use. That said, there are two minor nits I'd like to pick.

First, I find it mildly aggrevating that the 'next unread comment' link moves from the right column on the front page to the top on the actual comment pages. I understand what you're trying to do, but why not just have a standardized top block with 'next unread comment', even on the front page? (You can still have the link on the right too, and I that would be the way I'd do it.)

Second nit: I think it would be useful if the butterfly picture in the top left was a link back to the front page. Occasionally, I'll read through new comments, then realize I want to make a comment on a thread, which means I have to bounce back to the front page, then to the post I want to comment on. I usually end up editting the URL text to get back to the front, and it seems like it would be nice to just whip the mouse pointer up into the corner and click.

#Comment Hey Shawn made: 2004-02-05 18:52:20.602305+00 by: aiworks [edit history]

I think I figured something out about the painting issue. Here's the behavior I'm seeing:

-Close IE; Open an IE instance; Maximize IE; Go to Flutterby; First part of content column is missing.

-Close IE; Open an IE instance; Leave IE instance at default non-maximized state; Go to Flutterby; Everything is fine.

I've tried this several times now. The issue appears to be related to maximized IE browser windows. Is this just a fluke on my setup or are you seeing this as well?

Dan; Sorry, That should have been, it looks like you're trying to use CSS... I still think it looks that way. If I may ask, why are you not using tables to define the layout framework of the page? You seem to be implying that this is not an "appropriate" use of tables. Why not?

This is, in my opinion, the biggest mistake that people make with CSS. It also seems to be the most prevalent attitude regarding CSS (that it is a replacement for using tables to structure your page layout). As I mentioned, I've generally had good success using CSS, but I use tables to define the layout framework and then CSS to fine-tune it. When one builds a house, one does not build the frame out of sheetrock.

As to the "latest comments"; 15 would be fine for me. If I don't get around to checking back at Flutterby every day or two, I have come to accept that I've lost some of the discussion and just move on. (This isn't soley a Flutterby issue, I've had to accept this pretty much everywhere on-line.)

Mark; No, that's not quite what I'm seeing. I almost never use maximized browser windows, and I've never had one maximized on this computer. As somebody else mentioned, I can get the text to reappear if I scroll away and come back (sometimes, although it's getting more reliable). It does appear to be a refresh/repaint issue with IE.

Shawn, you're right. I do aspire to a state where the markup is truly semantic, where the tables represent data that's best viewed in two dimensions with the dependent variables along one axis and the independent variables on the other. Just as I'd much rather use <em>, <strong> and <cite> than <i> and <b>, I want to be as abstract as possible in marking up my documents. And that, to me, is the promise of CSS; the further I tie in presentation to my document the closer I am to saying "screw it, let's just use PDF or Flash".

I've held this belief since before I knew about HTML (good time to snicker over the HTML browser I wrote back then )and I've played with assorted tools to try to mine that sort of data, so this isn't completely a pipe-dream, although I admit it appears to still be a ways off.

Shawn and Mark, what video drivers are you guys using? On a Win2k machine with a GeForce 4 MX 440 driver 6.13.10.4109 I too see the problem if I maximize the window, if I select the text with the mouse it then appears. Bizarre.

On my W2k SP4 desktop: a 2 monitor setup using an NVIDIA Quadrop NVS AGP8X (1152x864x16bits x 2 monitors). Driver version is 4.18.20.20.15 (I believe the latest).

On my W2k SP2 laptop: Intel 82815 (1400x1050x16bits). Driver version is 6.13.1.3196 (almost positive this is the latest).

For grins I bumped the bit depth up to 32-bits on my desktop and it didn't help.

I dug through the MS knowledge base and didn't find anything applicable at first glance other than a note about pages displaying strangely if the CSS file doesn't download correctly. I cleared my IE cache (through the menu and then actually cleaning up the Cache directory on the FS), went back here, and still get the same results.

Another strange thing I've noticed: when I have the block missing about 90% of the time that I hit Ctrl+A (to select all), the missing text reappears selected (along with everything else on the page). The remaining time the hidden text does not select.

My gut reaction: there's a race condition in Internet Explorer (or some kind of combination of stuff: Google toolbar?) that's causing this. That would definently explain why it is so hard to reproduce this espcially in light of all the threads that IEXPLORE.EXE spawns (although with all of the threads that the COM subsystem tends to start that may not be a valid metric to look at). I think I mentioned that Camworld used to do this to me all the time, but now that I think about it I believe that it fixed itself about 8 months ago. I wonder if the HTML and/or CSS was significantly different somehow (maybe even just more whitespace), if that would have an impact?

#Comment Re: made: 2004-02-05 22:27:05.638447+00 by: aiworks [edit history]

I've pulled down the main page and the CSS to play with it locally. If I go into your .weblogentrybody and uncomment the "width: 75%;" line, the problem is fixed for the body entries but not the date lines. If I then comment out the "float: left;" in .weblogentryheader, then everything is fixed (except the format looks a little strange... but the content paints).

I'm going for a record to see how many posts I can make in a row with no one in-between. I'll be the supreme Flutterby multipost champion...

That last post about "Anatomy of Burlesque" looks like it fixed the loading issue for me (which makes me think even more that this must be an IE race condition). Or, maybe you just need to talk about Canadians more.

#Comment Re: made: 2004-02-06 00:38:20.204264+00 by: Shawn [edit history]

Dan; I guess I'd need to sit down and have a rambling discussion with somebody who believes the same you do, because I'm not getting what you're after. Divorcing data from the presentation I can understand. Divorcing the presentation from... the document(?)... is what I'm not grasping. To my way of thinking, the document is the presentation. If a document's purpose is not to define the presentation of data then what is it?

I'll admit my video situation is a bit messy here. I'm using a borrowed laptop until the one I sent through purchasing finally makes its way here, through the official wipe-and-image-install policy and to my cube. It tells me the display adapter is a Dell 8000, but the driver is Nvidia (4.4.8.2). It also says I've got something called the Microsoft SMS Mirror Driver installed (ver. 2.0.1493.3000). WinXP Pro.

The redraw issue has mostly gone away for me as well now. The first post shows up and stays there (so far), but I am still seeing occasional random missing text when I scroll around. Not as drastic as before, though.

I'm not sure I like the new look, but I'll give it a chance. I typically don't see a need to change something that I think was working before. I do have one real issue with the new look though, and that is with the layout of multiple entries for the same day. Visually it is hard to see the end of one entry and the beginning on the other when reading the text. They seem to flow together. Perhaps a bigger brake is needed between entries. This is with Netscrape 7.1 and Konqueror.

I agree with nkane, there needs to be some better visual separation between entries on a single day. And this under Mozilla 1.4 under Windows XP and Linux.

That's better, but it still all kind of runs together when the posts are short. What about putting the date in the left column and using the titles and author and comment links to separate the entries? Or a little more whitespace might work too, but then I'm on a 1600x1200 monitor and can afford it.

On another note, the right padding for the entries has been slowly reducing and it has now reached a point, IMO, where it has gone too far. The text is just starting to be clipped by the right column. IE6, WinXP.

I tried the title/author/column to separate the entries and it looks too much like the results of a SELECT ... (which was the complaint I got last time I did that, when I first went to a database backed system), especially for the small entries. I'll play with things, maybe some faint separator line.

My only suggestion would be to try and center both the butterfly and the datelines against the posting body text and not the larger containing column.

Understood. The visual I got while describing it was not optimal. Just brainstorming.

I like the idea of a soft/silohette/butterfly separator, but all I'm seeing right now are black boxes. I'll e-mail you a screenshot.

Mark, I'm going to have to do some screwing about to do a centering against the body text. I like that too, but I'll have to restructure some of the HTML to make it happen right.

Shawn, I forgot that IE doesn't have support for PNGs and some people don't have a plug-in installed that can deal with it correctly (and some plug-ins probably don't handle alpha correctly). PNGs are so nice because they've got alpha (on every other browser) and just do a bunch of things nicely (although now that GIF is unencumbered I suppose I could use that...), but I've made the tick JPEG for now.

Hey, I'm a big PNG proponent. (The screenshot I was putting together to send you is a PNG.) Sorry I didn't take the time to figure out that's what they were. I didn't know IE had problems not displaying them at all (righ-click|properties only gave me page info). Last year I identified a problem with IE not rendering colors properly in PNG files, but I've never had it just plain not show them.

Finally was able to sit down at the home computer (been 4 days). It's all good in Mozilla 1.5/Win2k.

On XP/IE6, I'm losing the right margin of the main body text underneath the right sidebar.