SharePoint 2010 Search Refinement Panel - Bad Border

If you have ever spent time customizing or even just using SharePoint's Search Center then i am sure you have seen this annoying little box that shows up when you have no refinements. It also shows up when you get no results back from a query like this:

So, what is this? You may ask...Well it is the border of the Refinement Panel DIV which has padding-bottom: 5px and padding-top: 7px and it looks good when there are refinement items but not so much when it is empty...

Well that's great but what can we do?
Well, if you already have a JavaScript file and a jQuery refference, then throw this in there and it will hide it when it is blank...

 function HideEmptyRefiner() {  
      if ( $('.ms-searchref-main').children().length == 0 ) {    
        $('.ms-searchref-main').hide();   
      }  
 }  
_spBodyOnLoadFunctionNames.push('HideEmptyRefiner');  

So, what if you don't want to run jQuery on your site? Well don't worry i won't leave you hanging...you can achieve the same result with plain old JavaScript but as always it is 10 times harder!

I am not going to go into the details (you can find those here on this great blog about the issue) but you have to be careful on how you look to see if there are any childNodes. You can't just do a simple parent.childNodes.length because SharePoint was so kind as to leave a nice little XML comment in this DIV:

 <!-- l version="1.0" encoding="utf-8 -->  

Further more, the childNodes length count is not always consistent cross-browser

So, by using the knowledge gained from the blog above and his example as a starting point this is what i came up with...

 var kids;  
 var realKids;  
 var parent;  
 var i = 0;  
 function hideEmptySearchDiv() {  
   realKids = 0;  
   parent = document.getElementById("SRCHREF");  
   kids = parent.childNodes.length;  
   while (i < kids) {  
     if (parent.childNodes[i].nodeType != 3 && parent.childNodes[i].nodeType != 8) {  
       realKids++;  
     }  
     i++;  
   }  
   if (realKids == 0) {  
     parent.style.display = 'none';  
   }  
 }  
 _spBodyOnLoadFunctionNames.push('hideEmptySearchDiv');  

I found that the nodeType of the comment was 8 so I excluded that, then applied the same "if none found hide the div" logic as I used in my jQuery example above.

Enjoy! I hope this helps some one.