Problem with CSS property display: inline-block

Question

In quirks mode (IE) the following code will function correctly. In standards compliant mode, this code will only show the text of the nested span, but it will not be given 100% for width. Is there a way to force the nested inline-block span to set its width to the div size, and if so is there a way to do it without changing the html code? Thanks for any help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <style>
        span {display:inline-block;}
    </style>
<head>
<body>
    <div>
        <span>
            <span style='width:100%; text-align:center;'>
                Blah
            </span>
        </span>
    </div>
</body>

Answer 1

The parent (span) don't have any width. Just set it and you resolve your problem

div span { width:100% }

Problem with CSS property display: inline-block

Question

1 answers

solution1
1 2011-09-21 17:03:58

Problem with CSS property display: inline-block

Question

1 answers

solution1 1 2011-09-21 17:03:58

solution1
1 2011-09-21 17:03:58