IE8 problem in line 323 -- crashes and hides DIV content

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Add reference to jquery.curvycorners.min.js in web page
2. Call code as:

        $(document).ready(function() {
            $('.post').corner();
        });

3. Load page.  

The HTML that is being targeted looks like this:

<div id="post0" class="post xfolkentry">
  <h1><a class="taggedlink" href="/news/post/Casa-M-at-Bazaar-Bizarre-Maker-Faire-May-22-23-2010.aspx" 
linkindex="6">Casa M at Bazaar Bizarre Maker Faire, May 22-23, 2010</a></h1>
  <span class="author">by <a href="/news/author/Sharon+Murriguez.aspx" linkindex="7">Sharon Murriguez</a></span>
  <span class="pubDate">19. April 2010 02:49</span>

  <div class="text"><p style="text-align: center;"><a target="_blank" 
href="http://www.bazaarbizarre.org/sanfrancisco/shows/makerfaire/" 
linkindex="8"><img width="600" height="125" 
alt="Visit Casa Murriguez at Bazaar Bizarre" 
src="/news/image.axd?picture=2010%2f4%2fmakerfaire4_SM.jpg"></a></p>
<h1 style="text-align: center;">Come Visit Casa M @<br></h1>
<h1 style="text-align: center;">Bazaar Bizarre Maker Faire</h1>
<h2 style="text-align: center;">San Mateo, CA | May 22-23, 2010</h2>
<p><br>Casa M is super excited to be a vendor at Bazaar Bizarre Maker Faire 
Saturday May 22nd from 10am to 8pm and 
Sunday, May 23rd from 10am to 6pm at the San Mateo Fairgrounds. We hope you can 
come on by, check out the latest Casa 
M wares and say hello in person! <br><br>For more information and details 
visit: 
http://www.bazaarbizarre.org/sanfrancisco/shows/makerfaire/</p></div>
  <div class="bottom">
    <div style="visibility: visible;" class="ratingcontainer"><div class="rating"><p>Be the first to rate this 
post</p><ul class="star-rating small-star"><li class="current-rating" 
style="width: 0%;">Currently .0/5 
Stars.</li><li><a href="rate/1" class="one-star" title="Rate this 1 star out of 
5" linkindex="9">1</a></li><li><a 
href="rate/2" class="two-stars" title="Rate this 2 stars out of 5" 
linkindex="10">2</a></li><li><a href="rate/3" 
class="three-stars" title="Rate this 3 stars out of 5" 
linkindex="11">3</a></li><li><a href="rate/4" class="four-
stars" title="Rate this 4 stars out of 5" linkindex="12">4</a></li><li><a 
href="rate/5" class="five-stars" 
title="Rate this 5 stars out of 5" linkindex="13">5</a></li></ul></div></div>
    <p class="tags">Tags: <a rel="tag" href="/news/?tag=/bazaar+bizarre" linkindex="14">bazaar bizarre</a>, <a 
rel="tag" href="/news/?tag=/maker+faire" linkindex="15">maker faire</a>, <a 
rel="tag" href="/news/?tag=/craft+show" 
linkindex="16">craft show</a></p>
    <p class="categories"><a href="/news/category/Updates.aspx" linkindex="17">Updates</a> | <a 
href="/news/category/Events.aspx" linkindex="18">Events</a></p>
  </div>

  <div class="footer">    
    <div class="bookmarks">

    </div>

    <a title="Casa M at Bazaar Bizarre Maker Faire, May 22-23, 2010" 
href="http://dev.casamurriguez.com/news/post.aspx?id=b5ebc76b-b205-4878-bab3-c36
6fbed3baf" rel="bookmark" 
linkindex="19">Permalink</a> |
    <a href="/news/post/Casa-M-at-Bazaar-Bizarre-Maker-Faire-May-22-23-2010.aspx#comment" rel="nofollow" 
linkindex="20">Comments (0)</a>
  </div>
</div>

The associated CSS looks like this:

div.post, .mceContentBody {
background-color:white;
border:1px solid silver;
line-height:17px;
margin-bottom:20px;
padding:3px 10px;
}

What is the expected output? What do you see instead?

In IE8, web page throws javascript error and the targeted div disappears 
completely.  Works fine in Chrome and 
Firefox. I expect to see rounded corners ;)

What version of the product are you using? On what operating system?

Version 2.1 (Based on CC 2.1 beta) running IE8 on Windows 7.

Please provide any additional information below.

I debugged this in Visual Studio.  This is what I'm seeing -

Code is throwing error at line 323:

    this.box.style.height  = (clientHeight + this.borderWidth + this.borderWidthB) + 'px';

The clientHeight var is null, see below.

Locals from debugger:

        boxDisp null    Null
        boxWidth    715 Number
        borderWidth "1px"   String
        borderWidthB    "1px"   String
        borderWidthL    "1px"   String
        borderWidthR    "1px"   String
        borderColour    "silver"    String
        borderColourB   "silver"    String
        borderColourL   "silver"    String
        borderColourR   "silver"    String
        borderStyle "solid" String
        borderStyleB    "solid" String
        borderStyleL    "solid" String
        borderStyleR    "solid" String
        boxColour   "white" String
        backgroundImage "none"  String
        backgroundRepeat    "repeat"    String
        backgroundPosX  "0px"   String
        backgroundPosY  "0px"   String
        boxPosition "static"    String
        topPadding  "3px"   String
        bottomPadding   "3px"   String
        leftPadding "10px"  String
        rightPadding    "10px"  String
        border  undefined   Undefined
        filter  ""  String
        topMaxRadius    8   Number
        botMaxRadius    8   Number
        styleToNPx  {...}   Object
        min0Px  {...}   Object
+       e   {...}   Object
        clientHeight    undefined   Undefined
        clientWidth 715 Number
        t   undefined   Undefined
        newMainContainer    undefined   Undefined

Original issue reported on code.google.com by eric.mur...@gmail.com on 23 Apr 2010 at 2:24

[GoogleCodeExporter]

OK, I couldn't resist -- I found the problem.  

If the CSS class that is being targeted is specifying a color like:

background-color:white;

The code crashes in IE.  The fix is to specify the hex code, e.g.:

background-color: #FFF;

That seems to take care of it.  The corners look a little choppy, though.

Original comment by eric.mur...@gmail.com on 23 Apr 2010 at 3:52

[GoogleCodeExporter]

Yep; named colours are not supported.

Original comment by jolley.s...@gmail.com on 16 May 2010 at 12:34

• Changed state: WontFix