Small search box causing spacing issues

Hello everyone,

First post please be gentle :)

I have been altering our site to make better use of space and such but come stuck with the smallsearchbox.asp I have made a copy of it called topbarsearchbox.asp and made a couple of changes but nothing major but for some reason it seem to like making a large gap round it in IE but not Firefox and also trying to put anything before/after it causes a new line to happen in either browser preventing me from formatting it as I want.  Any help on how to debreak this would be great our site is at www.landmarq.co.uk if you wish to view the effect in IE/Firefox

Sections of code below

From header.asp
<table cellspacing=0 cellpadding=0 border=0 width=1000 height=75>
<TR><TD><a href="default.asp"><IMG src="newtopbar/topbarleft.jpg" border=0></a></TD>
<TD background="newtopbar/topbarright.jpg" width=681 height=75><div align=left><!--#include file="topbarsearchbox.asp"--><!--#include file="topcart.asp"--></div></TD></TR></table>

From topbarsearchbox.asp (a clone of smallsearchbox)
<form action="showsearchresults.asp" name="search" method="get" class="topbarsearch">
    <input type="image" src="newtopbar/topsearch.jpg" style="vertical-align:bottom; border: 0;" alt="Search">
    <input type="hidden" name="pageStyle" value="<%=bType%>">
    <input type="hidden" name="resultCnt" value="10">
    <input type="Text" name="keyword" size="20" value="">
    <input type="submit" name="submit" style="color:#ffffff;font-size: 10pt;" value="&lt;&lt;&nbsp;Quick Search" id="submit">
</form>

From topbar.css (this is loaded in header.asp)
#topbarsearch form {
        margin: 0;
        padding: 0px 0px 0px 0px;
        }
       
    .topbarsearch input {
        border: 1px solid #CCCCCC;
        background-color: #F7F7F7;
        font-size: 11px;
        color:#666666;
        padding: 0px 0px 0px 0px;
    }
   
    .topbarsearch input:focus {
        border: 1px solid #999999;
        background-color: #FFFFCC;
    }
   
    .topbarsearch textarea {
        border: 1px solid #CCCCCC;
        background-color: #F7F7F7;
        font-size: 11px;
        color:#666666;
        padding: 0px 0px 0px 0px;
    }
   
    .topbarsearch textarea:focus {
        border: 1px solid #999999;
        background-color: #FFFFCC;
    }


Any and all help greatfully recevied :)

Hi Nigel,

Thanks for you reply, I am using the smallsearchbox.asp via include but it's copied/renamed to topbarsearch.asp, likewise I extracted the pcforms css section from the main css sheet and made a new css file with the section named topbarsearch and that gets loaded in header.asp as I can then alter it with out breaking anything elsewhere on the site. It's pretty much a straight clone of smallsearchbox but I still have the original in case I need to refer back to it.

Don't have dreamweaver at this end the boss won't buy me a copy however I am a dab had with Textpad for 'old skool stylee' cun/paste/edit

I think it's a css issue but I'm not a css wizard but the css it's using in what in the first post so maybe it's just a css formatting thing . . .

not sure if you have resolved your issue yet, but I had a similar problem and it was driving me nuts to see it good in FF but not IE.
I found out that IE and FF handle spacing around Forms different.
It has however an easy solution, that worked great for me...
Try adding: style="margin-bottom: 0;margin-top: 0" to the from tag (or do it in the css if you prefer)
Example:
<FORM name="nameform" style="margin-bottom: 0;margin-top: 0">

Also try putting the tags together. This also resolves some issues like this..
Example
Instead of:
<div>
  <form......>
     content
  </form>
</div>

Use:
<div><form.....>content</form></div>

Try and see if you still have the issue....



Edited by worldofrugs - 03-February-2009 at 11:58am