Cendent
asked on
No borders on input text in IE
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
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>
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>
ASKER
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?
Any other ideas?
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.
ASKER
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
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>
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.j
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.j
ASKER
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_backgrou
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 :).
<input type="text" style=" background: url(images/search_backgrou
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 :).
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:
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;" />
ASKER
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.
ASKER
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.
Thanks for the suggestions, no idea why it was doing that.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
Open in new window