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.

[james739]

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.

What is the reason for using absolute instead of relative positioning?

[gjh42]

In my case, in addition to the greater simplicity of positioning numerous elements relative to one point (top left of screen) without having a size change in one affecting location of a lower one, I wanted the arrangement to be flexible so the images would spread out gradually as the window widens. The page is possible to view correctly on an 800x600 monitor, and comfortably spaced out on a 1200px monitor.