02:
I was fixing a couple of bugs in the new design or fineartdavid.com, the site I use for my artwork, and was reminded about something I found a while back, made a test suite for and then forgot about.
If you have one of the new HTML5 elements inside a block level link bad things happen in Firefox 3.6. I’ve tried explicitly setting the element to display: block in the CSS, but this hasn’t worked.
HTML5 elements in links test suite
It seems to me a fairly common use case. The exact code I wanted was a figure with a figcaption, all wrapped in an a, but right now this bug means we can’t have nice things.
Do you know a way to fix this? Am I missing something stupid?
Update
Remy Sharp is calling it a vomit bug which seems an appropriate name. zcorpan suggests in the comments that nesting a div could help so I’ve added that to the test suite.
20:
I’ve just found a strange bug in Google Chrome.
I’ve been working on a set of templates for fineartdavid.com, and was testing them for keyboard accessibility. I hadn’t expected anything unusual because there is nothing very complicated in the the HTML. When I tabbed through the page however, the large images were being skipped.
At first I thought the problem was caused by block-level links. These are allowed in HTML5 and are a good solution to the design pattern where you have an image and a header both pointing to the same link.
<a href="#">
<img src="/path/to/image.png" alt="descriptive alt text" title="" />
<h2>Blog entry title</h2>
</a> |
A few experiments showed that this was fine though, and that the problem only happened when the image was floated. Further investigations showed that any links that contain only floated elements are removed from the tab order.
Check out the test suite. Obviously has implications for accessibility, so lets hot it is fixed soon.
Update: I’ve updated the title because this happens in Safari too, meaning it is a Webkit, and not Chrome bug.
Update 2: I’ve filed a Webkit bug report.
rss feed