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.
![Conquering Impostor Syndrome]()
Two years ago I documented my struggles with Imposter Syndrome and the response was immense. I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions. I've even caught myself reading the post...
![Interview with a Pornhub Web Developer]()
Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...
![DWRequest: MooTools 1.2 AJAX Listener & Message Display]()
Though MooTools 1.2 is in its second beta stage, its basic syntax and theory changes have been hashed out. The JavaScript library continues to improve and become more flexible.
Fellow DZone Zone Leader Boyan Kostadinov wrote a very useful article detailing how you can add a...
![Create a Simple Slideshow Using MooTools, Part IV: Thumbnails and Captions]()
This actually didn’t work for me. I had to give the checkboxes display:block and a height of 20px.