tags:

views:

202

answers:

2

Hi, 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 10x10 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!

+3  A: 

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

Guffa
Adding the xhtml1-strict.dtd DTD fixed my problem. Thanks. As far as not putting divs inside spans, what would be the recommended way to position a box at the top right of an inline span?
Emmett
Use a span tag in the markup, and display:block in the css to make it a block element.
Guffa
A: 

you can also see this post if you have trouble with positionning in IE7 in the future

zaladane