|
Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
|
[Problem] Dostosowanie CSS do IE8
|
Liczba postów: 5
Liczba wątków: 1
Dołączył: 29-10-2011
Reputacja:
0
Liczba postów: 817
Liczba wątków: 16
Dołączył: 27-04-2011
Reputacja:
45
chyba nie dałeś całego kodu css, a IE8 nie obsługuje zaokrąglonych rogów w CSS
Liczba postów: 2,587
Liczba wątków: 2
Dołączył: 03-04-2010
Reputacja:
58
1. Przecież widać, że masz w IE za szerokie elementy.
2. Daj URL.
Dobre samopoczucie w tym tygodniu sponsoruje cytat:
Cytat:Mogę tylko tylko na prawo i lewo ale na środek nie mogę.
Liczba postów: 5
Liczba wątków: 1
Dołączył: 29-10-2011
Reputacja:
0
1. Które konkretnie?
2. Strona nie jest wrzucona na serwer.
Co do pierwszej odpowiedzi. To jest cały css do tej strony i napisałem w pierwszym poście, że zdaje sobie sprawę, że typowe elementy z css3 nie działają w każdym IE starszym od wersji 9 (a i tam nie wszystkie).
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
29-10-2011, 21:55
(Ten post był ostatnio modyfikowany: 29-10-2011, 21:59 przez Kartofelek.)
po co tak:
Kod: <!--[if (IE 7)|(IE 8)]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>
(function() {
var link = document.createElement("div");
link.rel = "stylesheet";
link.href = "/css/default.css";
document.getElementsByTagName("head")[0].appendChild(link);
})();
</script>
<![endif]-->
Nawet na stronie html5shiv pokazują inną deklarację. Poza tym nie lepiej dać linka zamiast tworzyć go js?
Poza tym to jest błędny kod html5. Article to article - pojedynczy wpis a nie grupa wpisów. Div menu pionowe to NAV, a nie div. Nie używasz header, nie dzielisz na section, no i na koniec najlepszy kwiatek:
Kod: <div id="footer">
<footer> <p class="footer">
Ogólnie kod na 2+.
Liczba postów: 5
Liczba wątków: 1
Dołączył: 29-10-2011
Reputacja:
0
Dzięki za solidną dawkę krytyki i określenie stopnia mojej beznadziejności. 
Uprościłem nieco strukturę HTML, ale pewnie nadal coś jest źle. Aside spada mi na dół, gdy zamieniam div id="strony" na section id="strony" i umieszczam pod zwykłym section.
Obsługa w IE wygląda jeszcze gorzej i w sumie nie wiem czemu obydwa if'y w head nie działają (drugi jest oryginalnie do IE9 nie wiem jak to się ma do IE8)
Kod: <!doctype html>
<html>
<head>
<meta name="description" content="Free template for PSPad" />
<meta name="keywords" content="html5,template,pspad" />
<meta name="author" content="Marshall" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="styl.css" type="text/css" />
<title>Szkola Podstawowa w Bialotarsku</title>
<!--[if IE]>
<script type="text/javascript">
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length;while(i<length){document.createElement(e[i++])}})();
</script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#wrapper
{
text-align: left;
margin-left: auto;
margin-right: auto;
width: 900px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Szkoła Podstawowa w Białotarsku</h1>
<img class="logo" src="logo.png">
</header>
<!--Menu poziome-->
<nav id="poziome">
<ul>
<li><a class="button" href="index.html" >Glówna</a></li>
<li><a class="button" href="kalendarz.html" >Kalendarz</a></li>
<li><a class="button" href="plan.html" >Plan lekcji</a></li>
<li><a class="button" href="dokumenty.html" >Dokumenty</a></li>
<li><a class="button" href="kontakt.html" >Kontakt</a></li>
</ul>
</nav>
<!--Menu pionowe-->
<nav>
<ul class="pionowe">
<li><a class="menuF" href="index.html">Glówna</a></li>
<li><a class="menu" href="oszkole.html" >O szkole</a></li>
<li><a class="menu" href="naucz.html" >Nauczyciele</a></li>
<li><a class="menu" href="rada.html" >Rada rodziców</a></li>
<li><a class="menu" href="samo.html" >Samorząd</a></li>
<li><a class="menu" href="wycieczki.html" >Wycieczki</a></li>
<li><a class="menu" href="sko.html" >SKO</a></li>
<li><a class="menu" href="archiwum.html" >Archiwum</a></li>
<li><a class="menuL" href="kontakt.html">Kontakt</a></li>
</ul>
<h2>Bierzemy udzial w programie:<h2>
<a href="pis.html"><img id="right" src="http://www.ppwow.gov.pl/images/stories/ppwow.gif" alt="Pis" /></a>
<p class="r"></p>
</nav>
<!--Tablica wpisów-->
<section>
<h3>Zdecydowanie za dużo kalafiora</h3>
<p>Sed molestie dapibus dolor. Donec a eleifend justo. Ut rutrum vulputate turpis at ultricies. Nulla facilisi. Etiam quis diam id dolor consequat porta sit amet a dolor. Morbi pellentesque, justo et vulputate ultrices, mauris urna volutpat mi, sed vestibulum erat est sed velit. Donec eget ante dui, et dapibus justo. Nunc nec elit eu nisl dignissim luctus nec sit amet mi. In condimentum vulputate vehicula. Sed quis augue velit, a interdum erat. In mauris turpis, viverra sit amet porttitor vitae, porttitor vel orci. Aenean vel augue sem, in tincidunt tortor. Vivamus nibh turpis, blandit non lobortis ac, adipiscing quis libero.
</p>
<p ><a class="wiecej" href="news1">Więcej</a></p>
<hr>
<h3>Pogięty patyk i inne bzdury</h3>
<img src="phpThumb_generated_thumbnailjpg.jpg" alt="" >
<p>Sed molestie dapibus dolor. Donec a eleifend justo. Ut rutrum vulputate turpis at ultricies. Nulla facilisi. Etiam quis diam id dolor consequat porta sit amet a dolor. Morbi pellentesque, justo et vulputate ultrices, mauris urna volutpat mi, sed vestibulum erat est sed velit. Donec eget ante dui, et dapibus justo. Nunc nec elit eu nisl dignissim luctus nec sit amet mi. In condimentum vulputate vehicula. Sed quis augue velit, a interdum erat. In mauris turpis, viverra sit amet porttitor vitae, porttitor vel orci. Aenean vel augue sem, in tincidunt tortor. Vivamus nibh turpis, blandit non lobortis ac, adipiscing quis libero.
</p>
<p ><a class="wiecej" href="news1">Więcej</a></p>
<hr>
<h3>Pogięty patyk i inne bzdury</h3>
<img src="phpThumb_generated_thumbnailjpg.jpg" alt="" >
<p>Sed molestie dapibus dolor. Donec a eleifend justo. Ut rutrum vulputate turpis at ultricies. Nulla facilisi. Etiam quis diam id dolor consequat porta sit amet a dolor. Morbi pellentesque, justo et vulputate ultrices, mauris urna volutpat mi, sed vestibulum erat est sed velit. Donec eget ante dui, et dapibus justo. Nunc nec elit eu nisl dignissim luctus nec sit amet mi. In condimentum vulputate vehicula. Sed quis augue velit, a interdum erat. In mauris turpis, viverra sit amet porttitor vitae, porttitor vel orci. Aenean vel augue sem, in tincidunt tortor. Vivamus nibh turpis, blandit non lobortis ac, adipiscing quis libero.
</p>
<p ><a class="wiecej" href="news1">Więcej</a></p>
<hr>
<h3>Pogięty patyk i inne bzdury</h3>
<img src="phpThumb_generated_thumbnailjpg.jpg" alt="">
<p>Sed molestie dapibus dolor. Donec a eleifend justo. Ut rutrum vulputate turpis at ultricies. Nulla facilisi. Etiam quis diam id dolor consequat porta sit amet a dolor. Morbi pellentesque, justo et vulputate ultrices, mauris urna volutpat mi, sed vestibulum erat est sed velit. Donec eget ante dui, et dapibus justo. Nunc nec elit eu nisl dignissim luctus nec sit amet mi. In condimentum vulputate vehicula. Sed quis augue velit, a interdum erat. In mauris turpis, viverra sit amet porttitor vitae, porttitor vel orci. Aenean vel augue sem, in tincidunt tortor. Vivamus nibh turpis, blandit non lobortis ac, adipiscing quis libero.
</p>
<p ><a class="wiecej" href="news1">Więcej</a></p>
<div id="strony">
<p><a class="strony" href="index.html">1</a></p>
</div>
</section>
<aside>
<article id="aside">
<h3>Rzut oka na pracę samorządu</h3>
<p>Samorząd szkolny ciężko pracuję, aby nasza szkola się nie zawalila! Podtrzymywanie pustaków to tylko jeden
z aspektów pracy naszej organizacji uczniowskiej. Samorząd jest organizatorem wielu akcji mi. zbieranie
gruszek na wierzbię w zimę, sadzenie palm daktylowych na polu sąsiada i wielu inych (polach). </p>
<p ><a class="wiecejas" href="news1">Więcej</a></p>
<hr>
</article>
<article id="aside">
<h3>Nasze szkolne SKO</h3>
<p>Szkolne Kolo oszczędzania zakupilo nową skarbonkę z dziurką pozwalającą na wrzucanie do srodka monet
jedno groszowych i centowych (myslimy przyszlosciowo). Jest to filar naszej akcji "Oszczędzanie w malej
skali", która jest rozpowszechniona we wszystkich szkolach na swiecie! Cieszymy się, mogąc być częscią
większej calosci skupiajacej milosnikow oszczędzania.</p>
<p ><a class="wiecejas" href="news1">Więcej</a></p>
<hr>
</article></aside>
</div>
<footer> © Copyright 2011 Szkola Podstawowa w Bialotarsku
| Webdesign by Me</footer>
</body>
</html>
Kod: /* CSS Document */
body
{
margin: 0px;
background: url(bg.jpg);
}
header
{
width: 900px;
height: 180px;
}
a.button:hover
{
text-decoration: none;
color: #e5e5e5;
display: block;
border-top: 2px #686868;
border-left: 1px #686868;
background-color: #383838;
border-left:solid 1px #000000;
}
a.button
{
text-decoration: none;
color: #ffffff;
background-color: #353535;
border-top-left-radius:10px 10px;
border-top-right-radius:10px 10px;
font-family: Tahoma;
font-weight: bold;
font-size: 13px;
display: block;
border-top: 1px #3f3f3f;
border-left: 1px #3f3f3f;
padding: 5px;
width: 80px;
float: right;
text-align: center;
border-left:solid 1px #000000;
margin-left:auto;
}
a.menu
{
width: 200px;
text-align: center;
font-family: Tahoma;
display: table-cell;
background-color: #5f9647;
font-family: Tahoma;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding: 10px;
padding-top: 0px;
border-top:solid 1px #4d8534;
border-right:solid 2px #4d8534;
}
a.menu:hover
{
background-color: #2f5c1b;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
a.menuF:hover
{
background-color: #2f5c1b;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
a.menuL:hover
{
background-color: #2f5c1b;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
a.menuF
{
width: 200px;
text-align: center;
font-family: Tahoma;
display: table-cell;
background-color: #5f9647;
font-family: Tahoma;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding: 5px;
padding-bottom: 10px;
border-top-right-radius:10px 10px;
border-top-left-radius:10px 10px;
border-right:solid 2px #4d8534;
}
a.menuL
{
width: 200px;
text-align: center;
font-family: Tahoma;
display: table-cell;
background-color: #5f9647;
font-family: Tahoma;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding: 5px;
padding-bottom: 10px;
border-bottom-right-radius:10px 10px;
border-bottom-left-radius:10px 10px;
border-top:solid 1px #4d8534;
border-right:solid 2px #4d8534;
}
ul
{
list-style-type: none;
float: right;
margin-top: 90px;
}
ul li
{
display: block;
display: table-cell;
}
ul.pionowe
{
position: relative;
left: 0px;
top: -50px;
}
ul.pionowe li
{
display: block;
display: table-cell;
float: left;
width: 200px;
margin: 0px;
padding-bottom: 0px;
}
nav, section, aside
{
display: table-cell;
vertical-align: top;
}
nav
{
width: 200px;
height: 100%;
float:left;
}
section
{
width: 500px;
float:left;
}
aside
{
height: 500px;
width: 189px;
float:right;
}
#poziome
{
position: relative;
top: -100px;
float:right;
height:25px;
}
p
{
font-family: Tahoma, Arial, Verdana;
font-size: 12px;
padding-left: 20px;
padding-right: 20px;
font-weight: normal;
text-align: justify;
}
h3
{
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
text-align: left;
}
#aside
{
width: 189px;
background-color: #cad581;
}
#aside:hover
{
background-color: #dee5af;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
hr
{
border-top-style: dotted;
border-bottom-style: none;
width: 90%;
padding-top; 108px;
}
img
{
float: left;
margin-right: 10px;
margin-left: 20px;
}
footer
{
width: 100%;
height: 150px;
background-image: url(foooter.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% 150px;
clear: both;
text-align: center;
font-family: Tahoma, Arial, Verdana;
font-size: 12px;
}
h1
{
font-family: Filetto;
font-size:50px;
border: 1px #ffffff;
padding: 0px;
margin: 0px;
color: #46522e;}
p.r
{
float: right;
margin-right: 100px;
padding-right: 0px;
}
#right
{
float: right;
margin-right: 40px;
padding-top: 0px;
}
h2
{
font-family: Filetto;
font-size: 15px;
float: right;
margin-right: 30px;
}
img.logo
{
float: left;
margin-right: 10px;
margin-left: 10px;
}
a.wiecej
{
color:#5f7e24;
position:relative;
left:80%;
font-family: Tahoma, Arial, Verdana;
font-size: 13px;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
text-align: justify;
text-decoration: none;
}
a.wiecej:hover
{
background-color: #dee5af;
background-size:40px 180px;
border-top-left-radius:5px 5px;
border-top-right-radius:5px 5px;
border-bottom-left-radius:5px 5px;
border-bottom-right-radius:5px 5px;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
a.wiecejas
{
color:#5f7e24;
position:relative;
left:60%;
font-family: Tahoma, Arial, Verdana;
font-size: 13px;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
text-align: justify;
text-decoration: none;
}
a.strony
{
color:#4d8534;
position:relative;
left:80%;
font-family: Tahoma, Arial, Verdana;
font-size: 15px;
margin-top: 40px;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
text-align: justify;
text-decoration: none;
}
a.strony:hover
{
color:#cad581;
}
#strony
{
margin-top: 40px;
width: 500px;
float:left;}
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
zrób tak:
Kod: <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Żadne js i inne warunki u ciebie nie są potrzebne.
Szczególnie ten cały kod:
Kod: <script type="text/javascript">
(function(){if(!/*@cc_on!@*/0)return;var e =
....
Dobrze że krytykę przyjmujesz z podniesioną głową. Tutaj nie ma opierdzielania. Tu jest forum ;]
2)
Kod: <meta name="description" content="Free template for PSPad" />
<meta name="keywords" content="html5,template,pspad" />
<meta name="author" content="Marshall" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
Wywal to. W sumie widzę że używasz PSPad. Znajdź w necie "html5 boilerplate". Ściągnij i będziesz miał gotowy szablon do podpinki. Kilka rzeczy wywalisz, kilka przeanalizujesz i twój kod będzie milion razy lepszy.
Liczba postów: 5
Liczba wątków: 1
Dołączył: 29-10-2011
Reputacja:
0
Dzięki za rady. HTML5 boilerplate na pewno się zainteresuję, ale na razie wolę jeszcze napisać coś sam od początku do końca - może jakiś prostszy projekt, w którym łatwiej znaleźć wszystkie błędy.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
Tu nie chodzi o napisanie czegoś od początku do końca.
Jak widać powyżej już napisałeś taki kod. I teoretycznie można go zakwalifikować jako ok. Ale w praktyce naście rzeczy jest niepotrzebnych, źle użyłeś technik itp.
We wspomnianym szablonie masz pokazane zajebiste techniki których powinieneś się nauczyć. Html5, CSS3 itp - wszystko to fajnie wygląda w teorii. W praktyce musisz nauczyć się sztuczek by dobrze ujarzmiać przeglądarki które sobie różnie kombinują. Ot - choćby taki clearfix, .ir, media query (różne rozdzielczości) i podobne, które naprawdę przyśpieszają i poprawiają jakość kodu.
Najlepiej ściągnij sobie ten szablon i go przerób na swoje potrzeby. Albo wyciągnij z niego jak najwięcej sztuczek które ci się przydadzą 
Liczba postów: 5
Liczba wątków: 1
Dołączył: 29-10-2011
Reputacja:
0
Już wczoraj go ściągnąłem i pierwsze wrażenie po obejrzeniu kodu wyglądało mniej więcej tak "Ale osso tu w ogóle chozzi?". Obawiam się, że drugie było podobne...
Oczywiście postaram się wyciągnąć z szablonu wszystkie potrzebne elementy jednocześnie próbując przetrawić książkę do CSS'a. Jeszcze kilka stron - lub jedna porządna i być może uda mi się stworzyć coś, co obsłuży każda przeglądarka (przynajmniej mam taką nadzieję). 
|
Użytkownicy przeglądający ten wątek:
|
|
|
Sponsorzy i przyjaciele
|
|
|
[Problem] Dostosowanie CSS do IE8
