IE7 label positioning issue, div width issue
I have a problem with labels inside fieldset
(contact form). It shows correctly in Firefox, Opera, IE6, but it looks ugly in IE7 See this page here . You can also find pg.css
(main ccs file) ie6.css
, ie.css
.
HTML code:
<fieldset>
<legend> , </legend>
<form action="mail.php" method="post">
<label for="name">*</label> <input type="text" name="name"><br>
<label for="tel"></label> <input type="text" name="tel"><br>
<label for="email">E-mail*</label> <input type="text" name="email"><br>
<label for="title"> </label> <input type="text" name="title"><br>
<label for="mess">*</label><textarea name="mess"></textarea><br>
<label for="submit">  </label><input type="submit" value="" name="submit" class="button"><br>
<label for="reset">  </label><input type="reset" value="" class="button">
</form>
</fieldset>
CSS code:
label {
float:left;
width:25%;
text-align:right;
margin-right:5px;
}
textarea {
width: 400px;
height:200px;
font-size: 110%;
}
input, textarea {
padding: 2px;
margin: 5px;
border:1px #7a974d solid;
background: #f1ece8;
}
The second problem is that the brown line in IE7 is not 100% of the main div width.
#text, #text1 {
border-top: 3px solid #4d320f;/*brown line*/
float: left;
margin: 0 1em 0 1em;
padding: 7px 0 0 0;
}
It seems to me that the div = text is not the same as div=container
and the top div is with the logo and menu (div = maincontent). The width div=text
depends on the largest paragraph. On my page, the div = text width is the same as the last paragraph at the bottom of the page, so the brown line is the same width:
<p class="bottom">© Copyright <a href="http://www.pg.ru/contact.htm">ยซยป</a>. , . , . 12, .7, <b>(495) 725-14-09</b></p>
width:100%
Does not help. I can't figure out what could be wrong. I am not a css expert and I need your help.
source to share