Main | Web Standards »

June 18, 2003

Where are the great CSS books?

So I went to the usual places (B&N, Borders, etc.) this past weekend. As always, I scout for good tech books. One subject I always look for is CSS. As usual, there was little to pick from.

I have the O’Reilly pocket CSS reference (Eric Meyer) as well as Eric Meyer on CSS. Both are good books on CSS, but from a designer perspective, they’re not terribly great. (Not to discredit Eric — his technical merits are nothing to sneeze at, but even Eric has said he’s “not a strong visual designer.”)

As a designer-wannabe, I want to see some CSS books that show what you can really do with it. I’m talking CSS Zen Garden kind of stuff. Where are these books? Maybe I’m looking in the wrong places, but I haven’t seen them. I can’t help but think that designers out there are intrigued by CSS, but once they look at the printed works on the subject, they run away thinking “well, I could do better than that with a couple of table tags.” A few CSS books where a good designer and CSS-techie collaborate together would be perfect.

If you see any, let me know.

January 29, 2003

Styling the hr tag

Well, I changed my home page template a tad. Instead of using a border of the container div to draw a divider line inbetween blog entries for a single day (see the bottom of this post for example), I changed it to use a hr tag. Much better in terms of markup. It makes more sense and will render better in text and WAP browsers for that matter.

Ok, so how do you style it properly? No matter what I try, I can't get rid of the padding. Here's what I have so far:

.blog hr {
	margin:0px;
	padding:0px;
	border-bottom:1px dashed #777;
	border-top:0px;
	border-left:0px;
	border-right:0px;
	line-height:0px;
	height:1px;
	display:block;
}

So with a height of 1 pixel, no margin and no padding, why is Mozilla and IE rendering with extra padding? This is more noticable if you use my 'Classic' stylesheet -- jump to the Preferences page to switch to it and see what I mean. Is it just a rendering bug in Mozilla and IE? Opera 7 gets it right. Even Safari gets it right.

October 23, 2002

A CSS Wish

Here's something I'm looking for. I want the ability to style sites the way I want. For example, the new Wired site is designed so that it's entire presentation is controlled by CSS stylesheet rules. Well, I happen to like the way it looks, but maybe I want it to use a slightly different color scheme. Or perhaps a different font for the sidebar. Or maybe I want to adjust the line spacing for the articles? Well, I realize that both the Internet Explorer and Mozilla browsers allow a user-defined stylesheet. But here's the problem: I don't want these custom CSS rules to be applied to ALL sites, just to wired.com.

This may never happen for Internet Explorer, but considering that Mozilla is open source and all, I could see a new mozdev.org project for this feature. I'd write it myself, but I have absolutely no experience developing with Mozilla. It's something I really want though, so I may have to take that plunge if someone doesn't beat me to it.

Another approach to this feature would be to use a proxy engine. The Proxomitron would work-- it's customizable enough that it could do this, and it will work with Internet Explorer. But I'd still prefer a native Mozilla extension.

Update: Yes, the Proxomitron can do this trick. Creating a custom web page filter for Wired.com:

URL Match: *.wired.com
Matching Expression: http://*.akamai.net/*/www.wired.com/*/wnScreen.css
Replacement Text: http://bradchoate.com/play/wired.css

My custom stylesheet just so happens to hide a few of the ads and sets the font for the articles to Times New Roman. It inherits the existing stylesheets, but adds new CSS rules with the "!important" marker so they get enforced over the existing rules.

October 11, 2002

MSNBC.com and Mozilla

I nearly fell out of my chair this morning when I found that MSNBC.com's navigational menus now work in Mozilla! They appear to have dropped the ActiveX control they had been using (which naturally only worked in Internet Explorer) and have gone for a cross-browser compatible, DHTML solution. It seems to look and feel just like the ActiveX menu system. I wonder what caused them to do this? Is Netscape/Mozilla/Opera making a significant dent in IE's marketshare?

September 14, 2002

Zeldman's 'Jakob Nielsen Corner'

Take a look at the buttons on the right of Zeldman's site-- the ones labeled "Essentials" and "More Stuff". They're toggle buttons that display/hide extra content on the page. Nifty, eh? Well, not so much.

To me, this is a good illustration of silly uses for CSS display rules. Is the content only loaded upon clicking the button, thus preserving bandwidth? No-- the content is loaded when the page is fetched-- it just isn't displayed. Well, surely the site uses a cookie to preserve the preference of whether to display or hide the content! Nope-- refresh the page after displaying the items and it will revert to hidden view again. Totally useless. (The same can be said for the 'skin' buttons which do little more than change the current font. That preference is also not preserved. Is there some button to hide the 'Jakob Nielsen Corner' itself? Font preference is preserved-- at least something works!)

To make matters worse, he's hiding a block of content that is captioned as "Essentials". If it's so essential, why force the user to click a button to see it? I'm so confused. As for the "More Stuff" button-- why hide the sidebar content? It's not in the way of anything. It serves a purpose.

Lets not use the DOM to do stuff just because we can. Let's use it to make sites better.

P.S.: Why is Zeldman using the XHTML 1.0 Transitional DTD?

September 11, 2002

99.9% of web sites obsolete?

Are 99.9% of sites really obsolete? No. Non-standard? Maybe-- I haven't counted myself. This site does it's best to be standard-- the front page has actually tested as W3C-compliant a time or two. Does that fact make this site non-obsolete? Hardly. :) But at least it complies to standards!

August 7, 2002

XHTML 2 Working Draft

The W3C has released their XHTML 2.0 working draft. Not a full recommendation yet, but some notable changes are present: <br> is deprecated. Oh and so is <img> (no... we're not returning to using Lynx, the W3C just prefers we use the <object> tag instead).

July 29, 2002

Title attribute usage

Jesse Ruderman apparently (random.foo) doesn't like hidden meta-data in anchor tags. He's even developed a bookmarklet to dig 'em up and make them visible. He probably uses it on dive into mark too (hat tip to Mark for such nice comments today!).

As a side note, I think Jesse makes a good point-- perhaps there is some title attribute abuse going on. And what does Mark think of title attributes? Thumbs up, but all things in moderation.

July 12, 2002

Internet Explorer rendering problem

Here's a curious rendering problem with Internet Explorer. If you're a web designer who's run into this issue and knows a good workaround that preserves the features of 'Case #1', let me know about it!

July 8, 2002

TopStyle 3.0

If you do web design, you need TopStyle Pro 3.0 (screens). Period. Force CSS into submission! A great tool to use together with HomeSite or Dreamweaver or even Notepad!

Download the trial and give it a spin (you'll have to settle for the version 2.5 trial until the 3.0 trial is ready-- 2.5 was great too though). You'll be hooked in less than 60 seconds.

Categories

Archives

Powered by Movable Type