FORM tag creates an undesired linebreak in IE_问答_开发者

FORM tag creates an undesired linebreak in IE

开发者 https://www.devze.com 2023-02-12 00:12 出处：网络

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 accompli

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;">&nbsp;</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;">&nbsp;</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.