|
Ocena wątku:
- 0 Głosów - 0 Średnio
- 1
- 2
- 3
- 4
- 5
|
[Problem] Dostosowanie CSS do IE8
|
| Autor |
Wiadomość |
Zbyszek
Junior Member
Liczba postów: 5
Dołączył: 29-10-2011
Reputacja: 0
|
[Problem] Dostosowanie CSS do IE8
Witam!
Właśnie staram się zakończyć pisanie kodu strony w HTML i CSS, na tą chwilę prawie wszystko jest skończone - pozostaje tylko walidacja i usunięcie niepotrzebnych znaczników itp.
Mam jednak problem z obsługą strony w IE8 i wcześniejszych Exploderach. Konkretnie dwa elementy strony div.article oraz div.aside spadają pod menu boczne div.pionowe. Słyszałem o problemach z 3px'elowym marginesem, ale i tak nie wiem jak ten problem rozwiązać w przypadku mojej strony.
Wygląd w Chromie: Klik!
W Eksploderze: Klik!
Kod został napisany w CSS3 i HTML5, więc siłą rzeczy zaokrąglenie rogów, cienie i tym podobne bajery nie będą działać, chciałbym jednak, aby ogólny układ został zachowany. Poniżej zamieszczam kod HTML i CSS:
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 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]-->
<style>
#wrapper
{
text-align: left;
margin-left: auto;
margin-right: auto;
width: 900px;
}
#footer
{
text-align: center;
margin-left: auto;
margin-right: auto;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Szkoła Podstawowa w Białotarsku</h1>
<img class="logo" src="logo.png">
<!--Menu poziome-->
<nav>
<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>
</header>
<!--Menu pionowe-->
<div class="pionowe">
<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>
</div>
<!--Tablica wpisów-->
<article>
<div class="article">
<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>
<div class="strony">
<p><a class="strony" href="index.html">1</a></p>
</div>
</article>
<aside>
<div class="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>
</div>
<div class="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>
</div> </aside>
</div>
<div id="footer">
<footer> <p class="footer">© Copyright 2011 Szkola Podstawowa w Bialotarsku
| Webdesign by Me</p> </footer>
</div>
</body>
</html>
Kod:
/* CSS Document */
body
{
margin: 0px;
background: url(bg.jpg);
}
header
{
width: 900px;
height: 180px;
margin-right:auto;
margin-left:auto;
}
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;
}
ul.pionowe li:nth-child(even)
{
background-color: #ffffff;
}
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
Jestem zdecydowanie początkującym webmasterem, ale wszelkie uwagi, co do składni kodu mile widziane. 
|
|
| 29-10-2011 18:58 |
|
Kartofelek
Super Hero
Liczba postów: 1,777
Dołączył: 10-08-2009
Reputacja: 95
|
RE: [Problem] Dostosowanie CSS do IE8
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+.
Freelancer gg:2660780
(Ten post był ostatnio modyfikowany: 29-10-2011 21:59 przez Kartofelek.)
|
|
| 29-10-2011 21:55 |
|
Zbyszek
Junior Member
Liczba postów: 5
Dołączył: 29-10-2011
Reputacja: 0
|
RE: [Problem] Dostosowanie CSS do IE8
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;}
|
|
| 30-10-2011 00:44 |
|
Kartofelek
Super Hero
Liczba postów: 1,777
Dołączył: 10-08-2009
Reputacja: 95
|
RE: [Problem] Dostosowanie CSS do IE8
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.
Freelancer gg:2660780
|
|
| 30-10-2011 15:55 |
|
|
|
[Problem] Dostosowanie CSS do IE8
