float problem in internet explorer

Discussion in 'CSS' started by gwh, Apr 9, 2008.

  1. #1
    Hi everyone,

    I have a form on a page (see code below) where I've placed the labels and input fields etc within li elements which are all in turn contained within a fieldset. The submit button is contained by a div. I've used floats to get the layout working and I set the width of the submit div to auto so that it becomes a normal block element that clears all the other floats – this means the form grows to encompass all the fieldset elements and the div bringing it back to the normal flow of the document. It works great in all browsers with the exception of internet explorer up to and including version 6, where the div sits below the fieldset.

    I wondered if someone could take a look at the code below and tell me if there's a workaround for ie?

    Thanks for any help offered.

    form {
    	margin-top: 10px;
    }
    
    fieldset input.text {
      width: 200px;
      height: 20px;
      border: 1px solid #634A95;
    }
    
    fieldset textarea {
      width: 350px;
      height: 80px;
      border: 1px solid #634A95;
    }
    
    fieldset input:hover, fieldset textarea:hover {
    	border-color:#00FF00;
    }
    
    fieldset
    {	position: relative;
    	float: left;
    	clear: both;
    	width: 100%;
    	margin: 10px 0 0;
    	padding: 10px 0 0;
    }
    
    fieldset ol {	
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    fieldset li
    {
    	position: relative;
    	float: left;
    	clear: left;
    	width: 100%;
    	padding: 0 0 10px;
    }
    
    label	{	
    	float: left;
    	width: 70px;
    	padding-right: 10px;
    	text-align: right;
    	color: #634A95;
    }
    label strong {
    	display: block;
    	width: 250px;
    	color: #CC0000;
    	font-size: 85%;
    	font-weight: normal;
    	text-transform: uppercase;
    	text-align: left;
    	padding: 5px 0 0 80px;
    }
    
    label strong#message {
    	padding: 65px 0 5px 80px;
    }
    
    div.submit
    {      float: none;
    	width: auto;
    	padding: 0 0 10px 80px;
    	margin: 0;
    	border: 1px solid #634A95;
    	background-image: url(../images/formback.jpg);
    	background-repeat: repeat-x;
    }
    Code (markup):


              <div id="columnMainInner">
                <h1>Contact Us </h1>
    		<p id="contact"><strong>Telephone:</strong> (02) 0000 0000</p>
    		<p><strong>Mobile:</strong> 0409 000 000</p>
    		<p><strong>Email:</strong> <a href="mailto:">.au</a></p>
    		
    
     <form action="" method="post" name="enquiry" id="enquiry">
    				<fieldset>
    					<ol>
    						<li>
    							<label for="name">
    								Name
    							</label> 
    							<input id="name" name="name" class="text" type="text" />
    						</li>
    
    						<li>
    
    							<label for="email">
    								Email
    							</label>
    							<input id="email" name="email" class="text" type="text" />
    						</li>
    						<li>
    							<label for="message">
    								Message
    							</label>
    							<textarea name="message" cols="30" rows="6" class="text" id="message"></textarea></li>			
    					</ol>
    				</fieldset>
    								<div class="submit">
    					<input name="enquiry" type="submit" id="enquiry"  value="Send Enquiry" class="submit" />
    				</div>
    		  </form>
              </div>
    
    Code (markup):
     
    gwh, Apr 9, 2008 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Your first problem is you're using a list to mark up your form elements. I know I know, Cameron Adams and a couple other people advocated using them, but believe it or not, they're WRONG. Lists contain list items (which are usually text). Form controls are NOT text because they are containers which in turn contain text.

    Second, your fieldsets will always render incorrectly in Internet Explorer because it cannot contain backgrounds on floats no matter what you do. You still need them (and their requisite legends) to ensure the accessibility of the form, but you just can't style them. Instead, use a DIV around your fieldsets, like I did in my CSS form example that I wrote last year. For more information, you'll want to read Legends of Style by John Faulds.
     
    Dan Schulz, Apr 9, 2008 IP
  3. gwh

    gwh Active Member

    Messages:
    64
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    93
    #3
    Thanks for that - will take a look at the links.
     
    gwh, Apr 11, 2008 IP
  4. Worlds'slastword

    Worlds'slastword Banned

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    thnx Dan Schulz u gave good info, this code i used in my work , thnx again.
     
    Worlds'slastword, Apr 11, 2008 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You're welcome. I'm just glad that somebody found it useful. :)
     
    Dan Schulz, Apr 11, 2008 IP