SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlapping divs with links - IE6 inconsistency

    Hi

    I would appreciate any suggestions for the following problem.

    I have a rectangular div in the middle of a page, which itself contains some divs. The point is that this div will contain some text and imagery and on top of it all I will have a div that contains a transparent image which will link to another page.

    The code that goes in the main div is the following:

    <div style="position:absolute; top:206; left:248; z-index: 2;"><a href="http://www.google.com"><img src="img/trans.gif" width="529" height="271" border="0"></a></div>

    <div style="position:relative; background:url(img/main_promo_bg.gif) #4099ce; width:100%; height:100%; margin:0; height: 272px; overflow: hidden; height: 272px; overflow: hidden; z-index: 1;"></div>

    Above, I have two sets of divs, ordered with z-index. I have stripped it bare of any text/images apart from the background and the transparent gif layer that overlaps it.

    NOW the problem. The above code works in both Firefox and IE7 but not in IE6 (not sure about other browsers). In Firefox and IE7, a transparent gif layer is created within the overall rectangular div, which links to google, as expected. HOWEVER, in IE6, the transparent gif layer moves down and right from the desired position and floats outside of the main div. It seems as if the positioning I have given it does not work correctly in IE6 and the starting point of the positioning is in fact different.

    Anyone know how I can fix this so it works in IE6 as well?

    Thanks

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link to the site? It's easier for a lot of people to look at what is going on. Thanks.

    Just from what I have read, it sounds like an ie margin bug of some sort. But can't really tell without seeing example.
    Joe

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
     <div style="position:relative; background:url(img/main_promo_bg.gif) #4099ce; width:100%; height:100%; margin:0; height: 272px; overflow: hidden; height: 272px; overflow: hidden; z-index: 1;"></div>

    looking at the above, is it correct, you have a few heights declared, overflow: hidden; twice......

    If IE is dropping a div, it's generally because widths haven't been calculated correctly.

    Could be the use of mixing absolutely position and relatively positioned divs... hard to say :-)

    As mentioned, a link to the page would be good.

    Nadia

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First problem I see is no units defined for top and left on the absolutely positioned div - 206 what?, 248 what? .... and referenced to what (is there a positioned parent?).

    If you are putting this absolutely positioned div over the top of the relative one, why are you declaring it separately? - if it were defined within the other div, it will be positioned relative to it (ie top 0 and left 0 will be top left of container div).

    I question the whole point of having the absolutely positioned div and the transparent image - why not just have the link as the first item in your relatively positioned div, and set its style as an absolutely positioned block of the correct dimensions?

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Centauri, I tried putting the absolute div within the relative one as suggested and it seems to work fine. I guess its obvious in hindsight! Thanks very much for your help, and to the other posters as well.




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
  •