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">&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 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">&copy; 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.

+1


source to share


1 answer


Looking at your code, the problem seems to be higher in your CSS. There is a block of code in pg / pg.css that looks like this:

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

      



If you choose float: left; everything will start to align correctly in IE7.

+3


source







All Articles