Space between input boxes and selection boxes is not the same in Internet Explorer

Discussion in 'HTML' started by Stefan Mueller, Jun 18, 2006.

  1. I've several input boxes and selection boxes.

    <input type = "text"><br>
    <input type = "text"><br>
    <input type = "text"><br>
    <select><option value = "">[Choose]<option value = "1">Entry 1<option
    value = "2">Entry 2</select><br>
    <select><option value = "">[Choose]<option value = "1">Entry 1<option
    value = "2">Entry 2</select><br>
    <select><option value = "">[Choose]<option value = "1">Entry 1<option
    value = "2">Entry 2</select><br>

    In Mozilla Firefox the vertical space between the input boxes and the
    selection boxes is the same size. Unfortunately in Windows Explorer not. The
    height is the same but not the vertical space in between.

    Does anyone know how to "fix" this display problem?
    Stefan

    PS: To "fix" similar problems with images, I got the hint to use 'style =
    "display:block"'.
    E.g. '<img src = "mypic.gif" style = "display:block" border = "0">'
    Unfortunately this does not work with input boxes resp. selection boxes.
    Stefan Mueller, Jun 18, 2006
    #1
    1. Advertising

  2. Re: Space between input boxes and selection boxes is not the samein Internet Explorer

    Stefan Mueller wrote:
    > I've several input boxes and selection boxes.
    >
    > <input type = "text"><br>
    > <input type = "text"><br>
    > <input type = "text"><br>
    > <select><option value = "">[Choose]<option value = "1">Entry 1<option
    > value = "2">Entry 2</select><br>
    > <select><option value = "">[Choose]<option value = "1">Entry 1<option
    > value = "2">Entry 2</select><br>
    > <select><option value = "">[Choose]<option value = "1">Entry 1<option
    > value = "2">Entry 2</select><br>
    >
    > In Mozilla Firefox the vertical space between the input boxes and the
    > selection boxes is the same size. Unfortunately in Windows Explorer not. The
    > height is the same but not the vertical space in between.
    >


    Much simpler to use CSS:

    INPUT, SELECT { display: block; margin: 0; }

    Adjust margin if you want to increase spacing, then you can dump the BRs

    <input type = "text">
    <input type = "text">
    <input type = "text">
    <select>
    <option value = "">[Choose]
    <option value = "1">Entry 1
    <option value = "2">Entry 2
    </select>
    <select>
    <option value = "">[Choose]
    <option value = "1">Entry 1
    <option value = "2">Entry 2
    </select>



    > Does anyone know how to "fix" this display problem?
    > Stefan
    >
    > PS: To "fix" similar problems with images, I got the hint to use 'style =
    > "display:block"'.
    > E.g. '<img src = "mypic.gif" style = "display:block" border = "0">'

    ^^^^^^^^^^^^
    Use CSS for this as well

    IMG { display: block; border: 0; }

    > Unfortunately this does not work with input boxes resp. selection boxes.
    >





    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 18, 2006
    #2
    1. Advertising

  3. Re: Space between input boxes and selection boxes is not the same in Internet Explorer

    I've also tried it with CSS and margin but even if I use 'margin: 0;' for
    the input boxes there's still a bigger space between the input boxes in
    Internet Explorer than in Mozilla or Opera.
    It seems that in Internet Explorer the margin of an inout box is always 1pt
    more than in Mozilla or Opera.

    Do you think I can't get rid of it?
    Stefan

    PS: I'd like to have on each browser the same space between the input boxes.
    Stefan Mueller, Jun 19, 2006
    #3
  4. Re: Space between input boxes and selection boxes is not the samein Internet Explorer

    Stefan Mueller wrote:
    > I've also tried it with CSS and margin but even if I use 'margin: 0;' for
    > the input boxes there's still a bigger space between the input boxes in
    > Internet Explorer than in Mozilla or Opera.
    > It seems that in Internet Explorer the margin of an inout box is always 1pt
    > more than in Mozilla or Opera.
    >
    > Do you think I can't get rid of it?
    > Stefan
    >
    > PS: I'd like to have on each browser the same space between the input boxes.
    >
    >


    Well I hate to break this to you but you really can't. Not only will
    there be variances between browser but OS's as well, because widget can
    look different from each. I.e., checkboxes look difference from Windows
    > OSX > Linux > ...


    So your 1px difference won't really matter. Oh, did you see what happens
    when you increase or decrease the font size in the browser? Your layout
    will and should change to accommodate!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 19, 2006
    #4
  5. Re: Space between input boxes and selection boxes is not the same in Internet Explorer

    Okay, thanks for that information.
    Therefore I have to live with it.

    Stefan
    Stefan Mueller, Jun 20, 2006
    #5
  6. Stefan Mueller

    jamesxa

    Joined:
    Jun 16, 2009
    Messages:
    1
    use IE conditional comments to include an IE only css document and adjust the top and bottom margins to -1px.

    sadly this has to be applied through an id or class, applying simply to input did not work for me
    jamesxa, Jun 16, 2009
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Stefan Mueller
    Replies:
    6
    Views:
    1,112
    Stefan Mueller
    Jul 5, 2006
  2. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,863
    Bryan Bullard
    Jul 11, 2003
  3. Ed Hauptman
    Replies:
    7
    Views:
    992
    Ed Hauptman
    Aug 7, 2009
  4. Replies:
    1
    Views:
    253
  5. louissan
    Replies:
    2
    Views:
    127
    Martin Honnen
    Mar 24, 2005
Loading...

Share This Page