Sharepoint WSS Rounded Corners IE6 :firstchild jQuery Fix

Dec 15, 01:23 PM

Wow. That's a mouth. I found part of my solution on Heather Solomon's amazing Sharepoint Blog, mainly the article about Rounded Corners in the Web Part Title Bar. Her solution works great, and I'm glad she used her talent to traverse the ghastly mess of nested tables. Unfortunately, does not work in IE6, and she did not, nor anyone else, provide a solution to the issue. So I did!

Here are the easy steps for cross-browser rounded corner headers in Sharepoint WSS:
  1. Download jQuery and link it to your site.
  2. Add this jQuery code to the head your page:
    3. <script type=“text/javascript”>
    $(document).ready(function() {
      $(‘tr.ms-WPHeader TD span:first-child’)
          .addClass(‘firstChild’);
      $(’.ms-WPHeader > TD ‘)
          .addClass(‘headerBg’);
    })
</script>
  3. Add this CSS to your stylesheet:
    4. .ms-WPHeader TD span.firstChild{
  background: url('cnoleft.gif') no-repeat left top;
  padding: 6px 0 3px 25px;
  height: 14px;
  position: relative;
  z-index: 20;
}
.ms-WPHeader td.headerBg{
  background: url('cnobg.gif') repeat-x;
  margin: 0;
  padding: 0;
  height: 14px;
}

… and that is all you need to do! Likely you will have to tweak the CSS for your images to look correct, but that should be a breeze.

— Katie O'Connor

,

---

Comment

  1. thank you! this works great :D

    — susie · Dec 16, 03:15 PM · #

Commenting is closed for this article.

---