trying to round submit button corners breaks processing

GoogleCodeExporter commented 9 years ago

What steps will reproduce the problem?
1. See code sample below
2.
3.

What is the expected output? What do you see instead?
Expected to see rounded corners for submit button. Instead submit loses 
background color. Also, rounded corners don't appear for any other elements on 
screen.

What version of the product are you using? On what operating system?
2.04, Windows 8 and IE8

Please provide any additional information below.
Please try the code sample below. It works if you remove the 'button' class 
from the submit input:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="/scripts/curvycorners.js"></script>

    <style type="text/css">

input.button{
    /*border:1px solid #373737;*/
    font-family:Tahoma, Geneva, sans-serif;
    background-color:#0CF;
    color:#25509e;
    font-weight:bold;
    border:none;
    text-transform:uppercase;
    height:21px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    cursor:pointer;
}

        a.button{
    font-family:Tahoma, Geneva, sans-serif;
    background-color:#0CF;
    color:#25509e;
    font-weight:bold;
    border:none;
    text-transform:uppercase;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    text-decoration:none;
    padding:4px 10px;
    margin:2px 5px;
    display:inline-block;
    vertical-align:middle;

    padding:0 10px;
    margin:0;
    line-height:21px;
    background-position:top;
    white-space:nowrap;
        }
    </style>
</head>

<body>

    <p><a href="#" class="button">outside form</a></p>

    <form action="#" method="post">
        <p><a href="#" class="button">inside form</a></p>
        <input type="submit" name="SwapSubmit" value="submit my form" class="button" />

    </form>

</body>
</html>

Original issue reported on code.google.com by garethco...@googlemail.com on 27 Jul 2010 at 12:46

GoogleCodeExporter commented 9 years ago

sorry - I meant windows 7

Original comment by garethco...@googlemail.com on 27 Jul 2010 at 3:04

GoogleCodeExporter commented 9 years ago

curvyCorners doesn't work on buttons. Buttons are implemented weirdly in IE - 
not as first-rate DOM citizens - and it's not feasible to get this kind of 
thing working. Better to insert a rounded DIV inside the button.

Original comment by c.1%smit...@gtempaccount.com on 24 Sep 2010 at 11:55

Changed state: Wontfix

donum / curvycorners

trying to round submit button corners breaks processing #84