Słyszałem, że IE niestandardowo wyświetla listy i myślałem, że może być to właśnie tym spowodowane, rozumiem, że problemu z rozdzielczością nie da się już tak łatwo rozwiązać, gdyż błąd może leżeć głęboko w kodzie, ale gdyby ktoś miał jeszcze jakąś radę to byłbym wdzięczny :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fraktale - Dywan Sierpińskiego</title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Rubik:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/ganeshmax/jcarousellite/master/jquery.jcarousellite.min.js"></script>
<script type="text/javascript">
$(function() {
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
auto: 3000,
speed: 1200,
visible: 2
});
});
</script>
</head>
<body>
<div id="header">
<h1>Dywan Sierpińskiego</h1>
<div id="nav">
<i class="fa fa-graduation-cap"></i>
<i>Oprócz matematyki nie istnieje żadna niezawodna wiedza z wyjątkiem tej, która wywodzi się z matematyki</i> - Robert Recorde
</div>
</div>
<div class="content">
<div id="main">
<div class="custom-container basic2">
<a href="#" class="prev">‹</a>
<div class="carousel">
<ul>
<li><img src="carpet.png" style="width:450px; height:380px;"></li>
<li><img src="triangle.png" style="width:450px; height:380px;"></li>
<li><img src="indeks.jpg" style="width:450px; height:380px;"></li>
</ul>
</div>
<a href="#" class="next">›</a>
<div class="clear"></div>
</div>
</div>
<div style="clear: both;"></div>
<a href="https://www.facebook.com/zsti.gliwice/?fref=ts" target="_blank"><div id="fb"><i class="fa fa-facebook-official"></i></div></a>
<a href="algorytm.html"><div class="tile1"><i class="fa fa-file-code-o"></i></br>Algorytm</div></a>
<a href="fraktale.html"><div class="tile2"><i class="fa fa-plus-square"></i></br>Fraktale</div></html></a>
<a href="o-projekcie.html"<div class="tile3"><i class="fa fa-cogs"></i></br>O projekcie</div></a>
<div style="clear: both;"></div>
<div id="footer">© Copyrights 2015 Paweł Woliński, Zespół Szkół Techniczno - Informatycznych, Gliwice</div>
</div>
</body>
</html>
body
{
background-color: cadetblue;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.content
{
overflow: auto;
clear: both;
margin-top: 10px;
}
#nav
{
background-color: #666666;
margin-bottom: 10px;
margin-top: 70px;
width: 75%;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 50px;
padding-top: 25px;
font-size: 20px;
color:beige;
}
#nav > i
{
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
}
#header
{
padding-top: 10px;
font-size: 25px;
color:darkslategrey;
font-family: 'Rubik', sans-serif;
text-align: center;
}
#main
{
margin-bottom: 10px;
margin-top: 10px;
width: 65%;
height: 400px;
text-align: center;
margin-left: auto;
margin-right: auto;
clear: both;
}
.tile1, .tile2, .tile3
{
float: left;
height: 150px;
margin-bottom: 10px;
margin-top: 15px;
width: 15%;
margin: 1%;
padding: 5px;
text-decoration: none;
color: black;
}
a.tile1, a.tile2, a.tile3
{
text-decoration: none;
color: black;
display: inline;
}
.tile1
{
margin-left: 22%;
background-color: #93c748;
text-align: center;
font-size: 45px;
}
.tile3
{
margin-right: 0%;
background-color: deepskyblue;
font-size: 45px;
text-align: center;
}
.tile2
{
background-color: crimson;
font-size: 45px;
text-align: center;
}
#fb
{
display: inline;
color: black;
font-size: 100px;
float: right;
margin-top: 2%;
margin-right: 270px;
}
#algorytm
{
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
padding-top: 2%;
}
#tekst
{
width: 75%;
margin-left: auto;
margin-right: auto;
}
#footer
{
margin-top: 30px;
width: 75%;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color:darkgray;
}
.carousel {
border: 1px solid #bababa;
border-radius: 10px;
background-color: ghostwhite;
float: left;
padding-left: 10px;
display: inline;
}
.carousel>ul>li>img {
width: 150px;
height: 118px;
vertical-align:middle;
margin: 10px 10px 10px 0;
border-radius: 5px;
}
a.prev, a.next {
display: block;
width: 26px;
height: 30px;
line-height: 1;
background-color: #333333;
color: ghostwhite;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 25px;
border-radius: 8px;
float: left;
}
a.prev {
margin: 50px -5px 0 0; text-indent: 7px;
}
a.next {
margin: 50px 0 0 -5px; text-indent: 10px;
}
a.prev:hover, a.next:hover {
background-color: #666666;
}
