CSS parent combinator

In an web application I'm working on I have a list of thumbnails to choose from. The HTML looks like this:

<dl>
  <dt><input type="radio" /></dt>
  <dd><img src="thumb.jpg" /></dd>
  ..
</dl>

Since the thumbnails are much bigger than the radio buttons it is hard to spot the selected image. I thought it would be nice to style the image based on the radio button's checked state. Too bad CSS doesn't have a parent combinator to use in the selector. I would have liked to use something like this:

input:checked < dt + dd img {
  border: 2px solid black;
}

This would also be useful to style selected rows on checkboxed tables.

When I was looking for a parent combinator I found out I wasn't the only one who would like to have a parent combinator.

Tags:

• CSS
• Combinator
• Selector

Select element filter user script (3)

A few improvements on the select element filter user script for Greasemonkey:

• The select's onchange function is now called when the select field is changed using the filter.
• Added Page Up and Page Down support.
• Improved positioning (still not perfect).

This script still has some quirks on some sites, but it also has proven to be useful on many sites. The selection list on TV op je PC (screenshot) is a good example where this script comes in useful.

Introduction of this script can be found in a previous post.

Tags:

• Greasemonkey
• User script
• HTML
• Form
• Javascript

Problem hiding Blogger navbar in Firefox using strict XHTML

Blogger added some more lines to the block of HTML which is used for the navbar. When you use my XHTML strict safe hack to hide this navbar, you'll get the CDATA close tag the top of your page when you are using Firefox:

]]>

Somehow the new lines of HTML break the Firefox parser. The page's source is highlighted correctly strange enough.

There is a way to hide the CDATA close tag in this situation. Replace the existing hiding code:

<body>
<div class="hide"><![CDATA[<body>]]></div>

with:

<body>
<div class="hide">
<script type="text/javascript">
//<![CDATA[
/* <body> */
//]]>
</script>
</div>

Down side is that it will leave you with two Javascript errors. So it is far from perfect. And, yes, I know my site does not validate at the moment. Some time ago I thought it was a good idea to switch to HTML 4.01 strict which apparently was not. You will need XHTML to use this CDATA trick. I will convert my template back to XHTML soon.

Check Testvulsel to see this trick working. Testvulsel will validate as XHTML 1.0 strict.

Tags:

• Blogger
• Navbar
• Firefox
• CDATA
• XHTML

Opera's coolest feature

You must have read it on all the web technology blogs: Opera is free now. If you haven't already got it, go and download it. Make sure that you set your user style to ‘Nostalgia’. That really must be Opera's coolest feature!

Tags:

• Opera
• Style
• CSS
• Nostalgia

Google open all user script no longer needs Firefox settings

The Google open all (original post) user script for Greasemonkey now uses the GM_openInTab function. You no longer need to change any settings using about:config.

Thanks to Johan Sundström for dropping a comment on the GM_openInTab function.

Tags:

• Google
• Greasemonkey
• User script
• Tabs
• Tab