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

S

Stefan Mueller

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

Jonathan N. Little

Stefan said:
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.
 
S

Stefan Mueller

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

Jonathan N. Little

Stefan said:
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!
 
Joined
Jun 16, 2009
Messages
1
Reaction score
0
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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top