css absolute positioning IE and firefox problem

[james739]

I am trying to use absolute positioning to place some of my images on my homepage. The image is placed where I want in firefox but not in IE 7. What is the best method to do this so that it is compatible on both browsers?

Thanks

[paulm]

Without a link to an example of the problem I doubt if anyone can help you with this.

I know IE (<=6 for sure, not sure about IE7) and FF handle absolute positioning from within table cells differently, but I am sure there are more differences.

[james739]

Without a link to an example of the problem I doubt if anyone can help you with this.

I know IE (<=6 for sure, not sure about IE7) and FF handle absolute positioning from within table cells differently, but I am sure there are more differences.

Thanks for the reply!
I had to remove it because it was not consistent. This is an example of the code I used:

#image {position:abosolute;
top:-21px;
right: 300px;
}

This is just an example. It shows up correctly in Firefox but not in IE. Is there a hack that I can use to resolve this or do you know a resolution?

Thanks!

[gjh42]

I ran into this when trying to position an element outside of its parent. Works fine in FF as it should, IE chokes (cuts off the overhang).
I believe I solved it by applying an extra 23px of padding to the parent so I could give the one element a left: -23px; position. Obviously this will only work for a parent without border or background.

[james739]

I ran into this when trying to position an element outside of its parent. Works fine in FF as it should, IE chokes (cuts off the overhang).
I believe I solved it by applying an extra 23px of padding to the parent so I could give the one element a left: -23px; position. Obviously this will only work for a parent without border or background.

Can you write an example code just for reference? i want an idea on how you did it.

ThankS!

[gjh42]

This is what I did for the main collection titles on my homepage:

#headCel {
    position: absolute;
    top: 246px;
    left: 42%;
    padding-left: 21px;
    font-size: 1.3em;
    }

h1 {
    margin-left: -21px; 
    margin-bottom: -18px;
    }

The #headxxx is the overall title block, and each of them has an h1 in it. See my site for a visual.