1px gap above and below text input in IE

Jak-S

03-07-2005, 01:14 PM

Hi,

I have some input fields that are displayed down a table column in individual cells, however in IE im getting a 1px gap above and below all of my text inputs. This wouldnt matter if they stayed white, however im using the onFocus attribute to change the background colour and there is this stupid gap between all of my input fields (it works perfectly in FireFox).

Can anyone tell me whats wrong?

This is the table:

<table width="125" border="0" cellspacing="0" cellpadding="0" id="sizes_#sections_id#">

<tr>
<td><input type="text" class="listBoxText" name="sizes_#currentSectionID#_#sizes_id#" value="#sizes_name#" style="width: 125px;" onFocus="this.className='listBoxTextHighlight';" onBlur="this.className='listBoxText'"></td>
</tr>

</table>

And this is the applicable CSS:

input.listBoxText {
border: none;
padding: 2px 3px 3px 3px;
border-bottom: 1px solid #EAEAEA;
height: 20px;
}
input.listBoxTextHighlight {
border: none;
padding: 2px 3px 3px 3px;
background-color: #F2F8F9;
border-bottom: 1px solid #EAEAEA;
height: 20px;
}

_Aerospace_Eng_

03-07-2005, 02:14 PM

its the stuff in red giving you the "white" pixel
input.listBoxTextHighlight {
border: none;
padding: 2px 3px 3px 3px;
background-color: #F2F8F9;
border-bottom: 1px solid #EAEAEA;
height: 20px;
}
you can either get rid of it or change the border color to match the background color

Jak-S

03-07-2005, 08:24 PM

Hi,

I have changed that and it dosent seem to be the problem.
It seems that just IE on a PC adds a 1px gap above and below text input fields. Even if i just start with a blank page and add a load of INPUT tags going down the page there is still a gap. Is there anyway of getting rid of this?

Thanks for your help so far though, much appreciated.

Jack

_Aerospace_Eng_

03-07-2005, 10:29 PM

u sure about that? i tried it on my pc in IE and that is what caused the white border, try it change the background color to something dark and put your input button on a black background u will see it, u can try margin:0px; but i dont think that is the problem

Jak-S

03-08-2005, 02:45 AM

Yeah pretty sure, this is a screen shot of the same test page (code below) on FireFox 1 and IE 6. Im beginning to think there is no way of getting rid of the gap.

http://www.jacksleight.com/fields.jpg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>

<input type="text" name="hello1" value="one" style="border: 0px; margin: 0px; background-color:#000000; color: #FFFFFF;"><br>
<input type="text" name="hello2" value="two" style="border: 0px; margin: 0px; background-color:#000000; color: #FFFFFF;"><br>
<input type="text" name="hello3" value="three" style="border: 0px; margin: 0px; background-color:#000000; color: #FFFFFF;"><br>

</body>
</html>

hshadow

05-22-2009, 08:22 PM

Hi.

I know that this thread is old but since it has no solution and I just discovered a fix for this issue i want to share it.

To get rid of that gap just "float:left" that input type text and "clear:both" the rest of the content (if necessary) and that gap will go away and... THIS FIX IS CROSS BROWSER!!! :thumbsup:

Bye.