Getting an element to sit on top of a div border in IE6

[frankiehots]

I am trying to get an H2 heading to float on top of a div border. Seems to work fine in most browsers except IE6. If you look at this page in Firefox or Safari, you will see what I am trying to achieve:
http://208.109.97.203/temp/test.php

I've been doing this by using a -16px top margin for the H2. In IE6 though the H2 header will not go above the div border, no matter what top margin I set. Is there a way to make this work in IE6 or just a better way to do this?

[Paul O'B]

HI,

You need to force "layout" (see faq) on the jobtip element to stop it being dragged upwards with the h2. Then you will need position:relative on the h2 to make the negative part visible.

  .jobtip {background: #F8F6E9; border: 1px solid #B7AB5B; margin-top: 30px;}
  .jobtip h2{
color: #FFFFFF;
 background: #323D4F; 
border-top: 3px solid #A89B3B; 
text-align: center; 
width: 165px; 
font-size: 13px;   
height: 16px;
 padding: 3px 0;
 margin: -16px 0 0 25px;
position:relative;
}

  /* mac hide \*/
  * html .jobtip{height:1%}
  /* end hide */