Moving Div with javascript isn't respecting overflow

[mrrolf]

Hi all!

I have some pictures on a page that I'm moving around with javascript. I'm just setting the style.top member. I don't want the image to overflow the parent container if I move it to a 'bad' position. I'm setting the overflow attribute in the style, but I'm still seeing the image go outside of the boundaries. Any idea's what I'm missing?

    var Obj = document.getElementById( "imageId1" )
    if( Obj )
    {
        var currPosValue = 0;
        var currPosStr = Obj.style.top.replace('px','');
        if( currPosStr )
        {
            var currPosValue = parseFloat( currPosStr );
        }
        currPosValue += 2;
        thumbObj.style.top = currPosValue + "px";
    }
 

    .Pane1 {
            position:absolute; 
            top: 38px;
            left: 774px;
            float:right;
            width:188px;
            height:500px;
            margin: 0px 0px 0px 0px;
            border: 1px solid;
            text-align:left; 
            background-color: white; 
            z-index:1 
            overflow:hidden;
        }
 
    .PaneImage{
            position: absolute;
            width:81px; 
            height:72px; 
            margin: 7px 7px 7px 7px;
            background-color:gray;
            text-align: center;
            overflow:hidden;
            z-index:4;
        }
 
    <div class="Pane1">
        <img class="PaneImage" src="something.jpg" id="imageId1"/>
    </div>
 
 

I've been using Firefox 2.0.0 and IE 6.0

Thanks in advance for any ideas :)

[drhowarddrfine]

It's due to your z-index putting the image in front of the div so when it overflows, the div doesn't cover it up.

Be careful because IE handles overflow incorrectly and expands elements to contain floats, which is an IE only bug.

I would rethink your positioning in your CSS. You are using text-align, absolute positioning and floats all on the same element. Some are canceling the other out. Generally I only use one of them on any element. Sometimes two.

[mrrolf]

Thanks Drhowarddrfine. I tried to change the z-index but it wasn't giving me the desired effects. Instead I added a clip attribute to the parenting object. That seems to work just fine. Although it sucks I have to hard-code the values in the rect(), it's something I can live with. Thanks for the help!

   clip: rect(auto, 188px, 500px , auto);
 

[drhowarddrfine]

I had just removed the z-index, rather than changing the values, and it fixed the problem. Perhaps you set it to a value that still caused the overlaping.