IE7 Contact form formatting issue

HTML & CSS
1

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

2

Hi,

You’ve made that a bit awkward haven’t you :slight_smile:

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;
}
[B]#contact-form form {
    margin:0
}[/B]
#contact-form ul {
    list-style:none outside none;
 [B]   margin:0 180px 0 0px;
    padding:0;
    clear:both;[/B]
}
#contact-form li {
   [B] padding:0;
    width:100&#37;;
    position:relative;
    left:-5px;[/B]
}
.li-height {
  [B]  margin:0 0 10px;[/B]
[B]    clear:both;
    overflow:hidden;[/B]
}
#contact-form li label {
[B]    float:left;
    width:85px;
    text-align:right;
    padding:0 5px 0 0;
    margin:0;
    clear:both;[/B]
}
.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;
  [B]  margin:0;[/B]
    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;
 [B]   margin:20px 0 0 150px;[/B]
}
.textbox {
    background:url("http://www.flawless-wheels.co.uk/flawless/view/images/textbox.jpg") no-repeat scroll 0 0 #E1E1E1;
    border:1px solid #BEBEBE;
[B]    height:60px;
    width:170px;[/B]
[B]    margin:0;
    overflow:auto;[/B]
}
/******************************************** FOOTER ********************************************/
3

Ah my mistake! :confused:

Thanks Paul.

Works fine now…

Regards

4

It looks fine in IE8 also, its just IE7…

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