SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 Contact form formatting issue

    Hi,

    Take a look at this page:

    http://www.flawless-wheels.co.uk/flawless/

    If you look in firefox, the "Let us call you" box looks perfect, but in IE7 it goes all crazy the boxes don't sit correctly..

    Any ideas why this is?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks fine in IE8 also, its just IE7..

    Could it be that the <li> doesn't have enough width?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

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

    You've made that a bit awkward haven't you

    You should put the label and the input in the same list item and then you can clear each row to keep things nice in ie.

    e.g.
    Code:
    <div id="contact-form">
                            <div style="margin:30px 0 10px 0;width: 260px; padding: 0; float: left">We aim to get back to you within the next 24 hours.</div>
                            <form action="" method="post">
                                <ul>
                                    <li class="li-height">
                                        <label>Your name: *</label>
                                        <input type="text" name="name" class="rounded" value=""/>
                                    </li>
                                    <li class="li-height">
                                        <label>Phone: </label>
                                        <input type="text" name="phone" class="rounded" value=""/>
                                    </li>
                                    <li class="li-height">
                                        <label>Email: *</label>
                                        <input type="text" name="email" class="rounded" value=""/>
                                    <li class="li-height">
                                        <label>Enquiry: *</label>
                                        <textarea id="body" name="enquiry" cols="10" rows="10" class="textbox" ></textarea>
                                    </li>
                                    <li class="li-height">
                                        <input type="submit" name="contactus" id="contactus" class="submit" value=""/>
                                    </li>
                                </ul>
                            </form>
                        </div>
    You should also associate the labels with the input id for good accessibility e.g. <label for="contactus">label</label>

    Code:
    /******************************************** CONTACT ********************************************/
    
    #contact-form {
        width:445px;
        overflow: hidden;
        margin:0;
    }
    #contact-form form {
        margin:0
    }
    #contact-form ul {
        list-style:none outside none;
        margin:0 180px 0 0px;
        padding:0;
        clear:both;
    }
    #contact-form li {
        padding:0;
        width:100&#37;;
        position:relative;
        left:-5px;
    }
    .li-height {
        margin:0 0 10px;
        clear:both;
        overflow:hidden;
    }
    #contact-form li label {
        float:left;
        width:85px;
        text-align:right;
        padding:0 5px 0 0;
        margin:0;
        clear:both;
    }
    .rounded {
        background:url("http://www.flawless-wheels.co.uk/flawless/view/images/text-box.jpg") no-repeat scroll left top transparent;
        border:0 none;
        color:#333;
        font-size:13px;
        height:24px;
        line-height:27px;
        margin:0;
        padding:0 3px;
        width:165px;
    }
    .submit {
        background:url("http://www.flawless-wheels.co.uk/flawless/view/images/submit.png") repeat scroll 0 0 transparent;
        border:0 none;
        cursor:pointer;
        height:17px;
        width:92px;
        margin:20px 0 0 150px;
    }
    .textbox {
        background:url("http://www.flawless-wheels.co.uk/flawless/view/images/textbox.jpg") no-repeat scroll 0 0 #E1E1E1;
        border:1px solid #BEBEBE;
        height:60px;
        width:170px;
        margin:0;
        overflow:auto;
    }
    /******************************************** FOOTER ********************************************/

  4. #4
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah my mistake!

    Thanks Paul.

    Works fine now..

    Regards
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy


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
  •