invision
09-14-2008, 09:57 AM
Hi,
The following HTML works a treat in Firefox. The 'Name' is aligned with the 'Name' input field and so on.
However in IE7 and *lightning strike* IE6, it goes a bit wonky.
<html>
<head>
<style type="text/css">
/* Begin Contact Form ][ CSS */
.contactform {
position: static;
overflow: hidden;
}
.contactleft {
width: 25%;
text-align: right;
clear: both;
float: left;
display: inline;
padding: 4px;
margin: 5px 0;
font-weight: bold;
}
.contactright {
width: 70%;
text-align: left;
float: right;
display: inline;
padding: 4px;
margin: 5px 0;
}
.contacterror {
border: 2px solid #ff0000;
}
/* End Contact Form ][ CSS */
</style>
</head>
<body>
<div class="contact-form">
<div class="bl2">
<div class="br2">
<div class="tl2">
<div class="tr2">
<img src="r.gif" style="margin-left:100px" /></p>
<div class="contactform" id="c_form_2">
<form action="?page_id=65" method="post">
<div class="contactleft"><label for="wpcf_your_name">Your Name: </label></div>
<div class="contactright">
<input type="text" name="wpcf_your_name" id="wpcf_your_name" size="30" maxlength="50" value="" /> (required)</div>
<div class="contactleft"><label for="wpcf_email">Your Email:</label></div>
<div class="contactright">
<input type="text" name="wpcf_email" id="wpcf_email" size="30" maxlength="50" value="" /> (required)</div>
<div class="contactleft"><label for="wpcf_subject">Subject:</label></div>
<div class="contactright">
<input type="text" name="wpcf_subject" id="wpcf_subject" size="30" maxlength="50" value="" /> (required)</div>
<div class="contactleft"><label for="wpcf_msg">Your Message: </label></div>
<div class="contactright"><textarea name="wpcf_msg" id="wpcf_msg" cols="30" rows="8" ></textarea></div>
<div class="contactright">
<input type="submit" name="Submit" value="Send Message" id="contactsubmit" />
<input type="hidden" name="wpcf_stage" value="process" /></div>
</p></form>
</p></div>
<div style="clear:both; height:1px;"> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Has anyone encountered this issue before? Is there an easy fix or is it a ie-hacks.css type job?
Thank you !
The following HTML works a treat in Firefox. The 'Name' is aligned with the 'Name' input field and so on.
However in IE7 and *lightning strike* IE6, it goes a bit wonky.
<html>
<head>
<style type="text/css">
/* Begin Contact Form ][ CSS */
.contactform {
position: static;
overflow: hidden;
}
.contactleft {
width: 25%;
text-align: right;
clear: both;
float: left;
display: inline;
padding: 4px;
margin: 5px 0;
font-weight: bold;
}
.contactright {
width: 70%;
text-align: left;
float: right;
display: inline;
padding: 4px;
margin: 5px 0;
}
.contacterror {
border: 2px solid #ff0000;
}
/* End Contact Form ][ CSS */
</style>
</head>
<body>
<div class="contact-form">
<div class="bl2">
<div class="br2">
<div class="tl2">
<div class="tr2">
<img src="r.gif" style="margin-left:100px" /></p>
<div class="contactform" id="c_form_2">
<form action="?page_id=65" method="post">
<div class="contactleft"><label for="wpcf_your_name">Your Name: </label></div>
<div class="contactright">
<input type="text" name="wpcf_your_name" id="wpcf_your_name" size="30" maxlength="50" value="" /> (required)</div>
<div class="contactleft"><label for="wpcf_email">Your Email:</label></div>
<div class="contactright">
<input type="text" name="wpcf_email" id="wpcf_email" size="30" maxlength="50" value="" /> (required)</div>
<div class="contactleft"><label for="wpcf_subject">Subject:</label></div>
<div class="contactright">
<input type="text" name="wpcf_subject" id="wpcf_subject" size="30" maxlength="50" value="" /> (required)</div>
<div class="contactleft"><label for="wpcf_msg">Your Message: </label></div>
<div class="contactright"><textarea name="wpcf_msg" id="wpcf_msg" cols="30" rows="8" ></textarea></div>
<div class="contactright">
<input type="submit" name="Submit" value="Send Message" id="contactsubmit" />
<input type="hidden" name="wpcf_stage" value="process" /></div>
</p></form>
</p></div>
<div style="clear:both; height:1px;"> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Has anyone encountered this issue before? Is there an easy fix or is it a ie-hacks.css type job?
Thank you !