In this blog post, I will tell you the solution for one of the minor problems faced in CSS.
And that is, vertically aligning checkboxes and their respective labels consistently across browsers. Whenever I try to align them correctly in one browser, they're completely off in other browsers. Just when I fix them in others, the previous browser's output is inevitably messed up. This is where I waste a lot of my time whenever I code a form.
After a lot of working and asking around, I think I have found a decent solution to the problem.
The *overflow declaration is an IE hack, better known as the star-property hack. Using this, IE 6 and 7 will execute it, but it will have no effect in Safari and Firefox.
Something I noticed about the vertical-align property was that the only value consistent across browsers was vertical-align: bottom. Setting this, showed almost identical results in Safari, Firefox and IE.
To cut off with the extra space that IE adds around input elements, set a width and height on the checkbox and overflow: hidden.
Depending on your font-size, there will be a need to adjust the relative positioning, width, height, and other properties to get things look right.
0 Comment(s)