SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clicking links behind transparent div in IE

    I've got a div with background-color:transparent, behind which there is another div with a list of links. These links appear in IE5+, Opera and Firebird but I cannot click on them in IE5+ (work fine as usual in Op and Moz). Visually the effect is what I want - menu appearing behind the background image but showing through the div. Here's a demo:

    http://blogs.scottishclimbs.com/mark...arent-test.htm

    Code:
    <div id="page-container">
    <div id="lower-header"><h1>heading</h1></div>
    <div id="menu"><ul>
    <li><a href="">About Tiree</a></li>
    <li><a href="">Accommodation</a></a></li>
    <li><a href="">Shop</a></li>
    <li><a href="">Contact Us</a></li>
    <li><a href="">Links</a></li>
    <li><a href="">Kiting Courses</a></li>
    </ul></div>
    </div>
    Code:
    #menu {
    position:absolute;
    top:20px;
    margin:0;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    width:50em;
    max-width:800px;
    border:1px solid green;
    text-align:right;
    }
    
    #lower-header {
    position:relative;
    z-index:2;
    background-color:transparent;
    background-image:url(../images/bottom.png);
    background-repeat:no-repeat;
    height:65px;
    margin:0;
    padding:3em 0 0 0;
    border-right:1px solid #000000;
    }
    Is there a way I can get this working in IE? Or do I need to think of something else? I'm trying not to change the XHTML if I can help it. Thanks.

  2. #2
    SitePoint Wizard Keriam's Avatar
    Join Date
    Jun 2003
    Location
    Colorado, USA
    Posts
    1,178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While I am definitely not a CSS expert what I see is this. You are using a background color as well as a background image in that div and the image is a png file. The lower-header is placed at z=2 and therefore above or over the actual menu. While image may appear transparent to the eye, that doesn't mean that the browser is not seeing something there and thus blocking access to the links.

    Along the same lines, my understanding is that IE does not play well with .png transparencies. You might try converting the .png to a .gif and see if that makes a difference, although my feeling is that the issue is with the z level. You could try lowering the z placing that image behind the links.

  3. #3
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Keriam, thanks for replying.

    #lower-header must have a higher z-index than #menu as I want the effect of the menu sliding 'under' the background image. Removing the background image altogether makes the links clickable, but changing it to a gif has no effect making me wonder why having a background image can affect it like this (the links are not over the actual image itself).

    The ul also has a z-index of 5, but that doesn't seem to help.

    Any more clues? Any other clever ways to implement this without changing the XHTML considered


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
  •