Почему IE неправильно обрабатывает CSS auto margin? - PullRequest
Новая
       22

Почему IE неправильно обрабатывает CSS auto margin?

0 голосов
/ 13 марта 2012

IE 7 и 9 отображают #logon справа от # wrapper.

Живая страница здесь: http://lalabs.hiv411.org/logout.php

CSS: 

#wrapper {
    position:absolute;
    width:960px;
    min-height:680px;
    background:url(../g/bg.jpg) no-repeat #6CB8D2;
    top:0;
    left: 50%;
    margin-left: -480px;
}

#logon {
    position:relative;
    background:url(../g/login_bg.png) no-repeat;    
    width:656px;
    height:484px;
    margin: 135px auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
}

#logonInner {
    text-align:center;
    padding: 66px 0 0 0;
    font-size:14px;
}

HTML просто мертв ... 

<div id="wrapper">
<div id="logon">
<div id="logonInner">
<img src="g/welcome.gif" alt="Welcome to the Louisiana Office of Public Health Survey of Laboratories and Facilities" name="welcome" width="397" height="110" id="welcome" />
<p>Please login using the username and password you were assigned.</p> 

 <form id="logonForm" method="post" action="">
     <label class="logonFormLabel"><input type="text" name="email" id="email" value="<?=$_POST['email']?>" class="required email logonFormText "/><br />
USER NAME</label>

     <label class="logonFormLabel"><input type="password" name="Password" id="Password" value="" class="required logonFormText"/><br />
PASSWORD</label>

<p style="padding:30px 0 0 0"><a href="lookup_facility.php" class="loginNav">Lookup Your Laboratory or Facility</a> <a href="request_login.php" class="loginNav">Request Login Information</a> <a href="forgot_password.php" class="loginNav">Forgot Your Password?</a></p>
<p style="padding:20px 0 0 0"><input type="submit" class="button" name="submit" id="submit" value="SUBMIT" /></p> 
</form>
</div><!--logonInner-->
</div><!--logon-->
</div><!--wrapper-->

Что не так с моим CSS?

Ответы [ 2 ]

0 голосов
/ 13 марта 2012

Я добавил text-align: center для #wrapper.

0 голосов
/ 13 марта 2012

Убедитесь, что вы clear; both после Floated Elements и убедитесь ... Если у вас когда-либо есть элемент с абсолютно позиционированием, чтобы родительский элемент имел относительную позицию. 

#parent {
   position: relative;}
#child {
   position: absolute;}

Тогда, конечно,после того, как вы объявите свои плавающие элементы, убедитесь, что вы добавили после них очистку. 

#element {
   clear: both;}

Надеюсь, это поможет!

...