Dels disabler din DTD store dele af CSS i IE, og dels er din HTML kode ikke valid. Valider
altid dine dokumenter hos
W3C. Hvis koden ikke er valid, er browsernes visning mere eller mindre tilfældig.
Et absolut positioneret element fylder ikke noget og udspiler derfor ikke det omkransende element. Derfor er det røde span ikke større.
Et span er et inline element og kan derfor ikke modtage en højde. Hvis du retter dets
display property til
inline-block, giver det mening at sætte en højde på det.
At billedet ikke flyttes helt op i toppen skyldes a-elementets
line-height - uanset, om det indeholder tekst eller ej. Sættes denne til
0, opstår der ikke luft over og under billedet.
Prøv dette i stedet for:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#container {
position : relative;
background-color: red;
padding : 0px;
margin-right : 5px;
width : 69px;
height: 54px;
display: inline-block;
vertical-align : middle;
}
a {
position : absolute;
top : 0px;
right : 0px;
vertical-align : top;
line-height: 0;
}
.img_product {
width : 69px;
height : 54px;
vertical-align : bottom;
}
.img_tool {
padding : 0px;
margin : 0px;
border : 0px;
width : 9px;
height : 9px;
}
</style>
</head>
<body>
<p>
<span id="container">
<img src="" class="img_product" alt="">
<a href="#"><img src="u4.png" class="img_tool" alt=""></a>
</span>
<span>Beskrivelse</span>
</p>
</body>
</html>
