T Bryce Yehl: Bryce's Adventures in CSS

Moving

Mon, 04 Nov 2002 20:15:07 GMT

I'm finally taking the plunge and switching to "MT". I'm not going to bother importing this weblog, at least not initially. Too much work for too little benefit. My archives can stay here indefinitely.

My new home page and weblog. Feeds are available in RSS 0.91, RSS 1.0, and RSS 2.0 flavors. I'm not going to set up RSS redirects. I don't like Userland's solution because any aggregator that doesn't understand the format will barf on it. HTTP 301 redirects are better supported, but I don't feel like reconfiguring Apache to allow .htaccess files.

For the couple of people that subscribe to my category feeds, I'll get around to re-creating those eventually. Stay subscribed to the current feeds and wait for an update.

Rich editing in Mozilla

Thu, 17 Oct 2002 20:27:38 GMT

"Composite is a chrome overlay which enables a streamlined Mozilla Editor for html composition in textareas. To use the editor, hit ctrl-e in a textarea." Unfortunately, seamless inline editing (like WYSIWYG HTML mode in IE/Win) is apparently being held up by an internal flame war among the Mozilla developers. [Dive Into Mark]

The inline flame war is Bug 97284 and has been going on for over a year. To me it has always seemed obvious that they should take a two-pronged approach, creating a "proper" implementation that embeds Composer and providing a wrapper that is compatible with IE's implementation.

I've got one gripe with Composite, aside from it not being inline: it doesn't support pasting of HTML that originates from IE/Win. I think the problem is with Composer, not Composite itself. Composer seems to want the clipboard data as "text/html", while IE supplies "HTML Format". They ought to be compatible with each other, but there's some sort of encoding issue that I haven't been able to figure out...

Blind man sues airline over web site

Mon, 07 Oct 2002 03:57:55 GMT

scubacuda writes "According to Law.com, Robert Gumson, a blind man who uses a program that converts website content into speech, is suing Southwest Airlines (with the help of Miami Beach, FL-based Access Now) for its website being incompatible with his screen-reader program. The case has been filed under the Americans with Disabilities Act under the untested legal theory that ADA provisions on the accessibility of public accommodations to the disabled apply to Internet Web sites just as they do to brick-and-mortar facilities like movie theaters and department stores. [Slashdot]

Dive Into Accessability.

New Look

Sun, 22 Sep 2002 20:06:01 GMT

Back in March, when I first started using Radio, many in the Userland crowd were complaining that switching layouts from tables to CSS was too limiting and difficult. I set out to prove them wrong by converting the default Radio theme to CSS. It was nearly pixel-perfect on all CSS-capable browsers, at the expense of some "CSS purity."

These days everybody loves CSS, even Scoble is doing it!

I've got no attachment to the default Radio look. I started working on a fresh design months ago, and this slow Sunday afternoon seemed like an excellent time to finish it up and roll it out.

So now I've got a new look. It may be ugly, but it's my brand of ugly.

I've archived the old templates, just in case anyone wants them.

Mon, 12 Aug 2002 22:01:22 GMT

Radio Wish: Date / Time Formatting Options

Radio's date / time macros need to be configurable. For starters, the timestamps in my posts should be configurable to include the timezone and GMT offset. The Internet audience is global, it's natural to expect that many of my readers will be in another timezone and not be aware of which timezone my content was created in.

There are people who want 24-hour times, as discussed here and here.

Months ago, Ingo Rammer pointed out the issues of using Radio to publish an English-language web site from a German version of Windows.

Ideally, Radio would default to using the regional settings as specified by the OS. I don't mean "It's German windows, we'll use German day names." Windows has a "Regional and Language options" control panel that lets the user specify any language and use any format, and there are APIs to handle the dirty work (presumably Mac OS has something similar). Radio should respect those exact settings, and provide an easy way to override them.

TZ offsets are an acknowledgement of the global nature of the Internet. Most Internet RFCs require either offsets or that GMT be used whenever time data is exchanged.

Sat, 10 Aug 2002 17:38:12 GMT

Mozilla 1.0 FAQ

End-user FAQ. #3.2 discloses the magical prefs.js incantation to use Outlook for mailto: links.

Mozilla Web Author FAQ

Every problem that I've had with Mozilla's rendering is explained right there.

Mon, 05 Aug 2002 18:34:17 GMT

Real World Style: css layouts, tips, tricks, and techniques [via diveIntoMark]

Let’s face it, in the real world there are still a significant number of people using antiquated browsers to surf the web. The Netscape 4 family just celebrated 5 years! I don’t know about you, but in my job upwards of 16% of our visitors are vieweing our site using Netscape 4.x.

On Unix machines.

The site contains a great tip for choosing fonts that will display well under Unix.

Aside: Those pesky Unix people and their ancient browsers, a constant thorn in my side when I was doing web design work for the CMS at my last employer. Mozilla 0.9.3 finally offered the features and (relative) stability required for me to abandon Netscape support.

Sun, 04 Aug 2002 15:49:43 GMT

Mozilla / IE Gripe: Can't drag/drop links

Why can't IE navigate to a hyperlink dragged from Mozilla? Why can't Mozilla navigate to a hyperlink dragged from IE? Mozilla works with shortcuts but not links dragged from within a web page. IE won't work with bookmarks or links. Both browsers set themselves up as valid drop targets for those data types, however (a UI bug).

If Radio had a WYSIWYG widget for Mozilla, I could completely kick the IE habit. But there's no such widget, and I'm left wanting to drag "Post" links from my news aggregator in Mozilla to IE.

Sat, 20 Jul 2002 15:43:45 GMT

Mozilla annoyance: The Search function in the History window is case-sensitive, with no indication of such and no checkbox to allow a case-insensitive search. <%radio.macros.imageref ("/myimages/mozilla-history-search.jpg","","","",""," ")%> This is probably a feature that nobody ever uses, but I happened to need it today. The !@#$% Flash MX installer restarted Mozilla without my consent, causing me to lose several articles that I was reading.

Mon, 15 Jul 2002 20:02:14 GMT

@#$%! Mozilla My site, and my former "roommate"'s, have been broken in Mozilla since RC1. For some reason Mozilla refused to link our stylesheets. Our sites have little in common, we run different software ("Radio" vs. "MT") and use different doctypes (HTML 4.01 Strict vs. XHTML 1.0 Transitional). I ignored the problem for some time: there were more pressing things to do, Mozilla marketshare is miniscule, and my site degrades reasonably gracefully when CSS support is missing or broken. Lately I've been using Mozilla more, so today I finally decided to find and fix the problem. After much Google and Bugzilla searching, it seemed clear to me that I have been using the right HTML tags, in the right way, and that everything should be working as is. Resorting to experimentation, somewhere along the way I changed my LINK tag to a relative URI from a fully-qualified one. Suddenly it worked fine on my local Radio server, but not on the remote server. Hmmmm... Mime types. Apache wasn't configured to send a text/css mime type for CSS files, adding the relevant entries to httpd.conf cleared up everything. It's always something stupid with Mozilla. Follow-up: I still had problems with the desktop website after the various changes. Turned out that in some cases I was using radio.macros.imageUrl to generate links to the stylesheets. For the local website this caused Radio to generate File URLs instead of HTTP. I'm guessing that Mozilla fails to assign the proper Mime type when handling File URLs. To quote myself: It's always something stupid with Mozilla.

Wed, 05 Jun 2002 20:02:00 GMT

CNET: Mozilla finally turns 1.0

"Mozilla 1.0 will be compared against the latest generations of commercial browsers. So Mozilla spent the time necessary to make sure this release would indeed be ready for prime time," said a representative for Netscape, which created the project when it opened up its source code in 1998. Since then, Mozilla has operated autonomously.

Four years in the making...

Mon, 15 Apr 2002 18:28:06 GMT

Fixing Your Site with the Right DocType

"This little article will provide you with DOCTYPEs that work, and explain the practical, real–world effect of these seemingly abstract tags." [A List Apart via The Shifted Librarian]

My own DOCTYPEs are not proper, they do not reference the DTDs. Mozilla and IE/Win don't seem to mind that. Putting in the DTD reference for my Transitional pages puts Mozilla 0.9.9 into Strict mode. That's bad, and my CSS-ified version of the Radio default theme has a rendering issue with Mozilla's Strict mode. It's very slight, but the whole purpose of the CSS conversion was to prove that it could be done in a nearly pixel-perfect way.

Eventually I am going to build my own theme from scratch that is attractive, fully compliant, and renders correctly in all browsers. Until then, I'll keep my "broken" DOCTYPEs, thank you very much.

Follow-up: Explanation for my minor image rendering problem. The whole site is now rendering corrently in Mozilla with HTML 4.01 Strict. Yeah baby! I'm also fully CSS compliant again, except for the work-arounds for IE5/Win box sizing miscalculations. Full W3C HTML 4.01 compliance is never going to happen, unfortunately, because the Radio default theme does many non-standard things.

Sat, 06 Apr 2002 09:37:06 GMT

My roommate has started another weblog using Movable Type. Interestingly enough, it comes with a default template that is fully CSS with a XHTML doctype (not sure that there is any actual XHTML).

Follow-up: Mozilla doesn't like it.

He is planning to check out other software. Blogger is too unreliable, and the 100k monthly posting limit for Blogger Pro is too restrictive. He tried Radio, but it barfed when he enabled and then disabled FTP upstreaming.

IE6 Display Issue

Thu, 28 Mar 2002 21:49:56 GMT

IE6 emulates an IE5 display bug when the Transitional DOCTYPE is used. In short, when calculating the width of a table, a CSS box will not be recognized as the container object. This will cause vertical scrolling for tables when their width is specified as a high percentage (ie: 100%).

If you are using my theme, a fix is to change "Transitional" to "Strict" on the first line of the Main template. If you change the Home template as well, this will cause another (minor) issue with Mozilla that I have been unable to resolve, so I suggest leaving it alone it you are not using tables within your stories.

If you find a better fix, please let me know.

CSS Default Theme

Wed, 27 Mar 2002 18:18:31 GMT

I've package my CSS conversion of Radio's Default theme, you can fetch the files from here. It has been tested under Windows XP with IE6 and Mozilla 0.9.9, and under Windows NT 4.0 with IE5 and Opera 6.

Installing the theme:

Download brycescsstheme.fttb to the RU\Themes directory.
Download header-combined.gif to the RU\www\Images directory
Download style.css and style2.css to the RU\www directory.
If you have made any changes to your current theme, go to the Create Theme page to save your current theme!
Go to the Themes page, select "Bryce's CSS Theme" and click the "Apply Theme" button.

Notes:

header-combined.gif merges the three images used at the top of the Default theme.
style.css is used for font formatting and whatnot, all of Radio's default classes are already in there.
style2.css is used for presentation, it establishes the various CSS boxes.
the coffee mug in the upper-left is no longer a link.
#desktopWebsiteTemplate.txt uses the default, table-based layout.
some minor items from #template.txt and #homeTemplate.txt may have been changed or removed at my whim, this theme may not be an exact conversion.
Use at your own risk. I disclaim all warrantees, expressed or impled, regarding everything. I'm not responsible for anything, ask anyone. I have nothing worth suing for, and your lawyer will laugh at you. Blah blah blah...
Do what you like with this theme, I don't mind. If you do something cool, share.

Wed, 27 Mar 2002 16:36:59 GMT

Discovered a better stylesheet switcher. Will dig into it later, right now I'm busy cleaning things up so that I can release this theme into the wild...

Pixel-Perfection

Tue, 26 Mar 2002 17:32:57 GMT

I've used the phrase "Pixel-Perfect" a number of times during my quest to get the Default theme for Radio converted to CSS wherever possible. The column on the right of this page, with the calendar, is one of those instances where CSS was sacraficed for a pixel-perfect conversion. So far as I am aware, there is no way that I could create a CSS box with rounded corners.

In reality, my resulting theme is not pixel-perfect in a number of ways. When the browser window is of an appropriate size, I think that my theme re-flows better than the default. However, when reduced to a width of 640 (or lower), my theme is not as readable as the default. To prevent that I could switch the outer columns from fixed to relative widths, preserving my main column on narrow windows at the expense of the outer ones.

My CSS stylesheets also use pixels to specify font sizes nearly everywhere. That practice is generally frowned upon, as it prevents some browsers from being able to resize text (including IE). However, as Zeldman documented some time ago, pixels are the only way that work across browsers. The situation is probably better now, pre-5.0 browsers are largely irrelevant. And CSS hacks to change the behavior of IE/Win are well-known, my own CSS uses a few... but using those hacks in every place where a font size needs to be specified is a lot of work and makes my CSS messy. For my personal site, I'm willing to risk some mis-sized fonts.

Designing for the web always involves trafe-offs.

Success!

Tue, 26 Mar 2002 17:12:44 GMT

This page displays perfectly under Windows in IE5, IE6, Mozilla 0.9.9, and Opera 6.0. Anybody got a Mac? Pocket IE (without CSS) degrades in the expected manner. Opera on the Zaurus (with CSS) has a less-than-ideal display, the center column isn't wide enough even with "tiny" magnification selected, but I blame Opera for not providing the CSS over-ride functionality from the desktop version.

It took me less than an hour to get my first CSS-rendition of the Default theme ready. Since then it has been minor fixes to work around IE tweaks that caused breakage in other browsers.

The biggest problem in getting a near pixel-perfection conversion of the Default theme is that coffee mug at the top. Originally it was three images: the mug was spilt in half horizontally, and a vertical split where the large and small mountain meet.

The reason for the split was to (a) turn the mug into a link, and (b) allow the title text to be positioned next to the mug. The Default theme used a table to get the images aligned properly, while I've been trying to eliminate tables as much as possible.

Mozilla was loath to position the images together seamlessly within a single <div> without a table when a DOCTYPE of HTML 4.0 was used (transitional or strict). Using a different DOCTYPE, or none at all, produced other display issues without clear work-arounds. Using a <div> for each portion of the image was difficult at best, and created a very ugly look in non-CSS browsers.

Solution: Forget about the link (how many times have I clicked that damned mug trying to get back to the home page?!), merge the images and use them as a table background. Specifying pixel heights / widths for individual cells gets the text positioned where it needs to be.

It's "dirty", in that there is still a table there, but it is much simpler than the one in the Default template. Where a table cannot be eliminated, simplifying it is perfectly acceptable.

DOCTYPE

Tue, 26 Mar 2002 14:40:02 GMT

Eh, stripping out my DOCTYPEs produced a few problems:

Mozilla no longer respects <hr size="1">
IE table size bug

#1 was expected, haven't really looked for a work-around. Actually, I have that problem with or without an HTML 4.0 DOCTYPE.

#2 affects tables with their width specified as a percentage, <table width="xxx%">. When IE is determining how wide the table should appear on-screen, it ignores the width of any parent <div>. Tables can end up much wider than they should be, possibly resulting in side-scrolling.

This didn't cause any problems on the static site, rather it messed up a bunch of stuff on the desktop site. If "Radio Userland" used the "Desktop Website Template" for all desktop pages instead of just the home page, it wouldn't have been a problem (I haven't seen a need to modify the desktop template).

Experimenting further with the DOCTYPE, I can't find any values that result in Mozilla rendering pixel-perfect and IE not fouling up tables. I've got another solution that looks like it will work... It's a little dirty, but aren't all good things?

CSS Switch

Tue, 26 Mar 2002 09:17:57 GMT

I'm going to throw in the towel on using client-side script to display the ideal stylesheet, the "FOUC" is annoying the heck out of me and has the potential of messing up anchors. CSS-capable browsers on PDAs are the only scenario where dynamic stylesheet selection makes much sense for me, a three-column layout on a tiny LCD is wasteful.

Once I'm self-hosting again, I'll solve the problem with ASP and browscap.

Made the switch at 10am. Dropped the DOCTYPE from my templates too. No "FOUC", nearly pixel-perfect rendering in IE5/Win, IE6/Win, Opera 6/Win, and Mozilla 0.9.9/Win. Sweet.

Opera

Thu, 21 Mar 2002 21:51:01 GMT

Got Opera installed in an NT VMware session, it is just as non-cooperative as the Linux/PDA version. My onload code isn't switch stylesheets, neither is the onclick version.

There could be a setting somewhere that is messing things up, as Opera seems to have quite a few of such settings. But now I'm just thinking, "Screw Opera." The program itself is cowardly, by default it sends the user-agent of another browser! By default. Hmph.

I have better things to do than fight with a browser that is designed not to respect a web author's intent. For my Zaurus SL-5000D, the default stylesheet is good enough.

Mozilla Display Problems with CSS Theme

Thu, 21 Mar 2002 19:31:27 GMT

Ok, if you will recall, I had three problems with Mozilla and my CSS theme:

Proper stylesheet wasn't being applied.
White "gap" between top and bottom coffee mug images.
Right-side box shows extra "line" above calendar.

I've fixed #1 with some tweaks to the JavaScript. I'm stuck with a FOUC tho, and no way around it if I'm to ensure that non-compliant browsers never see the three-column stylesheet (my intent is to degrade as gracefully as possible in all situations, not encourage people to update their browsers).

It turned out that #3 is the top border image being tiled. The only cure that I've found, which also fixed #2, it to remove my DOCTYPE declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

Doing so causes some other minor display issues, causing me to hesitate in updating the template. Most I've found work-arounds for in the stylesheets, but the niggling detail is that <HR> no longer respects the size attribute in Mozilla. There's probably a way to take care of that in the stylesheets too, but I haven't figured it out yet...

Problems with CSS

Fri, 15 Mar 2002 17:31:39 GMT

Argh. Finally got around to installing Navigator 4.08 (the last stand-alone release), Communicator 4.79, and Mozilla 0.99. Each of them have significant rendering problems.

Navigator / Communicator

Not even sure what level of CSS support these are supposed to have. Don't appear to support the box model at all. Both dork the graphic border on the table.

Mozilla

Initially loads with the default stylesheet. Clicking the links on the bottom to change stylesheets does work. A while line appears where the coffee mug graphics come together, and there is an oddity with the first <hr> in the table.

Suppose that 4.x browsers aren't really worth caring about at this point. The Mozilla stylesheet issue is a problem tho. I'll need to build a few test-cases to determine why my selection script is failing. Then I guess I'll need to check it against Opera and a Macintosh.

<sigh>

The minor visual problems don't bother me at all. They are the result of trying to shoe-horn a table-based layout, which uses several table tricks, into a CSS Box layout. When I get around to creating my own layout those problems will go away.

CSS Update

Mon, 11 Mar 2002 00:16:41 GMT

I finally took the plunge and converted the main template to CSS. It was totally anti-climatic. Copy original main template and CSS home page template into EditPad, remove <div></div> blocks for left and right boxes, add a single line from the original. Copy, paste, save, browse. Whoopie!

More Fun With CSS and PDAs

Thu, 07 Mar 2002 19:03:58 GMT

My first goal for the day was to eliminate the table at the top of the page. At first I tried to replace it with CSS boxes for each element (the timstamp, three image fragments, and the Blog heading). Unfortunately it proved very difficult to get all of the elements lined up properly. Eventually I gave up.

In the spirit of "Keep It Simple, Stupid" I decided to try it with two boxes, one for the timestamp and one for everything else. After shaving seven pixels from the top of the upper two images, everything cam together perfectly.

From there I moved on to creating a better stylesheet for PDA displays. And by "PDA displays" I mean my Zaurus, as I don't believe that any other PDAs currently ship with CSS-capable browsers.

I borrowed some Zeldman code for dynamic stylesheet selection, built a quick-and-dirty JavaScript to load a scaled-down stylesheet for PDAs, and... It didn't work. After making many tweaks, I've reached the conclusion that either Opera on the Zaurus does not support alternate stylesheets or Zeldman's code isn't compatible. Either way, same effect.

Work-around mode: I've stripped the default stylesheet to create a minimal presentation. A JavaScript routine checks the browserversion string for "embedix" or "Windows CE", and will attempt to load my PDA stylesheet. Otherwise, it switches to the normal stylesheet.

If your browser allows it, these links will allow you to temporarily change the stylesheet:

change style to base
change style to normal
change style to pda

Today I also upgraded my VMWare NT 4 session to IE 5. The site displays pixel-perfect compared to IE 6. Maybe tomorrow I will try some Netscape 4.x installs...

Update 9/21/02: The style-changing sheets have long been broken.