Witam,
znalazłem w internecie szablon logowania zrobiony w html5 i CSS3. uruchamiałem go w różnych przeglądarkach i w internet explorerze i wszystko się poprawnie wyswietlało. Postanowiłem zrobić taki panel wzorując się na tym gotowym. Ale po uruchomieniu mojego panelu w przegladarce internet explorer wygląda to jakby ie nie wiedział o co chodzi. Przedstawiam kod poniżej:
kod html:
  1. <!doctype html>
  2. <title>localhost - Logowanie</title>
  3. <meta charset="UTF-8">
  4. <link rel="stylesheet" href=" /style/admin/css/style.css " type="text/css" />
  5. </head>
  6. <body>
  7. <div id="main_container">
  8. <div class="header_login">
  9. <div class="logo"><a href=""><img src="" alt="" title="" border="0" /></a></div>
  10. </div>
  11. <div class="login_form">
  12. <h3>Admin</h3>
  13. <a href="/admin/forgot.html" class="forgot_pass">Nie pamiętasz hasła?</a>
  14. <form class="" action="/admin/login.html" method="post">
  15. <dl>
  16. <dt><label></label></dt>
  17. <dd> </dd>
  18. </dl>
  19. <dl>
  20. <dt><label for="email">Username:</label></dt>
  21. <dd> <input name="login" value="" type="text" /> </dd>
  22. </dl>
  23. <dl>
  24. <dt><label for="password">Password:</label></dt>
  25. <dd> <input type="password" name="password" value="" /> </dd>
  26. </dl>
  27. <dl class="submit"> <input id="submit" type="submit" name="submit" value="Zaloguj" />
  28. </dl>
  29. </div>
  30. <div class="footer_login">
  31. <div class="left_footer_login"> <a href="">ADMIN</a></div>
  32. <div class="right_footer_login"><a href=""><img src="" alt="" title="" border="0" /></a></div>
  33. </div>
  34. </div>
  35. </body>
  36. </html>


kod CSS:
  1. body{
  2. background:url(/style/admin/image/bg.jpg) no-repeat center top #310b28;
  3. font-family:Arial, Helvetica, sans-serif;
  4. padding:0;
  5. font-size:12px;
  6. margin:0 auto;
  7. color: #0e4354;
  8. }
  9.  
  10. .header_login{
  11. width:600px;
  12. margin:auto;
  13. }
  14.  
  15. .logo{
  16. float:left;
  17. padding:35px 0 0 0;
  18. }
  19.  
  20. .login_form{
  21. width:600px;
  22. height:250px;
  23. background:url(/style/admin/image/login_bg.png) no-repeat center top;
  24. margin:20px 0 0 145px;
  25. float:left;
  26. padding:0px 0 0 0px;
  27. }
  28.  
  29. fieldset { border:none; clear:both;}
  30. label {font-size:16px; font-weight:bold; color:#666; }
  31. label a{font-size:16px; font-weight:bold; color:#666;}
  32. dl {clear:both; width:600px; margin: 0 0 0 0;}
  33. dl.submit {clear:both; width:500px; text-align:center; padding:0 0 0 90px;}
  34. dt {float:left; text-align:right; width:170px; line-height:34px; padding:0 10px 0 0; margin: 6px 0 0 0; }
  35. dd {float:left; width:400px; height: 30px; margin:0 0 18px 0;}
  36.  
  37. a.forgot_pass{
  38. float:right;
  39. color:#256c89;
  40. text-decoration:none;
  41. background:url(/style/admin/image/help.png) no-repeat left;
  42. padding:0 0 0 18px;
  43. display:block;
  44. margin:15px 20px 0 0;
  45. }
  46.  
  47. h3{
  48. font-size:16px;
  49. color:#256c89;
  50. font-weight:normal;
  51. padding:15px 0 5px 20px;
  52. margin:0px;
  53. float:left;
  54. clear:both;
  55. }
  56.  
  57. input{
  58. width: 260px;
  59. margin-top: 4px;
  60. padding: 10px 5px 10px 15px;
  61. border: 1px solid rgb(178, 178, 178);
  62. -webkit-appearance: textfield;
  63. -webkit-box-sizing: content-box;
  64. -moz-box-sizing : content-box;
  65. box-sizing : content-box;
  66. -webkit-border-radius: 3px;
  67. -moz-border-radius: 3px;
  68. border-radius: 3px;
  69. -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
  70. -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
  71. box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
  72. -webkit-transition: all 0.2s linear;
  73. -moz-transition: all 0.2s linear;
  74. -o-transition: all 0.2s linear;
  75. transition: all 0.2s linear;
  76.  
  77. }
  78.  
  79. input:focus{
  80. border: 1px solid rgba(91, 90, 90, 0.7);
  81. background: rgba(238, 236, 240, 0.2);
  82. -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
  83. -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
  84. box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
  85.  
  86. }
  87.  
  88. input#submit{
  89. background: none repeat scroll 0 0 #3D9DB3;
  90. border: 1px solid #1C6C7A;
  91. border-radius: 3px;
  92. box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;
  93. color: #FFFFFF;
  94. cursor: pointer;
  95. font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
  96. font-size: 18px;
  97. margin-bottom: 10px;
  98. padding: 8px 5px;
  99. text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  100. transition: all 0.2s linear 0s;
  101. width: 100px;
  102.  
  103. }
  104.  
  105. input#submit:hover{
  106. background: rgb(74, 179, 198);
  107. }
  108.  


Dla mozilli ta strona wyglada tak:
http://screenshooter.net/5751362/fumxygu

a dla ie tak:
http://screenshooter.net/5751362/lpiqlnr

Czy wie ktoś w czym jest problem?


Witam ponownie problem udało mi się rozwiązać choć nie rozumiem czemu niedziałało. Problem był w tym że strona w przeglądarce otwierała się w trybie zgodności nie wiadomo czemu choć według tego co wyczytałem w internecie powinna się normalnie uruchamiać. Wymusiłem na przeglądarce uruchamianie w normalnym trybie poprzez dodanie:
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

co podobno wymusza na przeglądarce ignorowanie trybu zgodności.
Teraz wszystko działa temat można zamknąć.