Trial page not rendering with rounded corners.

Showing 1-1 of 1 messages
Trial page not rendering with rounded corners. mdw 12/6/10 1:43 PM
Hi

This is kind of a followup of my previous post.

As I understand it, curvycorners just needs the 'css' to do its work
and other than loading the 'js' nothing is required.

I tried the following page in Chrome, FF and IE.  Chrome and FF render
some curvy corners, but IE does not, with curvy corners loaded (I
checked using the debugger).

FF and Chrome do not quite agree on what to 'curve' but that is a
'small' difference compared to what happens in IE.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style type="text/css">
@CHARSET "ISO-8859-1";

/* Plaquette defitions. */
.pge .header {
        height: 100 px;
        width: 800 px;
        display: block;
        float: left;
}

.pge .header .left {
        background-color: #FFA100;
        width: 100px;
        height: 100px;
        float: left;
        /* Do rounding (native in Firefox and Safari) */
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border: 5px solid #000;
}

.pge .header div.right {
        background-color: #FFA100;
        width: 700px;
        height: 100px;
        font-size: 28pt;
        text-align: right;
        display: block;
        float: left /* Do rounding (native in Firefox and Safari) */
     -webkit-border-radius :   20px;
        -moz-border-radius: 20px;
        border: 5px solid #000;
}

.pge .subheaders {
        clear: both;
}

.pge .subheaders .desc {
        background-color: #FFA100;
        height: 80px;
        width: 170px;
        font-size: 16pt;
        float: left;
        clear: left;
        /* Do rounding (native in Firefox and Safari) */
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border: 5px solid #000;
}

.pge .subheaders .detail {
        width: 700px;
        height: 80px;
        float: left;
        display: block;
        clear: right;
        /* Do rounding (native in Firefox and Safari) */
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border: 5px solid #000;
}

.pge .details {
        clear: both;
}

</style><script type="text/JavaScript" src="curvycorners.src.js"></
script>
</head>
<body>



<div class="pge">
<div class="header">
<div class="left"></div>
<div class="right">TITLE</div>
</div>
<div class="subheaders">
<div class="sub">
<div class="desc">text1</div>
<div class="text">text2</div>
</div><!-- sub -->
<div class="sub">
<div class="desc">text3</div>
<div class="text">text4</div>
</div><!-- sub -->
</div>
</div>
</body>
</html>