Add div around selected text

Hi there,

I have added a new style to the style combo box which does this:

<div class="grey"></div>

The end result should be that a grey box surrounds some text. For example:

<div class="grey">
   <h2>Heading</h2>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
   </ul>
</div>

However, when I select the h2 and ul text, and then choose my grey box style from the dropdown, I get this:

<h2><div class="grey">Heading</div></h2>
<ul>
   <li><div class="grey">Item 1</div></li>
   <li><div class="grey">Item 2</div></li>
</ul>

...which is not quite what I'm after! Here's the js I added to the stylescombo default.js file:

{name:'Grey Box',element:'div',attributes:{class:'grey'}}

Is there any way to achieve what I'm after?

Thanks!