|Category: Ramblings and Rants. You have been warned.
Having seen what's possible with CSS I decided to use XHTML and CSS for my intranet site. While the XHTML code is unquestionably simpler, therefore better for mobile devices, screen readers, etc., the number of hacks (workarounds) necessary just to cope with all the different browser implementations is horrendous!
I have a page with a background, a title, 7 main links, 3 sidebar headings and 8 sidebar links. My initial thought was to put the title and headings in H1 and H2s, and all the links in ULs, with DIVs where necessary for styling, then use CSS to position them and replace the text with images. For my purposes I don't need the text versions, but I wanted to see if this was possible for my other sites as well.
There are lots of text-to-image replacement methods available, and all have their limitations. I got it working in IE without too much trouble, but FireFox refused to hide the text. So I put the text in a SPAN and hid that instead, but then IE positioned everything wrong. It just looked completely wrong in Opera.
Better idea: use proper IMGs for the images, put ALT attributes for accessibility and TITLE="" attributes to prevent them showing as tooltips. This method works, although because I decided to use PNG for multi-level transparency (easier to move things around later) I have to have CSS 'filter's that hide the image and use DXImageTransform.Microsoft.AlphaImageLoader to place the image in the parent tag (H1, H2 or LI) instead. Since other browsers ignore the filter tag this has no side-effects like the previous method.
Next problem: Now the images display properly, but because they are in H2 tags in the sidebar (as per W3C recommendations for page structure) they refuse to align right in FireFox and Opera, but display fine in IE. Both CSS text-align and XHTML align do nothing, so either I change to DIVs or use float:right and clear:both to force them to the right. But this changes the layout slightly, and slightly different for each of the three browsers. Not a big problem for now because the intranet is very simple and the background is solid, but not useful on a real site where a few pixels out means the edges don't line up.
The last thing should be to style the text links in the sidebar. I've just spent about half an hour trying every combination of CSS attributes I can think of, and I still can't get them to position consistently. IE and Firefox show about 1 line space between each item (at 10px font size) but Opera shows about 2px. Any changes seem to be relative to these.
At this point I'm giving up and going back to tables! They may be out-dated now, and less accessible (sorry about that) but at least they're consistent without requiring different workarounds for every browser.
As a final note, I started using MediaWiki recently, on another part of my intranet, and the default skin (Monobook) has the following files:
in addition to main.css. I have neither the software nor the patience to implement workarounds for all of the browsers!