Advertisement

07.11.2008 at 02:35AM PDT, ID: 23556591
[x]
Attachment Details

Drop Down Form IE/FF issues

Asked by signpost2 in Cascading Style Sheets (CSS)

Tags: CSS, IE, FF

Thanks to help from EE. I have managed to get my drop down search to look like the attached.

In IE7 the search looks OK, but for some reason the Location, Postcode and Keywords appears slightly higher than the other options. However in FF the Location box goes onto the next line.

I thought this was a width issue but even if I increase this to the max it doesn't fit on the same line.

I've looked at my current css but can't see anything specific which relates to the location box as it seems to be using the p.formLine like the others.

Below is the html and css code but as I'm using a CMS my search script uses a particular layout.

It would be best if I can give you a URL, however I dont' like posting them here as Google caches them but I can sent anyone who replies a link if you have a email link set up.

Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:

CSS
 
.search{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#ffffff;
}
#searchbox{
width: 620px;
background-color:#66CC66;
padding:0px 0px 0px 0px;
}
p.formLine{
padding: 0 0 0 0;
float:left;
margin: 5px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000066;
}
label
{
text-align: left;
margin-left: 0em;
padding: 5px 0 0 0;
display:block;
}
#submitbut{
width: 80px;
height: 20px;
}
.formButton{
color:#223289;
background-color:#FF9D1C;
font-weight:bold;
}
.formSubmit{
padding-left: 5px;
padding: 20px 0 0 0;
}
#searchtitle{
width: 94px;
height: 30px;
background:url(../images/search_back.gif) no-repeat;
}
.module_quick_search{
background:url(http://www.suttonscityliving.co.uk/newsite/templates/suttonsfriday/images/search.gif) no-repeat;
width: 600px;
height: 80px;
padding-top: 20px;
background-color:#C6C6C6;
}
.searchtext{
color:#fff;
font-size: 12px;
font-weight:bold;
padding: 10px 0 0 7px;
font-family:Arial, Helvetica, sans-serif;
}
.clearFix {
clear:both;
overflow:hidden;
font-size:0px;
height:0px;
}
 
html
 
<!-- start module quick_search -->
      <div class="module_quick_search">
      <!--<div class="searchtext" id="searchtitle">Quick Search</div>-->
        <form name="quick_search"class="searchform quicksearch" method="post" action="HERE_GOES_FORM_ACTION_PAGE">
          <!--<h3>Quick Search</h3>-->
          <p class="formLine"> 
            <label for="name"><strong>Min. price:</strong></label>
            HERE_GOES_SEARCH_FORM_FIELD_MINPRICE
          </p>
          <p class="formLine">
            <label for="name"><strong>Max. price: </strong></label>
            HERE_GOES_SEARCH_FORM_FIELD_MAXPRICE
          </p>
          <p class="formLine">
            <label for="name"><strong>Bedrooms: </strong></label>
            HERE_GOES_SEARCH_FORM_FIELD_BEDROOMS
          </p>
          <p class="formLine">
            <label for="name"><strong>Search by</strong></label>
            HERE_GOES_SEARCH_FORM_FIELD_UK_OVERSEAS
          </p>
         <p class="formLine"><strong>Location, Postcode, Keywords: </strong>HERE_GOES_SEARCH_FORM_FIELD_KEYWORDS</p>
<!--<p class="formLine"><strong>Area: </strong>
</p>-->
          <p class="formSubmit">
            <input type="submit"class="formButton"value="Search"/>
          </p>
        </form>
    </div>
    <!-- end module quick_search -->
Attachments:
 
search.gif (8 KB) (File Type Details) 
search
search
 
[+][-]07.11.2008 at 04:18AM PDT, ID: 21981339

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]07.11.2008 at 04:59AM PDT, ID: 21981505

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]07.11.2008 at 05:19AM PDT, ID: 21981622

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]07.11.2008 at 05:49AM PDT, ID: 21981838

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]07.11.2008 at 05:56AM PDT, ID: 21981903

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zone: Cascading Style Sheets (CSS)
Tags: CSS, IE, FF
Sign Up Now!
Solution Provided By: julianH
Participating Experts: 1
Solution Grade: B
 
 
[+][-]07.11.2008 at 07:15AM PDT, ID: 21982566

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]07.11.2008 at 07:26AM PDT, ID: 21982661

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]07.11.2008 at 08:27AM PDT, ID: 21983223

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]07.11.2008 at 08:27AM PDT, ID: 21983230

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628