Skip to Content | Skip to Navigation | Skip to Search
Very True Things
“He talks to himself sometimes because he’s the only one who understands what he’s saying.”

Archive for the 'CSS' category


The past couple of columns extolling the virtues of Firefox were enough to tell that he was ‘one of us’, but this week Stephen Fry is blogging about the W3C and WHATWG. In fact, this makes a lot of sense, if the W3C’s efforts were to be compared to a gameshow then one, like Mr Fry’s QI, where the contestants regularly end up with a negative points total would be an appropriate analogy.

Recently: Opera takes Microsoft to court, which leads to calls for the CSS Working Group to be disbanded, which is, unsurprisingly, shrugged off by the working group itself, and then Microsoft announces that IE8 passes Acid2.

And as you’d expect there’s been a lot of froth and nonsense across the interested blogs.

My thoughts are that progress is being made, both by people like the the IE team (the current versions of Opera and Safari already pass Acid2 and Firefox 3 will pass it as well) and by the W3C which has made some good efforts this year to be more open and transparent.

It’s good to question the way things are, and Andy Clarke’s post about the working group has certainly made people take a good look at the status quo. But I feel that his proposed alternative would take us back to the time where the W3C created specifications that bore no relation at all to what the browsers were actually doing or planning to do.

As far as Opera and Microsoft goes, this is more about commerical advantage and business models than it is about web standards per se. Opera’s current business model aligns itself with web standards. Microsoft’s business model is so large and complex that it can be both for and against web standards and as the Acid2 result shows the team building IE8 are for them. I think the lawsuit is a sideshow and shouldn’t be allowed to dominate the standards discussion.

For many of us the shenanigans of the CSS working group hold a strange fascination, but I think that Mr Fry is right to point out that it’s in the areas of video and audio that the next big battle will be fought. As such Microsoft aren’t the main bad guys, Apple and Adobe probably are. Going back to business models, these companies are both secretive and fond of closed proprietary solutions. I’m not saying that either of them are evil through and through, but I’d love to see a lot more openness and cooperation from them in 2008.

Anyway, Stephen Fry is blogging about W3C working groups and open source video formats. He’s so one of us.

Very True Mood:(rushed) rushed

Spilling olive oil on the keyboard.
Pros: gives it that nice shiny look.
Cons: too many to mention really.

Sigh. Not a bad weekend really. Lovely weather, which I saw out the window as I was working. Got some nice JavaScript written and identified a few more IE CSS bugs that will need to be worked around. And a cracking episode of Doctor Who yesterday.

Very True Mood:(morose) morose

Recently I had a conversation with a web developer who had never used HTML tables. They’d come into the business after the web standards movement had established itself and had never learnt to use tables. As a consequence they were using divs and CSS floats, etc. to lay out things that could (or even should) have been done with tables and running into the sort of issues you might expect when you use a generic tool to do a specialised job.

So I was wondering if there were other people like this out there, and if so would they benefit from a short tutorial explaining HTML tables from a CSS perspective? Such a tutorial might prove useful for others as well - it might provide an alternative way of approaching the tables-to-CSS transition that some people are still struggling with, and it might help explain just how CSS and tables interact. After all the table elements have their own layout model in the CSS specification and it’s not the easiest thing to grasp.

If I were to write such a tutorial I guess it would fall into two halves. The first half would look at the “simple” table model (table, tr, td and th elements) used for simple data tables and *gasp* layout tables and how their default behaviour compares with the standard CSS box model; whilst the second half would look at the “advanced” table model (caption, col/colgroup and thead/tbody/tfoot plus the accessibility enhancing attributes) and how to build complex data tables.

Anyone interested in seeing this?

Very True Mood:(contemplative) contemplative
Very True Music:Tired of Hanging Around - The Zutons

So Jack’s asked me what I think of version seven of the “that damned browser” (aka the “browser-like operating system component”). Well, I’ve been using the betas for quite a while and really I don’t really see a lot to get very excited about.

The interface is strange, with all the useful stiff tucked away on the bottom right hand side of the toolbars (and I understand that the next release of Office will have a similar layout) and several obscure buttons way down there on the status bar.

Tabbed browsing. Great if you’re wedded to IE, but last year’s news (well year before last, or was it the year before that?) for everyone else. Thumbnail view of tabs is nice but not as nice as Opera’s tooltip thumbnails.

RSS reader is nice. Much better than Firefox’s dire live bookmarks feature and nicer to look at than Opera’s reader.

Security features. Obviously needed, not my area of expertise, nothing much to say.

CSS improvements? Yep, at last we have max-width support and so on. But really just playing catch up with the competition. Not seen anything in the way of new bugs or incompatabilities that’s going to cause problems for my sites but time will tell.

Page zoom. Copied from Opera and not quite as well done. Very good to see both page and text zoom available. Shame that text zoom is still as crippled as it was in IE 6. And no minimum font size setting - probably the single best invention since the back button, a very simple setting that solves so many problems.

Search settings, nice, better than IE 6, not as good as Opera.

Which, just about sums it up. A huge improvement on IE 6 but not as good as Opera or even Firefox.

Very True Mood:(relaxed) relaxed
Very True Music:Fun Lovin' Criminals – I Can't Get With That

I promised a test case for my latest problem and here it is: Gecko’s stubborn legend.

A few things worth noting:

  1. In reality the yellow background will be a gradiant background image within each box, so I can’t just apply the background to the form.

  2. Opera starts out displaying the upper form as FireFox does. The addition of position: relative (with no top, left, etc.) to the styles for legend magically changes that.

  3. IE7 breaks the * html hack so some further work will be needed to align the legend horizontally without breaking things in any other browser.

  4. Gecko doesn’t seem to apply float or display (except display: none;) to legend elements at all.

Very True Mood:busy

Current problem is with getting FireFox to display a page properly. It’s connected to my old friends fieldsets and legends and this time IE and Opera are co-operating but FireFox isn’t.

More later when I’ve made some simplified test cases.

Very True Mood:(pissed off) pissed off

Continuing from my last post, I discovered that both IE7 and IE6 were behaving badly and that I needed to feed different CSS to these browsers than to Opera, Firefox, etc.

But IE7 has rendered most of the CSS hacks useless. The normal solution is to use Conditional Comments to include an additional stylesheet. But that wasn’t an option as I wasn’t prepared to get into the whole hassle of learning how to change the Live Journal HTML.

I thought I had a solution. Use the IE specific CSS expressions (basically small pieces of JavaScript embedded inside CSS properties) to feed different values to IE.

top: 2px;
top:  expression(26 + "px");

It’s nasty, it’s not valid CSS, it will no doubt break in some browser or other, but it seemed to work when testing locally.

Live Journal wouldn’t have any of it, their CSSproxy said:

/* suspect CSS: potential scripting: expression */

So for now, I’m using the Owen Hack:

div.title { top: 26px; }
head:first-child+body div.title {top: 2px;}

Which may or may not get broken as IE continues to improve Which doesn’t work in IE7 because between whenever I last checked and the current beta they improved its support for the more exotic selectors without fixing the many bugs in its handling of basic things like floats and margins. :-(

Very True Mood:(annoyed) annoyed

There’s a mirror of this blog on Live Journal (Or for LJ readers - there’s a mirror of this blog off Live Journal).

This evening I decided to make the LJ mirror look more like the real thing. I took a look at the LJ templating and styleing system (and the related documentation, or lack of) and decided that life was just too short. So I picked a style that looked somewhat like what I wanted (Flexible Squares) and then wrote a stylesheet to do the rest.

Some of the things that came out of this exercise are quite interesting and may be folded back into the main site design.

But, and there was bound to be a but, IE isn’t playing ball. There’s stonking huge gap between the title and subtitle in IE (at least in IE7b2, I’ll check IE6 at work tomorrow). Bugger.

Very True Mood:(tired) tired

This morning I got on the wrong train. I have never done that on the way to work before, and I’ve only done it twice on the way home (and drink was definitely involved in one of those cases). So I was heading towards Victoria rather than London Bridge, and having a plain return season ticket rather than a travelcard I couldn’t jump off at Balham and hop on the Northern Line. So I jumped off at Balham and waited for the next train to London Bridge, which was late and even if it hadn’t been late would have gone back through West Norwood half an hour after I left.


My web server has been up and down, but mostly down, all day. I think that one of this weekend’s jobs will include taking a complete backup of everything.


For some reason I bought another issue of .net magazine. This one comes with a free CSS reference poster. The credits for which read:

Reprinted courtesy of the W3C
www.w3schools.com

The poster is indeed a version of the w3schools CSS chart which explains why it’s not very good, ‘cos w3schools aren’t very good. w3schools are also nothing whatsoever to do with the W3C. Whoops.

Very True Mood:(grumpy) grumpy

In an ongoing Usenet thread I’m coming very close to asking someone “what do you mean by semantics?”

But even though I now strongly suspect that the person in question might well mean something completely different than the rest of us I’m resisting the urge to use the above phrase.

This thread has also thrown up the challenge of colouring the squares of a chessboard with CSS, with the artificial constraint of only setting a class on the main table element.

This wasn’t too difficult to do but if you look at the source code you’ll see why people have variously described it as “Very clever!”, “quite entertaining” and more commonly “gross”.

Following a suggestion from Alan Flavell I managed to halve the amount of code but really I’d like to see CSS 3 nth-child selectors because then the massive blocks of adjacent selectors would be reduced to just a few lines. Here’s a demo of the CSS3 technique to check new browser versions against.

Very True Mood:(grumpy) grumpy