2011-07-06 3 views
0

J'ai mis un fond de marge pour les boîtes d'entrée. Dans Firefox4, l'espacement entre les boîtes d'entrée et le .link semble bien mais en utilisant IE7, l'espacement semble doubler .. Comment puis-je résoudre ce problème?Comment résoudre ce problème de marge IE7?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link type="text/css" href="css/Exam.css" rel="stylesheet" /> 
</head> 

<body> 
<!-- start wrapper --> 
<div class="wrapper"> 

    <!-- start header --> 
    <div class="header"> 
     <div class="Login"> 
      <h1>User Login</h1> 
      <form name="Login" method="#" action="#"> 
       <input type="text" value="User Name" /> 
       <input type="password" value="password" /> 
      </form> 
      <div class="links"><div>Not yet a Member?</div> <a href="" class="Register">&nbsp;Register Now</a> <a href="" class="btn_login"><span>Login</span></a></div> 
     </div> 
    </div> 
    <!-- End header --> 

    <!-- Start main --> 
    <div class="main"></div> 
    <!-- End main --> 

    <!-- start footer --> 
    <div class="footer"></div> 
    <!-- End footer --> 

</div> 
<!-- End wrapper --> 
</body> 
</html> 

Fichier CSS:

@charset "utf-8"; 
/* CSS Document */ 

/* CSS Reset */ 
ul,li,h1,h2,h3{padding:0;margin:0;} 
ul{list-style:none;} 

/* CSS for wrapper */ 
.wrapper{background:#fffde4 ;width:601px;margin:0 auto;border:#000 thin groove;color:#bb9d59;padding:17px 28px 28px 35px;font-family:Arial, Helvetica, sans-serif; } 

/* Header */ 
.header{width:601px;overflow:hidden;} 
.Login{width:390px;float:right;} 
h1{margin-bottom:7px;color:#2c787b;font-size:27px;} 

input[type="text"],input[type="password"]{width:172px;height:21px;color:#bb9d59;background-color:#f9f6d4;border:none;font-size:10px;padding-left:9px;float:left;line-height:21px;margin- bottom:14px;} 
input[type="password"]{margin-left:25px;} 
.links a,.links a:link{color:#943415;text-decoration:none;float:left} 
.links{clear:both;border:#000 thin groove;overflow:hidden;} 
.links div{float:left;} 

http://jsfiddle.net/eb2zR/

Répondre