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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE form spacing problems

    Hi all, I seem to be having some IE6/7 spacing issues on a form I can't figure out and was hoping to get some help. It works great in IE8 (cause of the better rendering engine), FF, Chrome, etc. but just having issues in IE6/7 of course. I attached a screenshot of it in IE7 for you to take a look at.

    Below, is the code for the CSS I'm using for the form:

    Code:
    * {
    	padding: 0px;
    	margin: 0px;
    	border: none;
    }
    
    #formwrap {
    	clear: both;
    	overflow: hidden;
    }	
    
    #formwrap form {
    	width: 605px;
    	float: right;
    }
    
    #formwrap form dt {
    	font-weight: bold;
    	width: 65px;
    	padding: 5px 5px 0px 0px;
    	float: left;
    	text-align: right;
    	clear: both;	
    }
    
    #formwrap form dd input {
    	background: url(../images/bg_input.gif) top left no-repeat;
    	width: 510px; height: 19px;
    	padding: 3px 5px 0px;
    	margin: 0px;
    }
    
    #formwrap form dd textarea {
    	background: url(../images/bg_textarea.gif) top left no-repeat;
    	width: 512px; height: 91px;
    	padding: 5px 3px 5px 5px;
    	overflow: auto;
    }
    Below is the html I'm using for the form:

    Code:
    <div id="formwrap">
    <form action="vars.php" method="post">
            <fieldset>
              <dl>
                <dt>
                  <label for="name"><span class="reqtxt">*</span> Name:</label>
                </dt>
                <dd>
                  <input type="name" name="name" size="32" class="comment" maxlength="32" />
                </dd>
              </dl>
              <dl>
                <dt>
                  <label for="email"><span class="reqtxt">*</span> Email:</label>
                </dt>
                <dd>
                  <input type="email" name="email" size="32" class="comment" maxlength="32" />
                </dd>
              </dl>
              <dl>
                <dt>
                  <label for="phone">Phone:</label>
                </dt>
                <dd>
                  <input type="phone" name="phone" size="32" class="comment" maxlength="32" />
                </dd>
              </dl>
              <dl>
                <dt>
                  <label for="company">Company:</label>
                </dt>
                <dd>
                  <input type="company" name="company" size="32" class="comment" maxlength="32" />
                </dd>
              </dl>
              <dl>
                <dt>
                  <label for="subject">Subject:</label>
                </dt>
                <dd>
                  <input type="subject" name="subject" size="32" class="comment" maxlength="32" />
                </dd>
              </dl>
              <dl class="commentarea">
                <dt>
                  <label for="message"><span class="reqtxt">*</span> Message:</label>
                </dt>
                <dd>
                  <textarea name="message" rows="4" tabindex="4"></textarea>
                </dd>
              </dl>
              <dl class="btnrow">
                <dd>
                  <input id="submit" name="submit" type="image" src="images/btn_submit.gif" />
                </dd>
              </dl>
            </fieldset>
          </form>
    </div>
    Here are the following spacing issues I'm having with IE6/7:

    1. At the top of the form there's about 9 pixels of height. It should come flush with the picture above it. I have no idea where the extra space is coming from.
    2. On the inputs & text area field, there's about 2 pixels of height between them. They should come completely flush to each other.
    3. On the text area input, when you type in the field enough characters to make the scroll bar appear the background doesn't stay fixed. I've tried using a fixed on the css, but that didn't seem to work. Any suggestions for this issue?

    I've tried googling but didn't come up with anything good. I'm sorta stuck at this point, so any insight would be very welcome. Thanks.
    Attached Thumbnails Attached Thumbnails IE form spacing problems-formie7.jpg  
    Last edited by yanksno1; 06-06-2009 at 08:01 PM. Reason: missing code

  • #2
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Try adding this to your CSS?

    Code:
    input {
    padding:0;
    }

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's not it. The padding is working fine on the inputs. It seems there's some extra margin being added on the top or bottom of them. I could do a IE6/7 css hack, but if I don't have to I'd rather not. I'm still not sure what's going on with the textarea and the background though. Any suggestions?

  • #4
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    You've already got the universal selector at the top of your CSS anyway, sorry, of couse adding that wouldn't help. *facepalm*

    With the background thing, have you tried applying the background to the <dd> around the <textarea> rather than to the text area? Not sure if that might work...
    Last edited by Kristofa; 06-07-2009 at 06:49 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
    •