SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast meltingInPhoenix's Avatar
    Join Date
    May 2005
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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.

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    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.

    e.g.
    button::-moz-focus-inner{padding:0;border:none}

    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •