Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Problem z CSS3 w Internet Explorer 9
mariio81
post
Post #1





Grupa: Zarejestrowani
Postów: 46
Pomógł: 0
Dołączył: 10.03.2011

Ostrzeżenie: (0%)
-----

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:
[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>localhost - Logowanie</title>
  5.     <meta charset="UTF-8">
  6. 	<link rel="stylesheet" href=" /style/admin/css/style.css " type="text/css" />
  7. </head>
  8.    <body>
  9.       <div id="main_container">
  10.           <div class="header_login">
  11.              <div class="logo"><a href=""><img src="" alt="" title="" border="0" /></a></div>
  12.           </div>
  13.           <div class="login_form">
  14.              <h3>Admin</h3>
  15.              <a href="/admin/forgot.html" class="forgot_pass">Nie pamiętasz hasła?</a>
  16.              <form class="" action="/admin/login.html" method="post">         
  17.                  <fieldset>
  18. 	             <dl>
  19.                         <dt><label></label></dt>
  20.                         <dd> </dd>
  21.                      </dl>
  22.                      <dl>
  23.                         <dt><label for="email">Username:</label></dt>
  24.                         <dd> <input name="login" value="" type="text" /> </dd>
  25.                      </dl>
  26.                      <dl>
  27.                         <dt><label for="password">Password:</label></dt>
  28.                         <dd> <input type="password" name="password" value="" /> </dd>
  29.                      </dl>
  30.                      <dl class="submit"> <input id="submit" type="submit" name="submit" value="Zaloguj" />                    
  31.                      </dl>
  32.                 </fieldset>	        
  33.          </div>  
  34.     <div class="footer_login">
  35.     	<div class="left_footer_login"> <a href="">ADMIN</a></div>
  36.     	<div class="right_footer_login"><a href=""><img src="" alt="" title="" border="0" /></a></div>
  37.     </div>
  38. </div>		
  39. </body>
  40. </html>
[HTML] pobierz, plaintext


kod CSS:
[HTML] pobierz, plaintext 
  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.  
[HTML] pobierz, plaintext


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:
[HTML] pobierz, plaintext 
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
[HTML] pobierz, plaintext

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

Ten post edytował mariio81 24.03.2014, 10:53:41
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 16:22
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn