Fix WebKit Checkbox Overflow
I want to share a quick tip about working with checkboxes in Chrome and Safari, the WebKit-based browsers. I was recently working with a series of checkboxes when I noticed that Safari and Chrome were doing some funky "cut off" with them:
What's even weirder is that they were randomly fix and unfix themselves as you hover over them. Horrible! After a bit of tinkering, I discovered the solution was adding a line-height of 20px to the parent the checkbox:
.checkboxList li { /* ..or whatever the parent is */
line-height: 20px;
}
Twenty pixels should be considered the minimum -- anything smaller wont prevent the problem completely.
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
![Page Visibility API]()
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
![Fading Links Using jQuery: dwFadingLinks]()
UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works.
Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events.
![iPad Detection Using JavaScript or PHP]()
The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's...
This actually didn’t work for me. I had to give the checkboxes display:block and a height of 20px.