Grow your CSS skills. Land your dream job.

Size of form elements

  • # October 21, 2008 at 1:24 pm

    EDIT: Fixed 10/22/08. See post down below.

    Hi folks,
    I am currently developing a form and today, I came across the following problem: All (or rather most) of my form elements are supposed to have a width of 50% of their parent. There is also a border and a padding that (since I’m using XHTML) will make the element a little bigger in total. No problem. However, when I try to put a <select>, the browser makes it a little smaller. To me, it looks like 50% minus padding minus border. This is not expected behavior since it’s pretty much quirks-mode behavior.

    To cut a long story short, please have a look: http://v3.anwaltantwort.de/index.php?action=easyForms.test2
    EDIT: Fixed version: http://v3.anwaltantwort.de/index.php?ac … orms.test3

    Any suggestions? Thanks a lot in advance!

    A desperate developer.

    # October 21, 2008 at 11:27 pm

    Your DIV is missing a semicolon but I don’t think that would account for it. Nothing else jump out at me. Sorry.

    # October 22, 2008 at 12:41 am

    That’s pretty fascinating actually. I’ve never noticed that before but yes, clearly, the select element is getting rendered differently despite them all being blocks and a width set. The select is getting set to 344px in width and all the rest 350px. 350px is correct. I’m stumped, but I’m also deliriously tired :D . I think if it was vitally important to me and it was a fixed width environment I’d just force it to be right with a little inline styling.

    # October 22, 2008 at 1:43 pm

    IE often doesn’t like WIDTH and PADDING being set in the same definition

    Code:

    Try removing the padding and see if it makes any difference.

    # October 22, 2008 at 5:06 pm

    I investigated a little more today… And came to the following conclusion: All browsers (except IE8) are doing it wrong, so it’s certainly not a bug, it must be a feature! :lol:

    Mozilla Developer Center claims the different behavior is "to emulate the behavior of browsers that do not correctly support the CSS box model specification". Nice way to express that IE is stupid. However, there are several CSS properties (every browser is using a different one, of course) that influence the different behavior.

    For more, go to: https://developer.mozilla.org/en/CSS/-moz-box-sizing

    In fact, Firebug tells me that -moz-box-sizing is set to ‘content-box’ for a normal <input>; for <select>s the default seems to be ‘border-box’.

    Solved: http://v3.anwaltantwort.de/index.php?ac … orms.test3

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".