CSS, Javascript Objects and Firefox.

[Dragonfighter]

Hello.  I am about to pull out my few remaining hairs here.  I have a resources page on my site and am using other sites' banners as links.  They are all in DIVs defined in the CSS and all align center perfectly in both IE and Firefox.  The page is standards compliant. 

The problem now is with the last resource.  It is a search form called up by Javascript, provided by the hosting site.  When I place the code in the same class of DIV as the others the DIV and the Form centers in IE but floats left in Firefox.

The page is here.

The CSS:

DIV.caption
{
   
         width: auto;
   height: auto;
   position: relative;
   padding: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

DIV.banner
{
   width: auto;
   height: auto;
   position: relative;
   padding: 0px;
   margin-top: 20px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

The HTML:

<div class="banner">
          <script language="Javascript"  src="http://www.studylight.org/jscripts/searchcode.cgi?type=interlinear"   border="0"   alt="StudyLight dot Org"></script>
          <div class="caption">
         <p class="captions">An excellent resource for an in depth searching of Scripture.</p>
         </div>
</div>

Any ideas would be greatly appreciated.

[Dynaweb]

In your CSS, try adding "margin: 0 auto" to make the alignation (is that even a word?) in Firefox and other browsers.

[Dragonfighter]

Thanks, I tried it with both the original margin definitions and also deleting them.  No joy.  Ah well off to Florida, I'll ook again when I get back.