FORM tag creates an undesired linebreak in IE
I have a webpage that is using Google's custom search engine. I wanted to make it prettier so I created a wrapper around area that essentially puts the search area is a rounded rectangle. To accomplish this, I am using the following code:
<table style="height:33px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image:url(/leftEdge.png); height:33px; width:5px;"> </td>
<td style="background-image:url(/bg.png); height:33px; background-repeat:repeat-x;">
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="32" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript"
src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
</td>
<td style="background-image:url(/rightEdge.png); height:33px; width:5px;"> </td>
</tr>
</table>
This code looks good in Chrome. However, 开发者_运维百科in Internet Explorer, the rightEdge image appears on the next line. It appears that IE is adding a line break. However, I'm not sure how to get rid of it. Thus far, I have tried:
- Changing my DocType to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - Adding the following CSS:
form { margin: 0; padding: 0; }
I'm not sure what else to do. Can somebody help me remedy this problem?
Thank you!
I am not a fan fo tables so I remade it using CSS and DIV's:
<div style="height:33px; width:290px">
<div style="background-image:url(/leftEdge.png); height:33px; width:5px; float:left;margin:0; padding:0;"></div>
<div style="background-image:url(/rightEdge.png); height:33px; width:5px; float:right;margin:0; padding:0;"></div>
<div style="background-image:url(/bg.png); height:33px; background-repeat:repeat-x;margin:0; padding:0;">
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse" style="margin:0; padding:0;">
<input type="hidden" name="cref" value="" style="margin:0; padding:0;" />
<input type="hidden" name="ie" value="utf-8" style="margin:0; padding:0;" />
<input type="hidden" name="hl" value="" style="margin:0; padding:0;" />
<input name="q" type="text" size="32" style="margin:0; padding:0;" />
<input type="submit" name="sa" value="Search" style="margin:0; padding:0;" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
</div>
</div>
It's a bit dirty but I hope it will help.
加载中,请稍侯......
精彩评论