[thelist] whitespace around form in firefox

[ben morrison]

On 7/19/06, Birdie <bird at koolfish.com> wrote:
> Hi,
>
> I have tried every combination that the archives have suggested on removing
> whitespace using css but nothing budges this form in firefox.
>
> I have got it looking right in IE, netscape, on pc and safari on a mac but
> in firefox it has so much space around it that it gets hidden below the
> menus that come beneath it.


How about removing some of the code:

<div id="quote" style="position:absolute; left:7px; top:250px;
width:185px; z-index:2; background-color: 3b4d79;
layer-background-color: 3b4d79; border: 1px none #000000; visibility:
visible">
  <form name="form2" method="post" action="" class="formquote">
    <table width="185" border="0" cellspacing="3" cellpadding="3"
class="getquote">
      <tr>
        <td>
          <div align="right">
            <p>
              <input type="text" name="getquote" size="10">
              <img src="../images/button_quote.gif" width="80"
height="23" align="top"><br>

              Symbol Lookup</p>
          </div>
        </td>
      </tr>
    </table>
  </form>
</div>


could be

  <form name="form2" method="post" action="" class="formquote">
              <input type="text" name="getquote" size="10">
              <img src="../images/button_quote.gif" width="80"
height="23" align="top"><br>
              Symbol Lookup

  </form>

CSS

.formquote {
text-align:right;
background:#fff;
padding:10px;
width:175px;
}


Although a form label and submit button would be much better. Not sure
what symbol lookup is supposed to do, but will need some kind of
container, note that <p> won't be read by screen readers in forms
mode, so you could use a <h>.

  <form name="form2" method="post" action="" class="formquote">
             <label for ="getquote">get quote</label> <input
type="text" name="getquote" id="getquote" size="10">
              <input type="submit" value="quotes" class="submit">
              <h4>Symbol Lookup</h4>

  </form>

.formquote .submit {
border: 1px solid #000;
background:#fff;
font-weight:bold;
}

If you don't want the label to show use a CSS offleft technique

.formquote label {
position:absolute;
left:-9999em;
top:-10em;
}

regards.
--
Ben Morrison