Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Location
    Brighton, UK
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    1px gap above and below text input in IE

    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:
    Code:
    <table width="125" border="0" cellspacing="0" cellpadding="0" id="sizes_#sections_id#">
    <!-- this row is repeated for a number of records --->
    <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>
    <!-- end of row --->
    </table>
    And this is the applicable CSS:

    Code:
    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;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    its the stuff in red giving you the "white" pixel
    Code:
    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

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Location
    Brighton, UK
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #5
    Regular Coder
    Join Date
    Mar 2005
    Location
    Brighton, UK
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.



    Code:
    <!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>

  • #6
    New to the CF scene
    Join Date
    May 2009
    Location
    Bs. As., Argentina
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!!

    Bye.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •