IE7 Contact form formatting issue

[billy_111]

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

[billy_111]

It looks fine in IE8 also, its just IE7..

Could it be that the <li> doesn't have enough width?

[Paul O'B]

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.

<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>

/******************************************** 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%;
    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 ********************************************/

[billy_111]

Ah my mistake!

Thanks Paul.

Works fine now..

Regards