Hope this helps someone else! I haven't tried this specific technique on any projects other than the one I was working on this morning, so definitely pipe up if you find something that works more consistently. Depending on your text sizing, you'll no doubt need to adjust the relative positioning, width, height, and so forth to get things looking right.Setting a width and height on the checkbox and then overflow: hidden for some reason cuts off the extra space and allows IE's positioning to act very similarly to Safari and Firefox. It isn't padding or margin, and it's damned persistent. The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements.
Setting this and then relatively positioning upwards behaved almost identically in Safari, Firefox and IE with only a pixel or two of discrepancy. As best I can tell, the only vertical-align statement that was consistent across browsers was vertical-align: bottom.I think it might be valid CSS, but you're still better off with conditional comments just used it for simplicity. Both IE 6 and 7 will notice it, but Safari and Firefox will properly ignore it. The *overflow declaration is an inline IE hack (the star-property hack).Obviously in a live environment you'll probably be nesting/overriding stuff to support other input elements, but I wanted to keep things simple. This code assumes that you're using a reset like Eric Meyer's that doesn't override form input margins and padding (hence putting margin and padding resets in the input CSS).
0 kommentar(er)
