CSS Text Input height and padding woes

Try adding the 'px'

  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  space: 0px;

Ok, I've seem to have figured out my problem with the internal padding in my input text boxes. The line-height and negative bottom padding methods did the trick. My revised CSS is as follows:

input {
border: 0.5pt solid #000000;
border-collapse: collapse;
border-spacing: 0;
font-size: 10pt;
height: 12.5pt;
line-height: 10pt;
margin: 0;
padding: 0 0 -2.5pt 0;
space: 0;
width: 0.75in;
z-index: 1;
}

However, I'm still stuck on removing the margins surrounding the text input boxes. Any ideas on how to get rid of them??:? Perhaps something to do with methods float or clip?

- Brian

You could try:

margin-left: -5px;
or
margin-left: -4pt;

I know that you want to refrain from using negative margins, but this is the simplest solution. Float will do it but you would have to make certain adjustments to your layout for that. I don't think the negative margin would do much harm. BTW, if you dont mind, I would like to suggest the following,

line-height: 12.5pt;
vertical-align: middle;

This is to center the text in your input box. And I dont think there's a space element or style in CSS. You may delete this if you like.

JaGGeR,

Very cool. I like your suggestion in dealing with the internal padding. Less hackish.

Also, in all honesty, I can deal with the negative left/right margins. Which, seem to resolve the horizontal gaps in elements. The real bugger that I'm dealing with are the top/bottom margins. I cannot seem to rid the text input boxes of their vertical gaps.

The closest thing that I've come up with is using relative positioning and negative values for methods top and bottom. The problem is that I am forced to define row-by-row adjustments to eliminate the gap. For example:

input {
position: relative;
}

#Input_1, #Input_2 {
...
}

#Input_3, #Input_4 {
...
top: -0.03in;
}

#Input_5, #Input_6 {
...
top: -0.06in;
}

Is there a more dynamic way of handling this? Or, better yet, another (less hackish) method for removing the top/bottom margins?

Thanks again for your help. I really appreciate it!

I dont know what effect this may have in your overall layout, but based from your given example, you could eliminate the vertical gaps by adding this in your input element:

margin-top: -2px;
or
margin-top: -1.5pt;

Hmmm...

Using negative top/bottom margins was one of the first things I had tried. To a certain point (regardless of how low I had defined the value), the vertical gap between the elements would fail to diminish. I'm starting to believe that the gaps between the text input boxes has nothing to do with margin settings.

When I increase the height of the text input boxes (for example: 16pt), the elements' positioning remains the same and the vertical gap reduces to nothing. I have a hunch that problem has something to do with line break heights. Any ideas on which methods I should try?

Thanks!

Perfect! Perfect! Perfect!

My code now produces the desired effect -- pixel perfect alignment for both on screen and printed!

I discovered a crazy way of removing a portion of the margins surrounding the elements... set the font-size in div elements to 0! That was just enough to allow me to effectively use negative margins.

I'll post my code in case anyone else runs into this problem.

div {
font-size: 0;
}

input { 
border: 0.5pt solid #000000;
font-size: 10pt;
height: 12.5pt;
line-height: 10pt;
padding: 0 0 -2.5pt 0;
width: 0.75in;
z-index: 1;
}

@media screen {
input { 
margin: 0 0 -3px -2px;
}
}

@media print {
input { 
margin: 0 0 -3px -1px;
}
}

Also, let me know if there's a more inline way of utilizing the @media methods.

Thanks again for all of your help!