dans.blog


The miscellaneous ramblings and thoughts of Dan G. Switzer, II

Frozen in Grand Central Station...

This video is a couple of months old, but I just came across it (actually my mom sent me a link it.) This is another Improv Everywhere video. The premise on this video is that 200 people all go into Grand Central station and all freeze at exactly the same time and resume exactly 5 minutes later. I'm sure it would have been very freaky to witness in person.

Very cool!


Boston Dynamic's BigDog Quadruped robot is pretty amazing...

It's pretty cool to see this kind of robotics in motion. This is definitely something you want to watch all the way through. The highlights for me were watching it regain it's balance after being shoved and after slipping on ice. It's also pretty cool to watch it run and jump. It's pretty spooky just how close it looks like a quadpedal creature.


Safari CSS :hover and Adjacent Sibling Selector Bug

I recently discovered a bug in Safari (Mac and PC) related to use the :hover pseudo class in conjunction with an adjacent sibling selector. The problem is that the mouseover event correctly changes the adjacent sibling's style, but when the mouseout event occurs the style is never reset. This means if you have the selector ul li:hover + li the adjacent selector's (+ li) style will be changed when the user hovers over the element, but the style is never reset once the user mouse's out of the element.

I've tested this CSS selector combination in IE7, IE8b1, FF2 (PC and Mac) and FF3b4 and in all those browsers when the mouse leaves the element being hovered, the style of the sibling element is reset to it's original state.

One problem with stating this as a "bug" is that I believe the CSS spec is unclear on what the correct behavior should be, but I do believe that the other browsers got this right. I definitely expect any visual changes applied to the screen on the :hover pseudo class to be undone when mouse leaves the target area.

It turns out I'm not the first to find problems with Safari's implementation of the :hover and adjacent sibling selector.

To see this bug in action, move your mouse pointer from the bottom of the list to the top. If you move from top to bottom you will not see the bug since the style is correctly reset once you mouse over the sibling element.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

Here's what the CSS looks like behind the scenes:

<style type="text/css">
ul {
    margin: 0;
    padding: 5px 5px;
    list-style-type: none;
    width: 250px;
    height: auto;
    background-color: #e1e0e0;
    /* define font here for IE6 */
    font: 11px Arial, Helvetica, sans-serif;
}
ul li {
    cursor: pointer;
    white-space: nowrap;
    color: #666;
    border-top: 1px solid #fff;
    padding: 2px 20px 2px 6px;
    margin: 0 10px;
}
ul >
li.end {
    border-bottom: 1px solid #fff;
}
ul > li:hover {
    border-top: 1px solid #999;
    background-color: #999;
    color: #fff;
}
ul > li:hover.end {
    border-bottom: 1px solid #999;
}
ul > li:hover + li {
    border-top: 1px solid #999;
}
</style>

Odds are high that you might never run into this bug, but I'm working on a menu system that requires a pretty complex CSS rule set and this bug is causing me serious problems in Safari. I may end up needing to implement a JS in order to resolve the problem.