CSS Code
.textBox {
background:#9cf url(/images/question-box.gif) left top no-repeat;
/* Width attribute needed to fix behavior in Internet Explorer */
/* width:100%; */
}
.textBox .right {
background:url(/images/question-box-right.gif) right top no-repeat;
}
.textBox .bottom {
background:url(/images/question-box-bottom.gif) left bottom no-repeat;
}
.textBox .corner {
background:url(/images/question-box-corner.gif) right bottom no-repeat;
padding:1em;
}
HTML Code
<div class="textBox"><div class="right"><div class="bottom"><div class="corner">
<p>It is easy to create a resizable box with rounded corners using Cascading Style Sheets (CSS). Four nested <div> elements are required, each having a background image respectively set to the left-top corner (including the body), right edge, bottom edge, and right-bottom corner.</p>
</div></div></div></div>
See screenshots at http://www.threeleaf.com/freelance-work/demos/round-corners/ , along with some examples of why the workaround is necessary in Internet Exploer 6 and 7. My question: Why don't they fix that? If less funded browser companies like Firefox and Opera have come up with solutions, why can't Microsoft?
No comments:
Post a Comment