Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

No borders on input text in IE

Posted on 2009-03-28
12
Medium Priority
?
574 Views
Last Modified: 2012-05-06
For some reason IE is showing the borders for a text input field. Seems to be working in all other browsers except IE. Pasted the code from the problem area bellow. I've also tried using border: 0px. Is there some type of 3d effect only text fields have in IE kind of like the frameborder for Iframes?

Thanks,
Josh


<table cellpadding="0" cellspacing="0">
        			<form>  
        				<tr><td valign="top"><img src="images/border_left_search.jpg" /></td>
        				<td valign="top"><input type="text" style=" background: url(images/search_background.jpg); border: none; width:159px; height: 21px;" /></td>
            			<td valign="top"><input type="submit" style=" background: url(images/search_submit_button.jpg); border:none; height: 21px; width: 19px;" value="" /></td>
            			<td valign="top"><img src="images/border_search_right.jpg" /></td>
            			</tr>
        				<tr><td colspan="4"><img src="images/border_search_bottom.jpg" /></td></tr>                      
        			</form>
        		</table>

Open in new window

0
Comment
Question by:Cendent
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
12 Comments
 
LVL 3

Expert Comment

by:blatantwaste
ID: 24011493
No, inputs don't have any sort of *special* border removal method other than the normal css. I just ran that snippet of code in IE7 and didn't notice any problems with a border showing up anywhere.

If you are getting a problem with it live, you may have something somewhere in your CSS that is overriding it. If that's the case, you could use the !important rule to fix that until you can find what it is and remove it.


<input type="submit" style=" background: url(images/search_submit_button.jpg); border:0 !important; height: 21px; width: 19px;" value="" />

Open in new window

0
 
LVL 3

Expert Comment

by:blatantwaste
ID: 24011496
Sorry, only part of the code got pasted apparently...
<table cellpadding="0" cellspacing="0">
                                <form>  
                                        <tr><td valign="top"><img src="images/border_left_search.jpg" /></td>
                                        <td valign="top"><input type="text" style=" background: url(images/search_background.jpg); border:0 !important; width:159px; height: 21px;" /></td>
                                <td valign="top"><input type="submit" style=" background: url(images/search_submit_button.jpg); border:0 !important; height: 21px; width: 19px;" value="" /></td>
                                <td valign="top"><img src="images/border_search_right.jpg" /></td>
                                </tr>
                                        <tr><td colspan="4"><img src="images/border_search_bottom.jpg" /></td></tr>                      
                                </form>
                        </table>

Open in new window

0
 

Author Comment

by:Cendent
ID: 24011763
Thanks for the reply, gave it a try but still getting the same thing. I did notice that it's only the top and bottom that have a 1 pixel border or padding. The Submit button is fine it's just the text box for some reason.
Any other ideas?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:blatantwaste
ID: 24011791
without seeing a demo page that shows the problematic code or a more full version of the code you're using, that's about all I can think of.
0
 

Author Comment

by:Cendent
ID: 24011821
sorry probably should have put this in first post page is at: mafia.syndicate-gaming.com

here is the full code, sorry it's a bit sloppy I've been comments stuff in and out trying to see if I can find anything


<?php
include('initialize.php');
include('ajax/ajaxCoreUpdate.php');
require_once('bar/bar.php'); #Will send header information
 
 
?>
 
<!-- Frame work for radio buttons and other input style changing -->
<?php include ('styled_input/styled_input.php'); ?>
<STYLE type="text/css">
<!--
span.checkbox {
	width: 19px;
    height: 25px;
    padding: 0 5px 0 0;
    background: url(checkbox.gif) no-repeat;
    display: block;
    clear: left;
    float: left;
}
span.radio {
    width: 19px;
    height: 25px;
    padding: 0 0px 0 0;
    background: url(styled_input/radio.png) no-repeat;
    display: block;
    clear: left;
    float: left;
}
span.select {
    position: absolute;
    width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
    height: 21px;
    padding: 0 24px 0 8px;
    color: #fff;
    font: 12px/21px arial,sans-serif;
    background: url(select.gif) no-repeat;
    overflow: hidden;
}
float: left;
 }
-->
</style>
 
 
<!-- end -->
 
<html>
<head>
<title>Criminal Syndicate</title>
</head>
<body> <!-- background="images/brickwall-tile.jpg"> -->
 
<br />
<div align="center">
<!-- <table cellpadding="0" cellspacing="0"><tr><td><img src="images/border_left.jpg" /></td>
 <td>
 -->
  <table cellpadding="0" cellspacing="0" border="0" >
	<tr><td rowspan="2" colspan="2">
 
        <table cellpadding="0" cellspacing="0">
        	<tr><td rowspan="2"><img src="images/border_top_left_left.jpg" /></td>
 				<td><img src="images/border_top_left_top.jpg" /></td></tr>                
            <tr><td><img src="images/profile_temp.jpg" /></td></tr>
		</table>
 
    </td>
	<td colspan="2">
		<table cellpadding="0" cellspacing="0">
        	<tr><td rowspan="2"><img src="images/rank9.jpg" /></td>
            	<td colspan="3"><img src="images/logout.jpg" onClick="display_page.location='';" /><img src="images/profile.jpg" conclick="display_page.location='';" /><img src="images/messages.jpg" conclick="display_page.location='';" /><img src="images/forums.jpg" conclick="display_page.location='';" /></td>
            </tr>
            <tr><td><img src="images/top_spacer_icon_row.jpg" /><img src="images/garage.jpg" conclick="display_page.location='';" onMouseOver="src='images/garage_hover.jpg'" onMouseOut="src='images/garage.jpg'" /><img src="images/inventory.jpg" conclick="display_page.location='';" onMouseOver="src='images/inventory_hover.jpg'" onMouseOut="src='images/inventory.jpg'" /><img src="images/property.jpg" conclick="display_page.location='';" onMouseOver="src='images/property_hover.jpg'" onMouseOut="src='images/property.jpg'" /><img src="images/prostitute.jpg" conclick="display_page.location='';" onMouseOver="src='images/prostitute_hover.jpg'" onMouseOut="src='images/prostitute.jpg'" /></td>
                <td width="102" background="images/money.jpg"> </td>
                <td width="75" background="images/bank.jpg"> </td>
            </tr>            
        	<tr><td colspan="7"><img src="images/border_main_page_top.jpg" /></td></tr>
        </table>
    </td></tr>
	
    <tr><td>   
        <table cellpadding="0" cellspacing="0">
        	<tr><td><img src="images/name_box.jpg" /><br /><img src="images/gang_box.jpg" /></td></tr>
        </table>
      
	</td>
    
    <td rowspan="12" valign="top">
    <iframe name="display_page" src="<? echo $page; ?>" frameborder="0" style="border:none; background-image: url('images/main_page_background.jpg'); background-repeat:no-repeat; width: 545px; height: 433px;" scrolling="no"  ></iframe><img src="images/border_right_center.jpg" />
 
    </td></tr>  
    
    <tr><td colspan="3"><img src="images/border_profile_bottom.jpg" /></td><td></td></tr>
    
	<!-- Exp Bar -->
	<tr><td colspan="3"><img src="images/exp_label.jpg" /></td></tr>
	<tr><td colspan="3">
    	<table cellpadding="0" cellspacing="0"><tr>
        	<td><img src="images/bar_left_border.jpg" /></td>
			<td><?php get_bar(10); ?></td>
            <td background="images/bar_right_border.jpg" height="20" width="37"></td>
        </tr></table>
    </td>
    <!-- Stamina Bar -->
	<tr><td colspan="3"><img src="images/stamina_label.jpg" /></td></tr>
	<tr><td colspan="3">
    	<table cellpadding="0" cellspacing="0"><tr>
        	<td><img src="images/bar_left_border.jpg" /></td>
			<td><?php get_bar(80); ?></td>
            <td background="images/bar_right_border.jpg" height="20" width="37"></td>
        </tr></table>
    </td>
    <!-- Health Bar -->
	<tr><td colspan="3"><img src="images/health_label.jpg" /></td></tr>
	<tr><td colspan="3">
    	<table cellpadding="0" cellspacing="0"><tr>
        	<td><img src="images/bar_left_border.jpg" /></td>
			<td><?php get_bar(100); ?></td>
            <td background="images/bar_right_border.jpg" height="20" width="37"></td>
        </tr></table>
    </td>
    </tr>
	
    <!-- Crime Links -->
 
	<tr><td colspan="3"><img src="images/crime_auto_theft.jpg" conclick="display_page.location='';" onMouseOver="src='images/crime_auto_theft_hover.jpg'" onMouseOut="src='images/crime_auto_theft.jpg'" /><img src="images/crime_drugs.jpg" conclick="display_page.location='';" onMouseOver="src='images/crime_drugs_hover.jpg'" onMouseOut="src='images/crime_drugs.jpg'" /><img src="images/crime_extortion.jpg" conclick="display_page.location='';" onMouseOver="src='images/crime_extortion_hover.jpg'" onMouseOut="src='images/crime_extortion.jpg'" /><img src="images/crime_fraud.jpg" conclick="display_page.location='';" onMouseOver="src='images/crime_fraud_hover.jpg'" onMouseOut="src='images/crime_fraud.jpg'" /></td></tr>
	<tr><td colspan="3"><img src="images/crime_pimp.jpg" conclick="display_page.location='';" onMouseOver="src='images/crime_pimp_hover.jpg'" onMouseOut="src='images/crime_pimp.jpg'" /><img src="images/crime_trafficing.jpg" conclick="display_page.location='';" onMouseOver="src='images/crime_trafficing_hover.jpg'" onMouseOut="src='images/crime_trafficing.jpg'" /><img src="images/crime_robbery.jpg" conclick="display_page.location='';" onMouseOver="src='images/crime_robbery_hover.jpg'" onMouseOut="src='images/crime_robbery.jpg'" /><img src="images/crime_empty.jpg" /></td></tr>
  
    <tr><td colspan="3">     
    	<table cellpadding="0" cellspacing="0"><tr><td><img src="images/mission.jpg" conclick="display_page.location='';" onMouseOver="src='images/mission_hover.jpg'" onMouseOut="src='images/mission.jpg'" /></td>
        	<td rowspan="4" background="images/main_menu_options.jpg" width="104" >Menu options</td></tr>
            
        	<tr><td><img src="images/city.jpg" conclick="display_page.location='';" onMouseOver="src='images/city_hover.jpg'" onMouseOut="src='images/city.jpg'" /></td></tr>
            <tr><td><img src="images/duos.jpg" conclick="display_page.location='';" onMouseOver="src='images/duos_hover.jpg'" onMouseOut="src='images/duos.jpg'" /></td></tr>
            <tr><td><img src="images/family_war.jpg" conclick="display_page.location='';" onMouseOver="src='images/family_war_hover.jpg'" onMouseOut="src='images/family_war.jpg'" /></td></tr>   
        </table> 
    </td></tr>
    
    <!-- bottom section -->
    
    <tr><td colspan="4">
    
       <table cellpadding="0" cellspacing="0">
	    <!-- Search box -->
    	<tr><td colspan="1"><img src="images/border_top_search.jpg" /></td>
            <td rowspan="3"><img src="images/border_bottom_right.jpg" /></td></tr>
            <tr><td>
				<table cellpadding="0" cellspacing="0">
                    <form>  
                        <tr><td valign="top"><img src="images/border_left_search.jpg" /></td>
                            <td valign="top"><input type="text" style=" background: url(images/search_background.jpg); border: none; width:159px; height: 21px; !important" /></td>
                            <td valign="top"><input type="submit" style=" background: url(images/search_submit_button.jpg); border:0 !important; height: 21px; width: 19px;" value="" /></td>
                             <td valign="top"><img src="images/border_search_right.jpg" /></td>
                        </tr>
                        <tr><td colspan="4"><img src="images/border_search_bottom.jpg" /></td></tr>                      
                    </form>
                </table>
    		</td></tr>
 
		  <tr><td colspan="1">
    		<table cellpadding="0" cellspacing="0">
             <form>
          	  <tr>
				<td><input type="radio" name="a" checked="checked" class="styled" /></td>
            	<td><img src="images/player_label.jpg" /></td>
				<td><input type="radio" name="a" checked="checked" class="styled" /></td>
            	<td><img src="images/gang_label.jpg" /></td>
            	<td><input type="radio" name="a" checked="checked" class="styled" /></td>
            	<td><img src="images/business_label.jpg" /></td>
            	<td><img src="images/border_option_right.jpg" /></td>
          	  </tr> 
              <tr><td colspan="7"><img src="images/border_bottom_search_option.jpg" /></td></tr>   
    		 </form>
            </table>
 			           
		</td>
        
      </tr>
     </table>
   </td></tr>
  </table>
<!-- </td>
 <td><img src="images/border_right.jpg" /></td>
</tr></table> -->
 
</div>
 
</body>
</html>

Open in new window

0
 
LVL 3

Expert Comment

by:blatantwaste
ID: 24013722
The only input area I could see was the one in the bottom left corner...

That one doesn't look like it has borders, but rather it's got images surrounding it creating the illusion of borders.

The image that's causing the top to look like it has borders is: images/border_top_search.jpg
0
 

Author Comment

by:Cendent
ID: 24014405
I know what your thinking and it does look that way but I removed the valign="top" so you can see it a bit better. However, the way it is now makes it look like there is a problem with the table but if I change height to 19px in:
<input type="text" style=" background: url(images/search_background.jpg); border: none; width:159px; height: 21px; !important" />

It will go to the correct size, but you can see the white space on top and bottom which isn't from the images.

thanks for the help so far it's much appreciated :).
0
 
LVL 3

Expert Comment

by:blatantwaste
ID: 24014580
I see now what you're talking about.

That is one of the big issues when using tables. If you have anything that is even a pixel or two off it throws off the entire layout and shows "cracks" where the background color shows through.

Try adding the following:
<input type="text" style=" background: url(images/search_background.jpg); border: none; width:159px; margin:0 !important; padding:0 !important; height:19px;" />

Open in new window

0
 

Author Comment

by:Cendent
ID: 24014633
hm same thing. Height should be 21 but left it at 19 in case you wanted to check something out. When it's at 19 you can see the white space in firefox too, at 21 it goes away in all the other browsers except IE for some reason.
0
 

Author Comment

by:Cendent
ID: 24022438
I ended up putting the background image for the input box in the td, and setting the input box background to transparent. Not really the ideal way but it's working in IE, Firefox, and Chrome.

Thanks for the suggestions, no idea why it was doing that.
0
 

Accepted Solution

by:
ee_auto earned 0 total points
ID: 28755020
Question PAQ'd, 500 points refunded, and stored in the solution database.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question