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

Tags, Clouds and Operas

June 28th 2005, 12:42 pm | Browsers | CSS | WWW

Looking over the Technorati redesign as plugged by Eric Meyer (same old stuff – nice CSS but fixed width design, fixed font sizes in IE, breaks with only a couple of font size increases in FireFox, minor validation errors) I saw that the Tags page didn’t display properly in Opera 8.01.

The relative frequency of the tags are indicated via nested <em> elements with a CSS style font-size: 1.03em to produce the increased size.

But Opera screws up and rounds the font sizes down. I’ve written up a description of the bug and submitted a bug report to Opera.

Until Opera and/or Technorati do something about this issue there’s a quick fix that Opera users can apply. As Technorati includes id="technorati" on the <body> tag it’s relatively easy to add
#technorati .heatmap em {font-size: 1.06em !important;}
to a user stylesheet and restore the tag coloud to its full glory. The exact size value needed will vary depending on your particular default and minimum font size values.

Moving away from the Opera bug we’re still left with the larger issue. What’s the best way to (a) mark-up and (b) indicate relative importance in various media.

As far as the mark-up goes HTML doesn’t offer us that many options and <em> is probably the best choice. Things are slightly confused by the presence of <strong> – how does strong emphasis relate to multiple levels of emphasis created via nested <em> elements?

By default browsers don’t change their output for nested <em>s so there’s no way short of viewing the source for the user to see the level of importance. For graphical media increasing the font size is one possibility but even when Opera’s shortcomings are ignored this might break down (consider mobile devices for example). In non-graphical media the font-size is meaningless.

Volume or pitch are options in aural media but don’t make for an easy listening experience (this sort of tag cloud is designed for visual skimming and doesn’t really work the same way when listened to linearly; but if a listener chooses to listen to it they should get the same information as the reader, via some means or other).

The best solution I can think of would be to add title attributes to each tag giving the relative level of importance. So a tag surrounded with four levels of <em>s would have title="Level Four" or something similar.

Whilst not ideal (and maybe tag clouds aren’t such a good idea) this does have the advantage that it brings together mark-up, styling and metadata (the <em> elements, the font-sizing and the titles) to reinforce the same message. The message. Ah, that’s the real problem. The relative popularity of the various tags is the message and the message should be in the data not in anything else. But that means turning the funky tag cloud into a boring table. :-(

Fixed sidebar

March 29th 2005, 8:46 pm | Blogs | CSS

I finally got Internet Explorer to behave properly with respect to the sidebar. By taking all the width properties off the individual blocks and adding instead adding the width to a new surrounding <div>, suddenly IE stops screwing up the first link in every list and sub-list. This means I can get rid of all the <!--[if IE ]><li></li><![endif]–> hacks. Yippee.

Now I just need to work out how to get rid of those annoying single pixel gaps in Gecko.

More cleverness

March 17th 2005, 9:59 am | Blogs | CSS

Of course the technique I outlined a few days ago isn’t limited to favicons. It can be used with any appropriate image. I realised that I could make links to Live Journals look exactly like they do on LJ itself by including the following in my CSS.

#content a[href^="http://www.livejournal.com/users/"] {
  background-image: url('http://stat.livejournal.com/img/userinfo.gif');
  padding-left: 20px; background-repeat: no-repeat;
}

Still Gecko only obviously, due to the use of the CSS 3 selector.

What I should do is cobble something together in WP that automatically converts <lj user="foo"> into an appropriate HTML link complete with icon. This is the sort of thing that Live Press was supposed to do but (a) I could never get it working and (b) it hasn’t been upgraded to Word Press 1.5. Time to brush up on my PHP and get hacking.

Funky CSS stuff for Gecko browsers

March 13th 2005, 3:14 pm | Blogs | Browsers | CSS

This grew out of a discussion regarding .ICO files and CSS on alt.html. Now, I made some mistakes in my off-the-cuff suggestion there (I used [att|=val] rather than the correct (and, annoyingly, CSS3) selector [att^=val]. After switching to the correct selector I realised that, even allowing for the simplification supplied by Toby Inkster, this would be Gecko only for now. But it is a nice trick anyway.

In essence what it does is insert a site’s favicon before any link to that site. As CSS doesn’t parse the value of att() it can’t be done on a generic level (it could be done with JavaScript but raises a number of other issues) but it can be done for sites that you link to frequently.

#content a[href^='http://groups-beta.google'] {
  background-image: url('http://www.google.com/favicon.ico');
  padding-left: 20px; background-repeat: no-repeat;
}

#content a[href^='http://www.imdb.com'] {
  background-image: url('http://www.imdb.com/favicon.ico');
  padding-left: 20px; background-repeat: no-repeat;
}

#content a[href^='http://www.amazon.co.uk'] {
  background-image: url('http://www.amazon.co.uk/favicon.ico');
  padding-left: 20px; background-repeat: no-repeat;
}

#content a[href^='http://en.wikipedia'] {
  background-image: url('http://en.wikipedia.com/favicon.ico');
  padding-left: 20px; background-repeat: no-repeat;
}

Bugs. Everywhere.

February 25th 2005, 7:38 pm | Blogs | CSS

So I finally got the categories list to display hierarchically – seems that in Word Press 1.5 setting the hide_empty argument to true (and it’s true by default so this means doing anything other than explicitly setting it to false) causes the categories list to get stuck on a non-hierarchical, sorted by ascending ID only setting. So now you get to see any categories that I thought I’d need but haven’t used yet.

Unfortunately, the hierarchical sorting reveals a bug in Internet Explorer’s CSS support. Yeah, another one. As you can see the first item in each child list is missing some styles. It was originally worse than this, the first item in the list (and all the other lists in the sidebar) and the first item in each sub-list, and the first item after each sub-list were all affected.

If you look at the source code you’ll see some peculiar code: <!--[if IE ]><li></li><![endif]–>. These empty list items are hidden inside MSIE only Conditional Comments so that anyone visiting the site without stylesheets won’t see them (they collapse to zero size in any stylesheet enabled browser and it’s next to impossible to disable stylesheets in IE) and in IE they act as the first list item and hence suck up the lack of styling.

But for some reason they work for the first and third cases listed above but not for the first item in each sublist. Bugger.

At some point I’m going to need to make a test case and identify the CSS properties that trigger the bug. With luck these will be something that can be rewritten or hidden from IE without blowing up the design.

I also fixed a long standing problem with Mozilla whereby the items in the sublists were being indented too far and some of the page background was shining through. Just a case of remembering that different browsers have different default styles for lists – some use margin and some use padding, some apply these to the <ul> element and some apply these to the <li> element.

But I haven’t been able to fix another Mozilla problem – the one pixel gap that appears after every fifth list item. The regularness of this suggests a rounding error of some sort but I have no idea what triggers it or how to avoid it. Bugger.

Newer Entries
Home
© 2004-2008 Steve Pugh | RSS | Atom | Powered by WordPress