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:
<!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href=" /style/admin/css/style.css " type="text/css" /> </head> <body> <div id="main_container"> <div class="header_login"> </div> <div class="login_form"> <form class="" action="/admin/login.html" method="post"> <fieldset> <dl> </dl> <dl> </dl> <dl> </dl> </dl> </fieldset> </div> <div class="footer_login"> </div> </div> </body> </html>
kod CSS:
body{ background:url(/style/admin/image/bg.jpg) no-repeat center top #310b28; font-family:Arial, Helvetica, sans-serif; padding:0; font-size:12px; margin:0 auto; color: #0e4354; } .header_login{ width:600px; margin:auto; } .logo{ float:left; padding:35px 0 0 0; } .login_form{ width:600px; height:250px; background:url(/style/admin/image/login_bg.png) no-repeat center top; margin:20px 0 0 145px; float:left; padding:0px 0 0 0px; } fieldset { border:none; clear:both;} label {font-size:16px; font-weight:bold; color:#666; } label a{font-size:16px; font-weight:bold; color:#666;} dl {clear:both; width:600px; margin: 0 0 0 0;} dl.submit {clear:both; width:500px; text-align:center; padding:0 0 0 90px;} dt {float:left; text-align:right; width:170px; line-height:34px; padding:0 10px 0 0; margin: 6px 0 0 0; } dd {float:left; width:400px; height: 30px; margin:0 0 18px 0;} a.forgot_pass{ float:right; color:#256c89; text-decoration:none; background:url(/style/admin/image/help.png) no-repeat left; padding:0 0 0 18px; display:block; margin:15px 20px 0 0; } h3{ font-size:16px; color:#256c89; font-weight:normal; padding:15px 0 5px 20px; margin:0px; float:left; clear:both; } input{ width: 260px; margin-top: 4px; padding: 10px 5px 10px 15px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } input:focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; } input#submit{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif; font-size: 18px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); transition: all 0.2s linear 0s; width: 100px; } input#submit:hover{ background: rgb(74, 179, 198); }
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:
<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ąć.