SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?
    Last edited by frankiehots; Sep 25, 2006 at 10:20.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
      .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 */
      
      


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •