Curvey Redraw tabs working fine on Firefox , problem with IE

Hi,

I have used curvey redraw library from google code(http://code.google.com/p/curvycorners/) & it has solved my purpose, though now as per new req i am struggling with IE. I want to have two tab rows each containing 2 tabs.

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>curvyCorners - Tab demo</title>
<style type="text/css">/*<![CDATA[*/

/* tab styles */
#tabrow {
 margin:0;
 padding-left:1ex;
 min-width:800px;
 font-size:small;
 letter-spacing:0.3pt;
 line-height:1;
 height:24px;
}

#tabrow ul {
  margin:0;
  padding:0;
  list-style:none;
  position:absolute;
  z-index:2;
}

#tabrow li {
  float:left;
  background-color:#E0DFE3;
  color:#000;
  margin-right:5px;
  padding:5px;
  -webkit-border-top-left-radius:5px;
  -webkit-border-top-right-radius:5px;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  border-top:solid #9B9B9B 1px;
  border-left:solid #9B9B9B 1px;
  border-right:solid #9B9B9B 1px;
  border-bottom-width:0;
  border-bottom-color:transparent;
  cursor:pointer;
  font-family:verdana;font-weight:bold;font-style:italic
}

#tabrow li.select {
 background-color:#ffffff;
 color:#2470c4;
 height:14px;
}

/* page styles */
#midbox {
  width:220px;
  height:305px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#midbox {
  border: solid #9b9b9b 1px;
  background-color:#ffffff;
}
#midbox p {
  margin:0;
  padding-bottom:1ex;
}
h1, #topbox h2 {
  margin:0 15pt;
  padding: 5pt 0;
}
div.subpage {
  padding:1em;
}

/*]]>*/
</style>
<script type="text/javascript" src="http://www.curvycorners.net/includes/curvycorners.js"&gt; </script>
<script type="text/javascript">//<![CDATA[
var selectedTab = 0;

function tabclick(n) {
  if (n === selectedTab) return; // nothing to do.
  var li = document.getElementById('tab' + selectedTab);
  curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style
  li = document.getElementById('page' + selectedTab);
  li.style.display = 'none';                // hide the currently selected sub-page
  li = document.getElementById('page' + n);
  li.style.display = 'block';               // show the new sub-page
  li = document.getElementById('tab' + n);  // get the new (clicked) tab
  curvyCorners.adjust(li, 'className', 'select'); // and update its style
  curvyCorners.redraw();        // Redraw all elements with className curvyRedraw
  selectedTab = n;              // store for future reference
}

var selectedTab1 = 2;
function tabclick1(n) {
  if (n === selectedTab1) return; // nothing to do.
  var li = document.getElementById('tab' + selectedTab1);
  curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style
  li = document.getElementById('page' + selectedTab1);
  li.style.display = 'none';                // hide the currently selected sub-page
  li = document.getElementById('page' + n);
  li.style.display = 'block';               // show the new sub-page
  li = document.getElementById('tab' + n);  // get the new (clicked) tab
  curvyCorners.adjust(li, 'className', 'select'); // and update its style
  curvyCorners.redraw();        // Redraw all elements with className curvyRedraw
  selectedTab1 = n;              // store for future reference
}

//]]>
</script>
</head>

<body>
<div id="tabrow">
 <ul>
  <li id="tab0" onclick="tabclick(0);" class="select curvyRedraw">Categories</li>
  <li id="tab1" onclick="tabclick(1);" class="curvyRedraw">Services</li>
  </ul>
</div>
<div id="midbox" class="curvyRedraw">

  <div id="page0" class="subpage">
   Category details
  </div>

  <div id="page1" class="subpage" style="display:none">
   Service details
  </div>
</div>
<br/><br/>
<div id="tabrow">
 <ul>
  <li id="tab2" onclick="tabclick1(2);" class="select curvyRedraw">Recent Activiites</li>
  <li id="tab3" onclick="tabclick1(3);" class="curvyRedraw">News</li>
  </ul>
</div>
<div id="midbox" class="curvyRedraw">

  <div id="page2" class="subpage">
   Activities
  </div>

  <div id="page3" class="subpage" style="display:none">
   News
  </div>
</div>

</body>
</html>

The code is fine in firefox but in IE, on the second tabrow it is throwing some exceptions Can you please help me out in this?

Thanks, Rohit.

ansaurus

tags:

views:

answers:

Curvey Redraw tabs working fine on Firefox , problem with IE

related questions