Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form background help - Cross Browser Issue

    Here's my dilemma.

    I am tasked with creating a 2-column form for submitting a quote request.
    The form has a background.

    I was wanting to place the labels above the fields, but I just can't seem to get it to work - so I figured I would add the labels to the background - but then I have browser compatibility issues, and the labels don't line up with the fields.

    At this point, I'm VERY frustrated.. and need help from some CSS pros!

    Question:
    1. Would it be easier to try and add labels above the fields - so at least they will show in multiple browsers? Or should I continue trying to work on the background image (having browser display a different image based on whether it's IE, Firefox etc).

    2. Could someone take a look at my code, and tell me how I could get the labels above my fields?? I have limited space - so not sure how this would work.

    I'm attaching an image of what I would like the finished form to look like (please ignore misaligned fields - did this in photoshop real fast) - :



    Here's the CSS for my form:
    Code:
    <style type="text/css">
    /*---- form styling -----*/
    #apDiv-form {
    	font:normal .9em Arial, Helvetica, sans-serif;
    	color:#193742;
    	position:absolute;
    	width:720px;
    	height:300px;
    	z-index:1;
    	left: 55px;
    	background-image: url(images/images/bgform.png);
    	background-image: url(images/images/bgform-chrome.png) !important;
    	background-repeat: no-repeat;
    }
    #apDiv-formcontent {
    	position:absolute;
    	width:504px;
    	height:301px;
    	z-index:6;
    	left: 194px;
    }
    #frmQuote fieldset {
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    #frmQuote .column-left   {
    	margin: 0px;
    	float: left;
    	top: 3px;
    	position: fixed;
    	width: 287px;
    }
    #frmQuote .column-left .pickup fieldset legend   {
    	font-size: 14px;
    	font-weight: bold;
    	padding-top: 10px;
    	display: block;
    }
    #frmQuote .column-right .vehicle fieldset legend {
    }
    #frmQuote .column-left .dropoff fieldset legend {
    	font-weight: bold;
    	display: block;
    	margin-top: 6px;
    }
    #frmQuote .column-left .contact fieldset legend {
    	font-weight: bold;
    	display: block;
    	margin-top: 10px;
    }
    #frmQuote .column-right .vehicle fieldset legend {
    	font-weight: bold;
    	display: block;
    	font-size: 14px;
    }
    #frmQuote .column-right .vehicle fieldset p {
    	margin-top: 12px;
    }
    #frmQuote .column-left .pickup   {
    	display: inline;
    }
    #frmQuote .column-left .contact   {
    	display: inline;
    }
    #frmQuote .column-left .contact {
    	display: inline;
    }
    #frmQuote .column-left .pickup fieldset p   {
    	padding: 0px;
    	margin-top: 10px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    #frmQuote .column-left .dropoff fieldset p {
    	padding: 0px;
    	margin-top: 15px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    #frmQuote .column-left .contact fieldset p {
    	padding: 0px;
    	margin-top: 18px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    #frmQuote .column-right .vehicle fieldset p #trailer_type {
    	margin-left: 25px;
    }
    #frmQuote .column-right   {
    	position: absolute;
    	float: right;
    	width: 205px;
    	left: 296px;
    	height: 272px;
    	margin: 0px;
    	padding-top: 3px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    }
    </style>
    And here's the HTML:

    Code:
    <body>
    
    <div id="apDiv-form">
        <div id="apDiv-formcontent">
    <form action="quote_process.php" method="post" name="frmQuote" id="frmQuote">
            
       <div class="column-left" > 
          <span class="pickup">
            <fieldset>
          		<legend>Pickup Details</legend>
                <p>
                  <input name="pickup_city" type="text" id="pickup_city" tabindex="10" size="15">
                  <input name="pickup_state" type="text" id="pickup_state" tabindex="15" size="2" maxlength="3">
                  <input name="pickup_zip" type="text" id="pickup_zip" tabindex="20" size="5" maxlength="5">  
                </p>
            </fieldset>
          </span>
          <span class="dropoff">
                <fieldset>
                <legend>Dropoff Details</legend>
                <p>
                  <input name="dropoff_city" type="text" id="dopoff_city" tabindex="25" size="15">
                  <input name="dropoff_state" type="text" id="dropoff_state" tabindex="30" size="2" maxlength="3">
                  <input name="dropoff_zip" type="text" id="dropoff_zip" tabindex="35" size="5" maxlength="5">
                </p>
                </fieldset>
          </span>
          <span class="contact">      
                <fieldset>
                <legend>Contact Details</legend>
                <p>
                  <input name="first_name" type="text" id="first_name" tabindex="40" size="15">
                  <input name="last_name" type="text" id="last_name" tabindex="45" size="15">
                </p>
                <p>
                  <input name="email" type="text" id="email" tabindex="50" size="15">
                  <input name="phone" type="text" id="phone" tabindex="55" size="15">
                </p>
                <p>
                  <select name="referrer" id="referrer" tabindex="60">
                    <option selected="selected">Select</option>
                    <option value="Don't know">Don't know</option>
                    <option value="Referred by Friend">Referred by Friend</option>
                    <option value="Craigslist">Craigslist</option>
                  </select>
                </p>
              </fieldset>
          </span>
          </div><!--end column-left -->
              
              <div class="column-right">
          <div class="vehicle">
              <fieldset>
                  <legend>Vehicle Details</legend>
                <p>
                  <input name="year" type="text" id="year" tabindex="60" size="3" maxlength="4">
                  <input name="make" type="text" id="make" tabindex="65" size="13">
                </p>
                <p>
                  <input name="model" type="text" id="model" tabindex="65" size="15">
                </p>
                <p>
                  <select name="vehicle_runs" id="vehicle_runs" tabindex="75">
                    <option selected>Select</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                  </select>
                    <select name="trailer_type" id="trailer_type" tabindex="80">
                    <option selected>Select</option>
                    <option value="Open">Open</option>
                    <option value="Enclosed">Enclosed</option>
                  </select>
                </p>
                <p>
                  <textarea name="comments" id="comments" cols="20" rows="3" tabindex="85"></textarea>
                </p>
                <p>
                  <input type="submit" name="submit_quote" id="submit_quote" value="Submit" tabindex="90">
                </p>
              </fieldset> 
          </div>
          </div><!--end column-right -->
    </form> 
      </div><!--end-formcontent -->    
        </div><!--end apDiv-form -->
        
    </body>
    I'm sure I've gone about this the wrong way - but being new to CSS, I'm learning as I go along.

    Look forward to reading your replies!
    Last edited by keltik; 04-10-2012 at 06:33 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •