7 replies [Last post]
MaddMan
Offline
newbie
Last seen: 11 years 2 weeks ago
Timezone: GMT+6
Joined: 2003-10-08
Posts: 5
Points: 0

Greets... I'm new to this forum.

I've been hunting around online for resolution to my problem, and I've had absolutely no luck. I can't seem to remove the inner padding and outer margins regarding the input text boxes via CSS. For printing reasons (correct handling of margins), dynamic positioning is critical. The page will contain ~50 inputs; thus, the use of negative margins will get quite cumbersome.

I'm sure I went a bit overkill on the CSS. But, I wanted to show all that I had tried. Perhaps someone on this board has run into the same issue:

-- This code will be used on an internal system (Win32 IE6) --

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

<DIV ALIGN="CENTER">
<INPUT ID="Input_1" TYPE="TEXT" VALUE="Testing 1">
<INPUT ID="Input_2" TYPE="TEXT" VALUE="Testing 2">
<BR>
<INPUT ID="Input_3" TYPE="TEXT" VALUE="Testing 3">
<INPUT ID="Input_4" TYPE="TEXT" VALUE="Testing 4">
</DIV>

The CSS method for "line-height" seems to effectively remove the top padding; however, any portion of the font that falls below the baseline is clipped.

Many thanks in advance!!

- Brian

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 7 years 18 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Re: CSS Text Input height and padding woes

Try adding the 'px'

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

Diplomacy is the art of letting someone have your way

MaddMan
Offline
newbie
Last seen: 11 years 2 weeks ago
Timezone: GMT+6
Joined: 2003-10-08
Posts: 5
Points: 0

CSS Text Input height and padding woes

Ok, I've seem to have figured out my problem with the internal padding in my input text boxes.Laughing out loud 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

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 6 years 1 week ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

CSS Text Input height and padding woes

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.

MaddMan
Offline
newbie
Last seen: 11 years 2 weeks ago
Timezone: GMT+6
Joined: 2003-10-08
Posts: 5
Points: 0

CSS Text Input height and padding woes

JaGGeR,

Very cool. I like your suggestion in dealing with the internal padding.Cool 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!

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 6 years 1 week ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

CSS Text Input height and padding woes

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;

MaddMan
Offline
newbie
Last seen: 11 years 2 weeks ago
Timezone: GMT+6
Joined: 2003-10-08
Posts: 5
Points: 0

CSS Text Input height and padding woes

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!

MaddMan
Offline
newbie
Last seen: 11 years 2 weeks ago
Timezone: GMT+6
Joined: 2003-10-08
Posts: 5
Points: 0

Problem Solved!!

Perfect! Perfect! Perfect!

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

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!