No replies
steve_the_canuck
Offline
Regular
Last seen: 12 years 40 weeks ago
Timezone: GMT-4
Joined: 2009-01-23
Posts: 27
Points: 1

Hi,

I'm having some trouble positioning the search_results div tag in my document below. I used a float left for my label/inputs based on a tutorial I saw on Lynda.com. But I am having difficulties figuring out how to position the search results. In Firefox, if I use relative positioning, so I can get just below the search input, the top element in the list seems to expand much larger. Why does this happen? What's the best approach for me to position a dropdown like this?

Also, I'd prefer if the input after the search box didn't get moved down when the search results div displays itself. What's the best way to achieve this result?

Thanks for your help.

Steve

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
 
 
<title></title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
}
 
body {
	background-image:url(../images/bodybackground.png);
	background-repeat:repeat-x;
	background-color:#383838;
	text-align: center;                                    /* Used to center the container */
	font-family:Arial, Helvetica, sans-serif;
}
 
div#container {
  background-color:darkgray;
  border-left:#101010 5px solid;
  border-right:#101010 5px solid;
  border-bottom:#101010 5px solid;
  position:relative;                                       /* Keep this relative to let other positioned elements align to it */
  margin: 0 auto;
  width:800px;                                             /* Optimize for 800x600 display */
}
 
div#header, div#content_main, div#footer
{
  text-align:left;
  margin:0;
  padding:0;
  width:100%;
}
 
 
div#header {
	background-color:white;
	height:86px;
}
 
 
div#content_main {
	background-image:url(../images/bg-gradient.png);
	background-repeat:repeat-y;
/*	background-color:#182C3F; */
/*	border:blue 2px solid;*/
}
 
 
div#footer {
	background:#202020;
	background-image:url(../images/background.gif);
	background-repeat:repeat-x;
	background-position: 0 -30px;
	height:200px;
 
}
 
 
/*
  Forms - common styles
 
*/
 
ul {
	list-style-type: none;
}
 
ul.error_list {
	color: green;
}
 
p.error_msg {
   color: green;
}
 
div#content_form {
	background-color: black;
	width: 80%;
	border: green 2px solid;
	margin: 200px auto 0 auto;
}
 
div#content_form form {
	border: yellow 2px solid;
}
 
fieldset {
	border: blue 2px solid;
	margin-bottom: 1.5em;
	padding: 2em 0;
}
 
div#content_form h1#form_title {
	margin: 0;
	padding: 0;
	color: white;
	font-size: 22px;
}
 
div#content_form ul#login_alt {
	border: darkgreen 2px solid;
	padding-bottom: 2em;
}
 
div#form_submit {
	margin: 0 auto;
	width: 8em;
	text-align: center;
}
 
div#form_submit input {
	font-size: 14px;
	font-weight: bold;
	width: 8em;
	background-color: #8A190C;
	border: #410C05 2px solid;
	padding: 0.5em;
}
 
div#form_submit input:hover {
	border: white 2px solid;
}
 
fieldset legend {
	margin: 0;
	color: white;
	font-size: 22px;
	position: relative;
	top: 0.1em;
}
 
label.local,label.localdate {
	font-size: 14px;
	width: 90%;
	padding-bottom: 2em;
}
 
input#recaptcha_response_field {
 
}
 
input,select {
	width: 15em;
	border: #8A190C 2px solid;
	background-color: white;
}
 
label.localdate select {
	width: 5em;
	border: #8A190C 2px solid;
	background-color: white;
}
 
input:hover,select:hover {
	width: 15em;
	border: white 2px solid;
	background-color: #DDDDDD;
}
 
input:active,input:focus,select:active,select:focus {
	background-color: white;
	border: blue 4px double;
}
 
fieldset span {
	float: right;
}
 
label.local,label.localdate,label.local span,label.localdate span {
	float: left;
	clear: left;
	display: block;
}
 
label.local span,label.localdate span,ul.radio_list li label {
	color: white;
	text-align: right;
	width: 40%;
	padding-right: 2em;
}
 
label.local span.helpMsg,label.localdate span.helpMsg {
	color: darkgray;
	text-align: right;
	width: 40%;
	font-size: 8pt;
	padding-right: 2em;
	float: left;
	clear: left;
	display: block;
}
 
 
/*
 
   Footer section
 
*/
div#footer img#flags {
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 180px;
	right: 60px;
}
 
div#footer ul#footer_links {
	padding: 0;
	margin: 0;
	text-align: center;
}
 
div#footer ul#footer_links li {
	display: inline;
}
 
div#footer ul#footer_links li a {
	position: relative;
	top: 50px;
	color: white;
	padding: 0 1.5em;
}
 
div#footer ul#footer_links li.last a {
	position: relative;
	top: 50px;
	color: white;
	border: none;
}
 
 
 
/*
	New Booking
*/
div#search_results {
    position: relative;
    top: 30px;
	width: 50%;
	color: white;
	font-size: 12px;
	background-color: #333333;
	margin: 0 auto;
	padding: 0;
	border: blue 2px solid;
}
 
div#search_results ul
{
	background-color: red;
	margin: 0;
	padding: 0;
	border: green 2px solid;
}
 
div#search_results ul li {
	margin: 0;
	border: white 2px solid;
	background-color: #111111;
	color: white;
	padding: 0;
}
 
div#search_results ul li:hover {
	border: white 2px solid;
	background-color: #DDDDDD;
	color: black;
	padding: 0;
}
</style>
</head><body>
<div id="container"><!--
      This section has the common links in the header.
  -->
<div id="header">
</div>
<!-- End header -->
<div id="content_main">
 
<div id="content_form">
<form method="post" id="reservation_form" autocomplete="off" action="/frontend_dev.php/new-booking">
 
<fieldset>
<legend>Where</legend>
<label for="facility_search_keywords" class="local search">
<span>Rink Search</span>
<input id="facility_search_keywords" name="query" value="" type="text">
<span class="helpMsg">You can enter the rink name, city or province/state, then select from the dropdown</span>
</label>
<div style="display: block;" id="search_results">
<ul id="search_result_list"><li id="1219">Canlan Ice Sports - Winnipeg, Winnipeg, Manitoba</li>
<li id="1312">Winnipeg Winter Club, Winnipeg, Manitoba</li>
<li id="4187">Frank Whyte Recreation Centre, Winnipeg, Manitoba</li>
<li id="3893">Woodhaven Park Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3892">Windsor Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3891">Winakwa Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3890">Wildwood Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3888">Westridge Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3882">Varsity View Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3877">Sturgeon Creek Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3881">Valley Gardens Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3879">Tuxedo Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3883">Victoria Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3884">Waverley Heights Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3887">Weston Memorial Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3886">Westdale Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3885">West Kildonan Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3880">Tyndall Park Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3826">Clifton Community Centre Rink, Winnipeg, Manitoba</li>
<li id="3825">Champlain Community Centre Rink, Winnipeg, Manitoba</li>
</ul>
</div>
 
<input value="1219" name="reservation[facility_id]" id="reservation_facility_id" type="hidden">
<label for="reservation_description" class="local">
<span>Team/Booking Name</span>
<input name="reservation[description]" id="reservation_description" type="text"><span class="helpMsg">The name shown at the arena for your booking</span>
 
</label></fieldset>
 
 
<div id="formsubmit"><input value="Create" type="submit"></div>
</form>
<form method="post" id="search_form" action="/frontend_dev.php/rinks/search">
</form>
 
</div>
</div>
<!-- End content_main -->
<div id="footer"><img id="flags" alt="Countries" src="/images/flags_canada_us.png">
</div>
<!-- End footer --></div>
<!-- End container -->
 
</body>
</html>
 
[code]