IE7 label positioning problem, problem with the div width.

Question

I have problem with labels inside a fieldset (feedback form). It is correctly shown 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">&nbsp </label><input type="submit" value="Отправить" name="submit" class="button"><br>
        <label for="reset">&nbsp </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 the 100% of the main div's 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 div=text is not the same width as div=container and the upper div with logo and menu (div=maincontent). The width of div=text depends on the largest paragraph. On my page the width of div=text is the same as the last paragraph in the bottom of the page, so the brown line is the same width:

<p class="bottom">&copy; Copyright <a href="http://www.pg.ru/contact.htm"&gt;«ПартнерГрупп»&lt;/a&gt;.  Москва, ул. Давыдковская, д. 12, стр.7, <b>(495) 725-14-09</b></p>

The width:100% doesn't help. I can't figure out what can be wrong. I'm not a specialist in css and I need your help.

Answer 1

After looking at your code, the problem seems to occur higher up in your CSS. In pg/pg.css there's block of code that looks like the following:

#maincontent {
    float: left;
    margin: 0 0 10px 0;
}

If you take out the float:left; everything will begin to line up correctly in IE7.

Answer 2

Thank you very much! One string is the reason of two problems.