Previous: important matters (60)

Next: learning curve (25)

it's official - i hate css

Post #597 • August 8, 2005, 2:24 PM • 35 Comments

I decided my personal site was a little too understated and redesigned it. It works well in Safari, acceptably in Mac Firefox, passably in Windows Firefox, and poorly in WinIE6. The problem (I hesitate to call it a bug, because it's based on a total misinterpretation of the box model up in Redmond) that was causing the thumbnail images to fall to the left is solved, but new probs have appeared in WinIE6: none of the navigation categories right-align, and the Einspruch logo, which appears via a CSS image replacement, is strobing upon mouseover.

At this point, I've had it with web design. I can script object-oriented PHP to execute a three-table equi-join in MySQL, but I can't make the chicken-plucking right edges line up in a navigation bar in CSS, at least not universally. I have decided that this is not entirely my fault or Bill Gates's. Part of it is that CSS is a lousy language.

It's okay for basic elements (I redesigned my whole page to my satisfaction in Safari in a few hours), but it's missing the one thing that makes layout possible: the ability to describe how areas relate to each other. The W3, trying to replace tables for anything but tabular data, came up with specifications that don't work as well as tables for laying out areas in a grid or grid-like arrangement.

Instead we have things like float:left, which tells the division to scoot around to the left of whatever comes after it. In CSS, my favorite layout, header, three liquid columns, and footer, becomes akin to herding crack-addicted waterfowl. You can do it - but with about twenty times as much code as a three-row table, and the added bonus that by the time you get those wrapper divs in the right place, you have done effectively zilch to separate style from content, which was the whole idea.

I'm led to understand that XSL parses these formatting issues server-side, and therefore consistently, but have you seen the XSL spec? Hoo boy. And that is the reason, ladies and gents, why the next redesign of the site may see it converting to Flash.

Comment

1.

Jack

August 8, 2005, 2:49 PM

You know, of course, Franklin, that this is all Greek to most readers, certainly to me. Still, if it makes you feel better to vent...

2.

alesh

August 8, 2005, 2:49 PM

Correct. I have been doing the new MSG Newness site, which employs what looks like a simple 4-column design. Needless to say, getting CSS to do this was a massive pain in the shin, although I believe 90% of the blame falls on Microsoft (who's infamous IE bug I attribute to maliciousness, not stupidity) and my own lack of understanding. I finally got it to work through sheer trial and error (and cribbing from the O'Reilly CSS Cookbook).

It would be great: a flash site from franklin? But I'll believe it when I see it.

3.

alesh

August 8, 2005, 2:53 PM

Let's be fair, tho... the advantages of CSS outweigh the downsides. And there is really good, clear-eyed logical thinking behind it.

Maybe the solution to what you want to do is to use absolute positioning inside one main DIV?

BTW, the MSG site also includes my first PHP script, which scans a directory of pictures and picks one at random on page load.

4.

Elizabeth

August 8, 2005, 4:18 PM

Alesh; the shin????

5.

Franklin

August 8, 2005, 4:19 PM

Maybe the solution to what you want to do is to use absolute positioning inside one main DIV?

That still won't right-align the navigation categories or make all the buttons the same width, which perhaps requires that I specify width: for each button. If they were sitting in a table cell they'd all work without even having to so much as width: auto.

Look at your CSS for that 4-column layout and consider what had to be done to replace
table-tr-td-td-td-td. In my opinion, that's a waste of your time as a designer. (Go ahead - try to make one of those columns liquid. I dare you.) My vote is to use the table, and give each cell a class, putting the appropriate brackets around

td id="left"

Then you can use divs inside each cell for vertical layout and write all the CSS you like:

td#left { width: 20%; }
td#left div#shameless_advertisement a:hover { background-color: green; }

Yes, that really works. You can even skip the div. It won't validate past about html 4.0 strict but, well, too bad - neither does Google.

Congrats on your first php include.

Jack, sorry about the Greek.

6.

Dan

August 8, 2005, 4:37 PM

> And that is the reason, ladies and gents, why the next redesign of the site may see it converting to Flash.

Oh, Lord.

Resist the urge, Franklin. Or resolve yourself to do it exceedingly well.

Dependence on Flash has turned countless galleries' webitse and artists' and designers' portfolios into virtually unnavigable sites that essentially render my browser little more than a dumb window frame. And I'm growing more and more weary of it.

When I'm navigating a site, I want to be able to open a link into a new window or tab with a simple key combination; I want to be able to navigate foreward and backward through my history via keyboard shortcuts; I want to be able to deep link/bookmark; if I refresh a page or hit the back button, I don't want it to throw me all the way back to the splash/intro page; I want to be able to scroll and navigate through a page with my space bar, arrow keys and home/end/pgup/pgdn; I want a scrollbar that works like every other scrollbar I've ever used; I simply want to be able to copy and paste text for the purposes of quoting.

In short, I want to be able to interact with a website in the way that I've grown accustomed, and to not have to master a whole new, reinventing-the-wheel interface with every new website I come across.

So, for a more or less standard website: a big 'no' to Flash on all those counts.

Other misc. complaints...

As far as I'm aware, Google is blind to Flash sites, so getting yourself indexed comes down to the strength of your metadata (and I suspect Google pays less attention to that than it does to content).

It's more of a personal quirk than anything, but the version of Firefox I'm using doesn't have the Flash Player installed. It's a conscious choice (as it's the best way I've found to neutralize all of those Flash-based animated banner and sidebar ads out there) and I merely have to fire up IE6 to view Flash content. You should still bear in mind, though, the effects dependence on a plug-in, however ubiquitous it might be, has on accessibility.

I suppose that many of these objections could be overcome with a HTML/Flash hybrid, and I trust you of all people to keep your design nice, simple and usable. Nevertheless, let my strong objection officially be noted: I hate Flash.

And, really, what's stopping you from going back to tables?

(whoo... that's a rant...)

7.

oldpro

August 8, 2005, 5:09 PM

Well, here's another rant.

I don't know squat about all the computer geek stuff, but I do have a few things to say about design.

I am an ultra simpleminded fanatic of the Roger Black school when it comes to web presentation. The important thing, the "bottom line' as they say, is getting the art, writing, accomplishments, messages and all that across as quickly, easily and readily as possible.

1. You want people to read your text, so make the text large and the value contrast as extreme as possible. this usually means black on white or vice versa. Boring, but effective.

2. Shorten the opening text by 2/3, no scroll. You want to say "I am great" and look modest and unassuming at the same time. The text is good but maybe Ms Rabbino will consent to a severe editing job

2. You want people to read the pictures as accurately as possible. Line up the thumbs in a row. Ditch the purple. (please!)

2. You want your name to jump off the screen. What you have is too arty, and it takes time to decipher what lookes like a Nabi bookplate which needs translation from the German. Give 'em FRANKLIN EINSPRUCH!

4. If you must have boxes around text keep the text in the boxes, otherwise it just looks like something is not working, (which is maybe what is happening on my computer).

Sorry for the tone, but I do it so often everyday in crits I can't help myself.

8.

Franklin

August 8, 2005, 5:10 PM

Dan: noted. All of your objections are valid ones.

The reason not to go back to tables has to do with validation. Validation as something like XHTML 1.1 requires pretty clean content-style separation, and guarantees in theory, but only in theory, that users will see similar results in their various browsers. In practice, this is more likely to occur using a sprinkling of tables. After making a layout nice and compliant in Safari and watching it derail like a freight train in WinIE6, I changed my mind about the worth of validation.

To be fair, there are things you can do in CSS that you can't do in tables. But there are also things you can do in Flash that you can't do in either. That doesn't mean that they're worth doing.

9.

Dan

August 8, 2005, 5:50 PM

But tables aren't necessarily incompatible with CSS, right? How about, for example, laying out your category sidebar in a table within your navigation div? Use it where you need it, w3 be damned.

That wouldn't be too different from embedding a Flash movie for just the nav. (Pitchfork uses some pretty gratuitous Flash in this way, which isn't so bad, though it does leave anyone who's lacking the plug-in out in the cold.)

10.

Hans

August 8, 2005, 5:57 PM

With my brother and his team !! 3 month ago we tried to redesign a huge and important German weekly into CSS, and we failed so completely, that it was a shame for us. The design based an tables should remain the same, but we started to make it look like 1to1 in Firefox, and we failed there already, what was for sure not Firefox fault. In the end the Weekly made other important changes f.e. that readers can now again comment on articles, and that makes it almost like a Blog (not by now that much comments, but maybe in the future)
As with skype, maybe Franklin could sometimes arrange a conference via the skype chat, maybe we could try it ones, must be funny.

11.

catfish

August 8, 2005, 6:01 PM

Franklin, the purple is beyond the pale and is not the fault of CSS, Steve Jobs, or Bill Gates.

oldpro's other points are valid too, no matter what you think about his numbering system. His #4, though, does not appear to relate to IE 6 or Firefox, both of which I used to view the site. The text stays in the little boxes.

As far as the browser wars go, seems like whatever you do, it ought to look good in IE 6, since that's what most people in the world are using. In IE6, the text is huge.

Rabbino's paragraphs 3 and 4 (I counted three times to make sure I got it right) are the only ones you need. The others are highty-tighty, but don't really say much. That's a content issue for me, though some (many?) like highty-tighty art writing.

Logos are a tough problem. To do them well takes a long time. I don't know if they are worth it to an artist. They seem better suited to a standard business, like manufacturing. Yours is not ready for prime time yet and you many not need one anyway.

12.

catfish

August 8, 2005, 6:05 PM

Looks like I spell like oldpro counts.

13.

Hovig

August 8, 2005, 6:10 PM

Microsoft responds to CSS developers: Standards and CSS in IE7 [beta 1] (via Jeff Zeldman).

We fully recognize that IE is behind the game today in CSS support. [...] I believe we are doing a much better service to web developers out there in IE7 by fixing our known bang-your-head-on-the-desk bugs and usability problems first, and prioritizing the most commonly-requested features based on all the feedback we've had.

14.

Dan

August 8, 2005, 6:33 PM

> ...and the Einspruch logo, which appears via a CSS image replacement, is strobing upon mouseover.

Might this somehow be relieved by changing it from

'background-image: url("http://www.einspruch.com/styles/004_blue/einspruch.png")'

to simply

'background: url("http://www.einspruch.com/styles/004_blue/einspruch.png")'?

Just a thought. (That's how my banner is set, and I don't see any strobing in IE on my site.)

15.

Franklin

August 8, 2005, 6:53 PM

I think that background: is abusing the shorthand, but I changed it. Does it still strobe?

16.

Franklin

August 8, 2005, 7:27 PM

I found a suggestion to double-buffer the element. Try it now.

div#navigation p.franklin
{
background: url("http://www.einspruch.com/styles/004_blue/einspruch.png");
}

div#navigation p.franklin a
{
background: url("http://www.einspruch.com/styles/004_blue/einspruch.png");
}

17.

Dan

August 8, 2005, 7:28 PM

> Does it still strobe?

I'm back home now, in Mac land, so someone with Windows close at hand will have do the reporting on this.

One other thought, though, as I look at things again, is to try specifying the background image under "div#navigation p.franklin a:hover" as well. Redundant, yes, but maybe worth a try.

18.

alesh

August 8, 2005, 7:39 PM

Franklin~ I don't know all the various pros and cons to argue the merits of divs vs. tables, but I agree that the argument that the content is not any more or less separated from the formating with CSS. I have to dig out that book, but I think making one of the columns resize would be fairly straightforward??

Hovig~ I just don't buy it. The object width bug in IE, and a couple of the other more infamous ones, could have been fixed by one programmer in the course of a leisurly afternoon. The fact that it wasn't done years ago is Microsoft saying more then "we don't have to, so we won't": for me, it's pretty conclusive proof that they're leveraging their advantage to DELIBERATELY make web developers' lives more difficult. In some way they've got it figured out that this makes them more powerful. Now it looks like they've back-burnered this even in their new version.

And incidentally, a lot of the changes that ARE being made in the new version are an answer to Firefox.

19.

oldpro

August 8, 2005, 7:40 PM

That''s Postmodernist counting, Catfish, and if you don't like it you are just not with what's happening.

At least you don'rt spell like I spell. That would be a disaster. That's why I keep the little dictionary alias right on my desktop.

20.

oldpro

August 8, 2005, 7:43 PM

And furthermore, i am not even going to try to design a web page until the geeks get all this garbage standardized and make it easy for the duffers.

Problem is, they just hate doing that.

21.

catfish

August 8, 2005, 7:58 PM

oldpro sez: ...until the geeks get all this garbage standardized

The real problem is they don't know how to do that. But that purple Franklin is using, that's not a geek problem. Dig, dig.

22.

alesh

August 8, 2005, 9:12 PM

oldpro~

i'm not sure i've ever agreed with you more. I'm a graphic designer by trade, and as of less then a year ago i'd completely sworn off web design (even though I have old roots in programming) because the technical aspects of it were far more important to getting it right then actual design issues.

But there are geeks and there are geeks. And the geeks at W3C ultimately have their hearts and minds in the right place - they're after web standards that are powerful enough to let experts do whatever they want, and let novices create attractive and functional web sites with minimal web knowledge.

The problem is that their word is, to paraphrase an ex-girlfriend, kind of like congress without the navy to back him up: their standards are only as effective as the extent to which browsers comply to them. And internet explorer, which 95%+ of the web uses, complies poorly.

Me? I ended up biting the bullet and am learning as fast as I can. Ultimately, the regular guy is going to get stuck with flickr, blogger, myspace, and all that. Then again, maybe IE7 will get Microsoft's shit in order a little bit, the thousands of sites that preach web design beauty will become consolidated under something digestable in an afternoon, and the common man will be able to create his own web site. I doubt it. I'm betting on Blogger.

23.

alesh

August 8, 2005, 9:20 PM

oh yeah, I have some actual thoughts about einspruch.com...

I actually don't mind the styleized logotype (the name of the artist appears prominently in the page name), and I don't mind the background color. I do, however, need to see a neutral border around the images; they can't abutt the colored bg directly. This is true for some of the images in 2004, but (CSS to the rescue) you could easily add a white or black border to all the images.

Incidentally, when I click on "Images," i want to see images. I do NOT want to be asked the 2004/2005 question. Sort the images chronologically if you want, but show them to me.

IMHO, your thumbnails are way too small. Then again, I guess you get an idea of how I feel about thumbnails from my site (which, btw, i'm going to be re-doing as a single-page php/css affair).

24.

Hans

August 8, 2005, 9:25 PM

Yes, Alesh, why care the design, what can do so many geeks better with CSS or without than I can, when its about good and new content? Thats why I like Blogger as you do, wich gives everybody a usable frame to work in. So here we get at Franklins Artblog a strange discussion on IE6, IE7 and IExyz instead of the real Art-Stuff-Questions ;-)

25.

Franklin

August 8, 2005, 10:09 PM

Re: site suggestions, starting with Oldpro.

1. Please note Catfish's complaint about "huge" text. Text is set to .8 em. Smallish, but not in all browsers, and not in all screen resolutions. Some things are beyond my control. Not that I've achieved it, but boring and effective ought not be mutually required.

2. The whole text thing at the beginning is a snoozer. That's gotta go.

2. I tried. They don't line up right in any browser. The purple was refreshing after looking at white for so long. It is no longer refreshing.

2. I take Nabi bookplate as high praise. It works better on my business card than here.

4. Text is coming out of the boxes? Oy.

Catfish:

it ought to look good in IE 6...

Sad but true, hence my frustration. See other points addressed above.

Hovig: I'll believe it when I see it. BTW, am I right about XSL parsing server-side and getting around all these issues?

Alesh:

I do, however, need to see a neutral border around the images... Yuck!

I do NOT want to be asked the 2004/2005 question.

You will when it becomes the 1999/2000/2001...2005 question. I have images going back that far, tons of drawings I haven't documented... we'll need it.

...your thumbnails are way too small.

They might be. But if three dozen end up on one page, I want that baby to load up nice and quick.

You'll be glad you went to the one-PHP page. Perhaps not immediately, but definitely the first time you redo it.

Sorry to Hans and all for the geekery. Some of us enjoy it even as we suffer.

...

It occurs to me after some reflection that I went about the redesign the wrong way, from the CSS up. I should have taken out some paper, paint, and brushes, and hacked the CSS to meet the design instead of the other way around. As it happens I have the Zen Garden book as well as the Eric Meyer books, and I will sit down with them and give all this some more thought.

26.

George

August 8, 2005, 10:52 PM

Franklin,

Regarding the thumbnails, I agree they should be bigger.

You are wrong about fast loading and size the way you're doing it. The thumb for June:Nude is 7k or so (a bit hard to tell) its 44x50 pixels. I saved out the big image at 88x100 pixels with jpeg resolution at 50 and the size is 3.5k. An image 175x200 jpeged at quality 30 is sized at 6.7k. Oh but I want high quality?

Try this in Photoshop. Save the image out as jpeg with different qualities and layer them together in a new doc, flip on-off the layers, I'll bet the difference between high and 50 is hardly noticable. Morover compare an image 200x200 quality 30 with one 100x100 quality 80+. First look at the size of the files. Then compare the bigger image scaled down by 50% to the 100x100. The way jpeg works, a higher compression on a bigger image is better than a lower compression (higher quality) on a smaller image.

I ran an exhaustive bunch of tests on this in June.

George

27.

oldpro

August 8, 2005, 11:42 PM

Franklin: "boring and effective" each relate to something different. If you are just making a web page for people to look at it should not be boring. But you are making a web page for a purpose, to get your pictures and your messages across, and you are of course assuming that these are what is interesting. In almost every case an arty web page is not only not particularly interesting but also gets in the way.

But then I am just a diehard Formalist.

28.

Franklin

August 9, 2005, 6:56 AM

George, the thumbnails are generated automatically in PHP from 500 or 600 pixel source images - if the function can't find a thumbnail, it makes one. I'm sure Photoshop can make them smaller, but the savings in effort, sparing me from having to make and upload thumbmails, is worth it. If you know how to control compression or image quality in PHP let me know. The thumbnails aren't for looking at - they're for remembering what image you've already seen, and I think they're big enough for that purpose.

Oldpro, my business card, which functions to get my contact information across, is artier than it needs to be simply to make an impression. The website is going to need to do the same thing. C'est la vie.

29.

beWare

August 9, 2005, 7:15 AM

Franklin, why all the quotes on your site?

30.

Franklin

August 9, 2005, 7:31 AM

For fun.

31.

alesh

August 9, 2005, 7:35 AM

Well . . . ok. But you're an aritst. You have an artist web site. Someone who comes to your site has to click a MINIMUM of three times before they get to see a picture. It really seems like a lot . . .

Auto-generating thumbnails with PHP is very impressive, but photoshop can auto-generate thumbnails too, and with setting you can tweak quality on. Again, it's a trade-off between geek cred and userfriendliness.

32.

George

August 9, 2005, 9:04 AM

Franklin,

Have a look at this function, lower down in the contributions there is some sample code for making thumbnails. It looks like the default image quality is 75 but there's an argument for "quality" which accepts values of 0 to 100.

imagejpeg doc link

33.

Hovig

August 9, 2005, 3:03 PM

Franklin - I'm hardly even sure how to spell CSS and XSL. Tables still pay my rent. We use XML and XSLT for some back-end stuff but other than using class elements to control fonts, colors and spacing, we can't afford to have anyone anywhere fail to see our customers' sites as intended. I didn't see anything on your site which tables wouldn't do. You're right that XSL would accomplish what you're looking for, but it seems like overkill. It would probably take less time to just redesign your tables when you felt like redesigning the site. As long as your content is nice and modular, you can adjust your templates as needed.

34.

Franklin

August 9, 2005, 4:45 PM

Alesh #31: You're right. Front page now loads up 2005 gallery. Still thumbnails, though. However...

George #32: Nice work. Thumbs are now 75px, saved at 40 quality. It's more readable. Here's what, though: I tweaked the code, thew away the original thumbs, and PHP regenerated them. Boy, that was gratifying.

Purple is on its way out, but not until I rebuild the page as a rails app.

Hovig, how do you feel about trying to get something to validate as xhtml 1.1, or something, then?

35.

Hovig

August 9, 2005, 6:19 PM

I don't use validation much, but then I don't do anything fancy. When we need to get fancy, we check our pages against every common browser.

Subscribe

Offers

Other Projects

Legal

Design and content ©2003-2023 Franklin Einspruch except where otherwise noted