SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display labels in line with form fields(IE6 issue)

    I'm having some nightmare issues with IE6 not playing ball.

    It seems to just affect my radio buttons/label alignment.

    In Firefox and IE7/8 it looks good.

    Here's the HTML/CSS.


    Can someone please help resolve this issue in IE6? Many thanks for any input.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    	/* Contact Form CSS */
    	
    	.contact-form {
    		float:left;
    	}
    	
    	/* Begin Contact Form ][ CSS */
    	.contactform {
    		position: static;
    		overflow: hidden;
    	}
    
    	.contactleft {
    		width: 35%;
    		text-align: right;
    		clear: both;
    		float: left;
    		display: inline;
    		padding: 4px;
    		margin: 5px 0;
    	}	
    
    	.contactright {
    		width: 60%;
    		text-align: left;
    		float: right;
    		display: inline;
    		padding: 4px;
    	}	
    
    	.contacterror {
    		border: 2px solid #ff0000;
    	}
    
    	.contactform label, .contact-details p {color:#888A8E;}
    
    	.contactform input {color:#888A8E;background:transparent;border:1px solid #888A8E}
    
    	.contactform textarea {color:#888A8E;background:transparent;border:1px solid #888A8E}
    
    	.contactform .submit {color:#888A8E;background:transparent;border:1px solid #888A8E;padding:10px}
    </style>
    
    </head>
    
    <body>
    
    <div class="contact-form">
    					
    						<div class="contactform" id="c_form_2">
    
    				
    										<form action="" id="contactForm" method="post">
    										
    											<div class="contactleft">
    												<label for="wood">I would like to:</label>
    											</div>
    											
    											<div class="contactright">
    												<input name="wood" id="book-a-visit" value="Booking a visit" type="radio"> book a visit from our experts.<br>
    												<input name="wood" id="free-site-survey" value="A free customer site survey" type="radio"> discuss a free customer site survey.<br>
    
    												<input name="wood" id="other" value="Other" type="radio"> discuss another service.
    											</div>
    						
    											<div class="contactleft">
    											  <label for="yname">Your Name </label>
    											</div>
    							
    											<div class="contactright">
    												<input name="yname" id="yname" size="33" maxlength="50" value="" type="text"> 
    											</div>
    							
    											<div class="contactleft">				
    											  <label for="company">Company Name </label>
    
    											</div>
    		
    							
    											<div class="contactright">					
    												<input name="company" id="company" size="33" maxlength="50" value="" type="text"> 
    											</div>
    							
    											<div class="contactleft">				
    											  <label for="telno">Telephone </label>
    											</div>
    						
    							
    											<div class="contactright">					
    												<input name="telno" id="telno" size="33" maxlength="50" value="" type="text"> 
    											</div>
    		
    							
    											<div class="contactleft">
    
    											  <label for="emailadd">Email </label>
    											</div>				
    							
    											<div class="contactright">					
    												<input name="emailadd" id="emailadd" size="33" maxlength="50" value="" type="text" />
    												</div>
    											
    											
    											<div class="contactleft">				
    												<label for="verif_box"><strong>Security Question</strong><br>Is fire hot or cold?</label>										
    											</div>
    											
    											<div class="contactright">
    
    												<input name="verif_box" id="verif_box" size="33" maxlength="50" value="" type="text"><br />
    											</div>
    							
    											<div class="contactleft">
    												<label for="comments">Enquiry</label>
    											</div>
    						
    							
    											<div class="contactright">
    												<textarea name="comments" id="comments" cols="30" rows="8"></textarea><br />
    											</div>
    
    							
    											<div class="contactright">
    											<input name="contactsubmit" value="Send Message" id="contactsubmit" class="submit" type="submit" />
    											</div>
    						
    										</form>
    					
    							</div>
    				
    								
    </div>
    
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi...

    i dont c any errors in ur radio buttons, am using ie 6 only....

    can specify exactly what problem are u facing...

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, in a rush to post the code, I didn't explain myself

    Basically I find in IE6 the labels don't match the form elements on the right.

    The text on the left should align with the relevant form field, but in IE6 this doesn't happen. It seems to be to do with my radio buttons

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh... i got ur prob... the radio buttons dont have any padding right....

    add a class with ur code and give padding to it.

    <input name="wood" id="book-a-visit" value="Booking a visit" class="rpadding" type="radio">

    css

    .rpadding {
    padding: 5px 0px;
    }

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sadly, this did not resolve the issue.

  6. #6
    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,

    The page seems to be badly broken in IE7. If you are floating things left and then right you really need to clear each pair of floats before you start another row otherwise the floats will just rise up and be out of line. With the code you posted above if you open the window wider in IE7 then it all goes badly wrong.

    The only thing I notice in IE6 is that you have given a border to all inputs which IE applies to radio buttons also and makes then look strange so remove the border from the radio buttons.

    That code is a bit overkill (if you don't mind me saying) and all those divs are unnecessary. I know it's probably a bit late for you to change now but you can get a similar effect with a very clean structure like this basic generic example.

    Basically labels are floated left with a suitable width and so are the inputs. A break is used to separate each pair of inputs (one of the few valid times you can use breaks) and the break is set to clear both so that each pair always start together. (A side effect and benefit of using the break is that the form also looks good without styling.)

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    fieldset{width:300px;float:left}
    legend{
        font-weight:bold;
        margin:0 0 1em 0;
        color:#000;
    }
    #form1 label{
        float:left;
        width:7em;
        text-align:right;
        padding:5px 10px 5px 10px;
    }
    #form1 input{
        width:100px;
        margin:5px 0;
        float:left;
    }
    br{clear:both;}
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <fieldset>
        <legend>Form Test</legend>
        <label for="firstname">First Name:</label>
        <input type="text" name="firstname" id="firstname" />
        <br />
        <label for="lastname">Last Name:</label>
        <input type="text" name="lastname" id="lastname" />
        <br />
        <label for="address1">Address 1 with some longer text:</label>
        <input type="text" name="address1" id="address1" />
        <br />
        <label for="address2">Address 2:</label>
        <input type="text" name="address2" id="address2" />
        <br />
        <label for="address3">Address  3:</label>
        <input type="text" name="address3" id="address3" />
        <br />
        <label for="address4">Address 4:</label>
        <input type="text" name="address4" id="address4" />
        <br />
        <label for="city">City:</label>
        <input type="text" name="City" id="city" />
        <br />
        <label for="state">State</label>
        <input type="text" name="state" id="state" />
        <br />
        <label class="zip" for="zip">Zip:</label>
        <input type="text" name="zip" id="zip" />
        <br />
        <label for="tel">Telephone:</label>
        <input type="text" name="tel" id="tel" />
        <br />
        </fieldset>
    </form>
    </body>
    </html>
    Note that the vertical alignment of form elements varies between browsers anyway and you always end up having to tweak the difference between IE and the rest.

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the speedy, in-depth reply Paul.

    My only concern is if I were to change one of the input boxes and have (say) three radio buttons. How would I then keep it aligned correctly with the labels?

  8. #8
    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,

    Yes things are not always as straight forward as the examples show and there will always be something different that you have to cater for and most times you would style these uniquely.

    I do have a couple of little demos to show a few variations which may help.

    the first shows one label with multiple inputs.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #form1 label {
        float:left;
        width:8em;
        clear:both;
        text-align:right;
        padding:0 1em 0 0;
    }
    #form1 .controls {
        overflow:hidden;
        width:200px;
        display:block;
    }
    #form1 input {
        margin:0 0 .5em
    }
    #form1 div {
        overflow:hidden;
        width:100&#37;;
        margin:1em 0;
    }
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <fieldset>
        <legend>Form example</legend>
        <div>
            <label for="address1">Address:</label>
            <span class="controls">
            <input type="text" name="address1" id="address1" />
            <input type="text" name="address2" id="address2" />
            <input type="text" name="address3" id="address3" />
            </span></div>
        <div>
            <label for="address4">Address block 2:</label>
            <span class="controls">
            <input type="text" name="address4" id="address4" />
            <input type="text" name="address5" id="address5" />
            <input type="text" name="address6" id="address6" />
            </span></div>
        <div>
            <label for="address7">Address block final:</label>
            <span class="controls">
            <input type="text" name="address7" id="address7" />
            <input type="text" name="address8" id="address8" />
            <input type="text" name="address9" id="address9" />
            </span></div>
        </fieldset>
    </form>
    </body>
    </html>
    The second shows another variation with inputs lined up at the bottom of the text.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    form{margin:0;padding:0}
    input{vertical-align:middle}
    fieldset{border:none;}
    .formtest{
        line-height:1.2em;
        margin:1em 0;
        position:relative;
        width:100%;
    }
    .formtest label {
        float:left;
        width:150px;
        clear:both;
        text-align:right;
        padding:0 15px 0 0;
    }
    .formtest .controls {
        overflow:hidden;
        width:200px;
        display:block;
    }
    .formtest input {
        margin:0 0 .5em
    }
    .formtest div {
        overflow:hidden;
        width:100%;
        margin:1em 0;
    }
    
    .test2 input{
        clear:both;
        float:left;
        margin:-20px 0 0 165px;
        position:relative;
    }
    .test2 div {
        float:left;
        clear:both;
        overflow:visible;
        margin:0;
        padding:1em 0 0;
    }
    </style>
    </head>
    <body>
    <form id="form1" class="formtest" method="post" action="">
        <fieldset>
        <legend>Form example</legend>
        <div>
            <label for="address1">Address:</label>
            <span class="controls">
            <input type="text" name="address1" id="address1" />
            <input type="text" name="address2" id="address2" />
            <input type="text" name="address3" id="address3" />
            </span></div>
        <div>
            <label for="address4">Address block 2:</label>
            <span class="controls">
            <input type="text" name="address4" id="address4" />
            <input type="text" name="address5" id="address5" />
            <input type="text" name="address6" id="address6" />
            </span></div>
        <div>
            <label for="address7">Address block final:</label>
            <span class="controls">
            <input type="text" name="address7" id="address7" />
            <input type="text" name="address8" id="address8" />
            <input type="text" name="address9" id="address9" />
            </span></div>
        </fieldset>
    </form>
    
    <form id="form2" class="formtest test2" method="post" action="">
        <fieldset>
        <legend>Form example 2</legend>
        <div>
            <label for="name">Please enter your name into this field :</label>
            <input type="text" name="name" id="name" />
        </div>
        <div>
            <label for="name">Age :</label>
            <input type="text" name="age" id="age" />
        </div>
        <div>
            <label for="name">Please enter something into this box so we can see what you are talking about : </label>
            <input type="text" name="text" id="text" />
        </div>
        <div>
            <label for="name">More stuff :</label>
            <input type="text" name="more" id="more" />
        </div>
            <div>
            <label for="name">and more stuff :</label>
            <input type="text" name="more2" id="more2" />
        </div>
        </fieldset>
    </form>
    
    
    
    </body>
    </html>
    Back to your original problem - what is the exact problem you have with IE6?

    When I look at the code you posted in IE6 it looks pretty good except as mentioned that the radio inputs have borders on them.

    Is there another issue that I'm missing?

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that's ruddy marvellous!
    Can't thank you enough Paul. I've been doing it a fairly bulky unnecessary way up 'til now.


    Thanks again for the guidance, code, explanation, patience etc.


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
  •