Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 2 of 2

Thread: Inputs misalgined in fieldset in IE

  1. #1

    Inputs misalgined in fieldset in IE

    I have 2 fieldsets on 1 page and the fields in the first fieldset align just fine in IE, but the fields in the second fieldset don't. Of course it looks fine in firefox. Any help would be appreciated. See html and css below.

    Code:
    <cfoutput>
    <input type="hidden" name="page" value="per">
    <table width="832" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td align="left" valign="top" class="cntnr">
        <fieldset>
        <legend>Personal Information</legend>
          <span class="req">*Required</span>
          <cfif errMsg neq ""><span class="errmsg">#errMsg#</span></cfif>
          <ol>
          <li>
          <label for="prefix">*Prefix:</label> <select name="prefix" id="prefix">
          <option selected value="">Select</option>
          <option <cfif evaluate("session."&MySes&".per.profile.prefix") eq "Mr">selected</cfif> value="Mr">Mr.</option>
          <option <cfif evaluate("session."&MySes&".per.profile.prefix") eq "Miss">selected</cfif> value="Miss">Miss</option>
          <option <cfif evaluate("session."&MySes&".per.profile.prefix") eq "Mrs">selected</cfif> value="Mrs">Mrs.</option>
          <option <cfif evaluate("session."&MySes&".per.profile.prefix") eq "Ms">selected</cfif> value="Ms">Ms</option>
          </select>
          </li>     
          <li>
          <label for="fname">*Traveler First Name:</label> 
          <input type="text" class="text" name="fname" id="fname" value="#evaluate('session.'&MySes&'.per.traveler.fname')#">
          </li>
          <li>
          <label for="lname">*Traveler Last Name:</label>
          <input type="text" class="text" name="lname" id="lname" value="#evaluate('session.'&MySes&'.per.traveler.lname')#">
          </li>
          <li>
          <label for="mobile_number">Traveler Cellular Phone:</label>
          <input type="text" class="text" name="mobile_number" id="mobile_number" value="#evaluate('session.'&MySes&'.per.phone.mobile_number')#">
          </li>
          <li>
          <label for="email">*Traveler Email:</label>
          <input type="text" class="text" name="email" id="email" value="#evaluate('session.'&MySes&'.per.traveler.email')#">
          </li>
          <li>
          <label for="spouse">Will your spouse join us?</label>
          <input name="spouse" type="radio" value="no" checked="checked" /> Yes
          <input type="radio" name="spouse" value="yes" /> No
          </li>
          <li>
          <label for="spsnm">Spouses Name:</label>
          <input type="text" class="text" name="spsnm" id="spsnm" />
          </li>
          </ol>
          </fieldset>      
          <fieldset>
          <legend>Emergency Contact Information</legend>
          <ol>
          <li>
          <label for="emname">*Name:</label><input type="text" class="text" name="emname" id="emname" value="#evaluate('session.'&MySes&'.per.emergency.emname')#" />
          </li>
          <li>
          <label for="relation">*Relationship:</label><input type="text" class="text" name="relation" id="relation" value="<cfif evaluate('session.'&MySes&'.per.emergency.relation') eq ""><cfelse>#evaluate('session.'&MySes&'.per.emergency.relation')#</cfif>" />
          </li>
          <li>
          <label for="emphone">*Phone Number:</label><input type="text" class="text" maxlength="20" name="emphone" id="emphone" value="#evaluate('session.'&MySes&'.per.emergency.emphone')#" />
          </li>
          </ol>
          <button id="ctrlBtn" onclick="goToURL()" name="button" type="button" class="bckbtn">BACK</button><button id="ctrlBtn" onclick="goToURL()" name="next" type="submit" class="subtext">NEXT</button>
          </fieldset>
          
            </td>
        </tr> 
        <tr>
          <td><img src="images/footer.png" width="832" height="258" /></td>
      </tr> 
    </table>
    <cfinclude template="footer.cfm">
    </cfoutput>
    Code:
    body, html {margin: 0; padding:0; font-family: Arial, Arial, Helvetica, sans-serif; font-size: 12px; color: #5c5e5e; background: url(../images/main_bkgrnd.jpg);}
    
    .cntnr {width:832px; background:url(../images/bdy_bkgrnd.png) repeat-y; position:relative;}
    
    .headline {color:#a2a000; font-size:24px; margin:0 0 0 125px; font-weight:bold;}
    
    .cntnr h1 {color:#a2a000; font-size:24px; margin:0 0 0 225px; padding:0; line-height:normal;}
    
    .cntnr h2 {color:#01714b; font-size:16px; margin:0 0 0 125px; padding:0; line-height:normal;}
    
    .hmnxt {margin:20px 0 0 455px;}
    
    .req {font-size:10px;}
    
    .errmsg {color:red; display:block; margin:10px 0;}
    
    .ftr {color:black; font-size:10px;}
    
    fieldset {float:left; clear: both; margin: 0 0 1.5em 150px; padding: 0; border: none; background-color:transparent; position:relative;}
    
    legend {position:relative; left:-7px; top:-0.75em; margin-left:1em; padding:0px; color:#a2a000; font-weight:bold; font-size:24px;}
    
    fieldset ol {padding: 1em 1em 0 0; list-style:none;} 
    
    fieldset li {width: 100%; padding-bottom: 1em;}
    
    label {float: left; width: 11em; margin: 0 1em 0 0; text-align: right; color:#00764c; height:auto;}
    
    select {border: 1px solid #CCCCCC; width:195px;}
    
    input.text {width:195px;}
    
    textarea {border: 1px solid #CCCCCC; width:195px;}
    
    fieldset.submit {float: none; width: auto; border-style: none; padding-left: 0px; text-align:left; background-color: transparent; margin:0;}
    
    .htl {color:#00764c; margin:10px 0;}
    
    .bckbtn {margin:0 0 0 270px;}

  2. #2
    Remove clear: both; from fieldset.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012