简体   繁体   中英

IE7 label positioning problem, problem with the div width

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">«ПартнерГрупп»</a>.  Москва, ул. Давыдковская, д. 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.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM