SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Omaha
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Negative height pos = doubled DIV height in IE

    My web page has a display bug in IE 5+ on Windows. Specifically, I have a DIV within which I wish to place two images. The two images are the same height and width, and I want to layer them (the top one is a PNG with transparency, but I have already solved that problem, this is a positioning problem) exactly on top of each other.

    I have done this by positioning them relatively within the DIV. The first image is top:0;left:0 and the second is top:-150;left:0 (the images are 150 px tall).

    They layer fine, but the DIV is twice the height (as if the second image were still following the first, making he DIV 300 px tall).

    I have tried many things and am stumped. Here is the site:


    Here is the relevant CSS:

    Code:
    #bannerPhoto {
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #000000;
    	height: 150px;
            width: 750px;
    	}
    
    #bannerPic {
    	position: relative;
    	z-index: 1;
    	left: 0px;
    	top: 0px;
    	}
    
    #bannerText {
    	position: relative;
    	z-index: 2;
    	left: 0px;
    	top: -150px;
    	}
    And the HTML:

    Code:
    <div id="bannerPhoto">
    <div id="bannerPic"><img src="../images/bannerPhotos/image.jpg" height="150" width="750" /></div>
    <div id="bannerText"><img src="../images/text-cover.png" height="150" width="750" /></div>
    </div>
    Anyone?

    Thanks, Denver.

  2. #2
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Omaha
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    I have solved the problem. It turns out that the enclosing DIV needs to be positioned relative, then the two enclosed DIVs positioned absolutely.

    Dumbass error on my part, and i apologize for taking up your time.

    Curious to note, however, that all Moz flavors on both platforms, and Safari, and IE Mac, displayed the page as I expected. Only IE5+ on Windows showed the "error".

    Anyway.

    Thanks,

    Denver.


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
  •