Results 1 to 2 of 2
Apr 2, 2009, 12:03 #1
Baseline Grids and Form Elements - Is Aligning Possible?
Hello fellow designers,
I am currently working on building a site "starter Kit" and in the midst of building a baseline grid that I want the typography to vertically align to. So far things are working great across most elements and browsers types and versions with the one caveat being form elements.
Does anyone know if it is possible using CSS to get form elements to also align correctly on a baseline grid with similar behaviors on most modern browsers, or am I beating a dead horse on this one? If it is possible and you have links to share for sites implementing this, please share.
Apr 2, 2009, 15:28 #2
- Join Date
- Jan 2003
- Hampshire UK
- 183 Post(s)
- 6 Thread(s)
Form elements vary so much cross browser that you will never get pixel precision without hacking for each browser. For instance in IE you can't change the height of a select and therefore you cannot match it with the height of any other browsers select elements.
Mozilla adds padding and borders with proprietary moz code that is difficult to remove without using moz specific code.
Then there's also the problem with submit buttons that get either a depressed effect or an outline and this is taken nto account by the various browers and the positions will be offset in each.
Safari's form elements are all different also and will align differently because they have different heights and margins etc.
There's a good article here that shows how wildly these things can vary.
Of course that doesn't mean you can't do a reasonable job but it won't be pixel perfect