SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form - 2 IE issues

    Hello.

    The form is here:

    http://form.enterdesign.com.au/

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    
    	<title>The Form</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<style type="text/css">
    	<!-- @import "reset.css"; @import "styles.css"; -->
    	</style>
    
    </head>
    <body>
    
    <div id="wrapper" class="clearfix">
    
    	<h1>The Form</h1>
    	
    	<form action="example.php">
    	
    		<fieldset class="contact">
    			<legend>Contact Details</legend>	
    			<ol>
    				<li>
    			
    					<label for="title">Title:</label>
    					<input id="title" name="title" class="text" type="text" />
    			
    				</li>
    				<li>
    			
    					<label for="fname">First Name:<em class="asteriks">*</em></label>
    					<input id="fname" name="fname" class="text" type="text" />
    				
    				</li>
    				<li>
    				
    					<label for="lname">Last Name:<em class="asteriks">*</em></label>
    					<input id="lname" name="lname" class="text" type="text" />
    				
    				</li>
    				<li>
    			
    					<label for="email">Email address:<em class="asteriks">*</em></label>
    					<input id="email" name="email" class="text" type="text" />
    				
    				</li>
    				<li>
    			
    					<label for="phone1">Phone1:<em class="asteriks">*</em></label>
    					<input id="phone1" name="phone1" class="text" type="text" />
    				
    				</li>
    				<li>
    				
    					<label for="phone2">Phone2:</label>
    					<input id="phone2" name="phone2" class="text" type="text" />
    				
    				</li>
    				<li>
    				
    					<label for="fax">Fax:</label>
    					<input id="fax" name="fax" class="text" type="text" />
    				
    				</li>
    			</ol>	
    		</fieldset>
    		
    		<fieldset class="delivery">
    			<legend>Delivery Address</legend>
    			<ol>
    				<li>
    			
    					<label for="address1">Address 1:<em class="asteriks">*</em></label>
    					<input id="address1" name="address1" class="text" type="text" />
    				
    				</li>
    				<li>
    			
    					<label for="address2">Address 2:</label>
    					<input id="address2" name="address2" class="text" type="text" />
    				
    				</li>
    				<li>
    			
    					<label for="suburb">Suburb/Town:<em class="asteriks">*</em></label>
    					<input id="suburb" name="suburb" class="text" type="text" />
    				
    				</li>
    				<li>
    				
    					<label for="state">State/Territory:<em class="asteriks">*</em></label>
    					<select id="state" name="state">
    						<option selected="selected">Select State/Territory</option>
    						<option>New South Wales</option>
    						<option>Queensland</option>
    						<option>Victoria</option>
    						<option>South Australia</option>
    						<option>Western Australia</option>
    						<option>Australian Capital Territory</option>
    						<option>Nothern Territory</option>
    						<option>Tasmaia</option>
    					</select>
    					
    				</li>
    				<li>
    			
    					<label for="postcode">Postcode:<em class="asteriks">*</em></label>
    					<input id="postcode" name="postcode" class="text" type="text" />
    				
    				</li>
    			</ol>
    		</fieldset>
    		
    		<fieldset class="submit">
    		
    			<p>All fields marked with an asterisk (<em class="asteriks">*</em>) are required.</p>
    			
    			<ol>
    				<li>
    					<label for="terms">I have read and agree to the <a href="terms.htm">Terms &amp; Conditions</a>:</label>
    					<input id="terms" name="terms" type="checkbox" class="checkbox" />
    				</li>
    			</ol>
    			
    			<input class="submit" type="submit" value="Submit" />
    		
    		</fieldset>
    		
    	</form>
    
    </div> <!-- end wrapper -->
    
    </body>
    </html>
    Code:
    /* reset.css */
    html, body, div, span, object,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td 
    {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
    
    body
    {
    color: #000000;
    background: #FFFFFF;
    line-height: 1;
    }
    
    ol, ul
    {
    list-style: none;
    }
    
    table
    {
    border-collapse: separate;
    border-spacing: 0;
    }
    
    caption, th, td 
    {
    text-align: left;
    font-weight: normal;
    }
    
    /* styles.css */
    
    body
    {
    background-color: #5C83A2;
    font: 13px/1.2 Arial, Helvetica, sans-serif;
    text-align: center;
    }
    
    * html body
    {
    font-size: x-small;
    f\ont-size: small;
    }
    
    div#wrapper
    {
    background-color: #FFFFFF;
    margin: 0 auto;
    text-align: left;
    width: 500px;
    }
    
    h1
    {
    font-size: 277%;
    font-weight: bold;
    padding-top: 10px;
    text-align: center;
    }
    
    fieldset 
    {
    margin: 20px 20px 0 20px;
    }
    
    fieldset ol 
    {
    padding: 10px 10px 0 10px;
    }
    
    fieldset li 
    {
    padding-bottom: 1em;
    }
    
    legend 
    {
    margin-left: 15px;
    font-weight: bold;
    }
    
    fieldset
    {
    border: 1px solid #000000
    }
    
    fieldset.submit 
    {
    border-style: none;
    padding-bottom: 20px;
    }
    
    input.checkbox
    {
    vertical-align: middle;
    }
    
    p, input.submit
    {
    margin-left: 10px;
    }
    
    fieldset.contact label, fieldset.delivery label 
    {
    float: left;
    width: 140px;
    margin-right: 15px;
    text-align: right;
    }
    
    fieldset.contact, fieldset.delivery
    {
    border: 1px solid #BFBAB0;
    background-color: #F2EFE9;
    }
    
    em.asteriks
    {
    color: red;
    font-weight: bold;
    }
    My IE issues are (every version of IE) That the submit button is too far to the right. This is caused by the bold CSS line ^ but i dont know why:

    The other problem is that the fieldset background-color covers the top half of the legend. The book (Art and Science of CSS had a way to fix this, but it did not work...)

    Their method was to include the following in an IE stylesheet:

    Code:
    legend {
    position: relative;
    left: -7px;
    top: -0.75em;
    }
    fieldset ol {
    padding-top: 0.25em;
    }
    Any help appreciated.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the legend and fieldset, please read Tyssen's excellent article, The Legends of Style for how to fix the fieldset and legend cross-browser.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To fix the submit in IE the just enclose the input in a div as IE doesn't like it that you have left the inline element hanging in mid-air (for some reason).

    Code:
            </ol>
            <div><input class="submit" type="submit" value="Submit" /></div>
            </fieldset>
        </form>
    </div>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    To fix the legend just give this to IE only (no need to change anything else ).

    Code:
    legend {
    top:-.7em;
    position:relative;
    }
    fieldset{position:relative;}
    Hope that helps

  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will Try it, thank you very much


Bookmarks

Posting Permissions

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