I am having trouble positioning a (div) element at the top right of a span. It works in FF3, but not in IE7:
<html>
<head>
<style>
body
{
font-size: 24px;
}
.tag
{
padding: 3px;
background-color: lightblue;
position: relative;
}
.x
{
position: absolute;
top: 0px;
right: 0px;
width: 10px;
height: 10px;
background-color: orange;
}
</style>
</head>
<body>
text <span class="tag">tag<div class="x"></div></span> text
</body>
</html>
In FF3, a 10×10 orange box is rendered at the top right corner of the light blue box. I am having trouble getting this to work in IE7. Thanks!
First, get a proper doctype for your page so that it’s not rendered in quirks mode.
W3C: Recommended list of DTDs
Second, make sure that the code is valid. You can not put a block element (div) inside an inline element (span).
W3C markup validation