Inline elements mått anpassas till innehållet men din li har inget innehåll. Sätt din li till display:inline-block; eller display: block; float:left;
Frågan#1
Hejsan!
Jag håller på och knåpar ihop en hemsida, men har stött på lite problem. Det jag vill åstadkomma är en nedräknare, som använder sig av bilder istället för siffror. Själva funktionaliteten har jag fått till, men lyckas inte styla till det som det ska vara. Sidans kod ser ut såhär:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var austDay = new Date("October 19, 2010 11:13:00")
$('#defaultCountdown').countdown({until: austDay, layout:
'<ul><li class="image{d10} img"></li><li class="image{d1} img"></li><li class="image{h10} img"></li><li class="image{h1} img"></li><li class="image{m10} img"></li><li class="image{m1} img"></li><li class="image{s10} img"></li><li class="image{s1} img"></li></ul>'});
$('#year').text(austDay.getFullYear());
});
</script>
<style>
body{
margin:0;
padding:0;
}
.image1{
background-image: url(1.png);
}
.img{
height: 90px;
width: 60px;
}
#defaultCountdown ul{
list-style: none;
}
#defaultCountdown li{
display: inline;
}
</style>
</head>
<body>
<div id="defaultCountdown"></div>
</body>
</html>
Men med när jag har display: inline, så syns inte bilderna, utan det är helt tomt istället. Varför visas inte listelementen som de gör med en vanlig lista?