views:

84

answers:

0

Here is my page markup:

<div class="grayBox clearfix">
                <div class="mainFormInnerColumn">
                    <label>Sort By:</label>
                    <asp:DropDownList ID="ddl_TestResultsSortBy" runat="server" ClientIDMode="Static">
                        <asp:ListItem>Date Newest</asp:ListItem>
                        <asp:ListItem>Date Oldest</asp:ListItem>
                    </asp:DropDownList> 
                    <label>Filter By:</label>
                    <asp:DropDownList ID="ddl_TestResultsFilterBy" runat="server" ClientIDMode="Static">
                        <asp:ListItem>All</asp:ListItem>
                        <asp:ListItem>What Other Filters?</asp:ListItem>
                    </asp:DropDownList>
                </div>
                <div class="mainFormInnerColumn">
                    <label>Description:</label>
                    <asp:TextBox ID="txbx_TestResultsDescription" runat="server" ClientIDMode="Static" CssClass="inputWithImage" />
                    <label>Date Range:</label>
                    <asp:TextBox ID="txbx_dateStart" runat="server" ClientIDMode="Static" CssClass="range" />
                    to
                    <asp:TextBox ID="txbx_dateEnd" runat="server" ClientIDMode="Static" CssClass="range" />
                </div>
                <br /><br /><br /><br /><br /><br /><br />
                <div class="clearBoth">
                    <asp:Button ID="but_TestResultsSearch" runat="server" ClientIDMode="Static" Text="Search" ValidationGroup="boxSearch" />&nbsp;
                    <input type="button" id="but_clear" value="Clear" />
                </div>
            </div>

I am using the new Curvy Corner CSS decoration in order to achieve the curved corners, like this:

.grayBox {
    background-color: Gray;
    width: 96.5%;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-left: 5px;
    border-color: Black;
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

The exact error that I am getting is (only in IE8 & IE8 Compatability Mode): "Invalid Argument" and that is thrown within curvyCorners.js at this point:

B.style.backgroundPosition="-"+(this.boxWidth-(E-J)+this.borderWidth)+"px -"+((this.boxHeight+D+G)

It DOES successfully round the corners of all browsers - including IE8 and IE8 in Compatability Mode. However, it throws that JavaScript error, and it's sloppy to leave that in, as it will throw for some users (okay, maybe just developers), but I'd like to get it to go away.

I did some research already, and two things that were suggested are not working:

  1. I turned this on in my jQuery, but to no avail: var curvyCornersVerbose = false;
  2. I tried altering my width on .grayBox above to a pixel width rather than a percentage, and that did not work.

Any ideas? Any help would be greatly appreciated!