Solved

No borders on input text in IE

Posted on 2009-03-28
12
562 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now