Absolute Position Image Showing Different In IE

HTML & CSS
1

Hi,

An image (The girl on our front page) on our website 1TM.com is showing up an inch higher then on any other browser. (FireFox, Ophra, Chrome, Safari works)

How do we fix this to work with Internet Explorer like the other browsers do?

Thank you!

2

Instead of top:228px you could maybe try bottom:18px;

3

Thanks for the reply but that is way off it does not work.

4

I just checked in IE, and the placement seems fine to me. If you are talking about a legacy version of IE (lte 7), make sure to specify that.

5

It looks to be in exactly the same position for me in Firefox and in IE6, 7 and 8.

Unless you’ve fixed it by now of course :slight_smile:

6

Oh really we are using IE 8.0 and its showing up like this: http://www.1tm.com/sitepoint.jpg

Thanks!

7

Yes and the image is in the exact same position in all browsers. It’s the rest of the page that is out and nothing to do with that image :). You can see that it’s the element with the white background that is different.

Unfortunately, as mentioned before this is not easy to fix because of the missing tags, quirksmode doctype and other multiple errors. You will notice also that the text is out because in quirks mode the sizes are different in IE (especially as you are using the size attribute anyway which is not consistent). Basically you are using IE as though it is IE5.

The only fix I can offer is a hack to move the image down in IE to match IE’s display.


<img src="http://www.1tm.com/live_person.png" style="position:absolute; right:17px; [B]top:228px;_top:248px;[/B] z-index: 50;" width="333" height="254" alt="Check Out Our Features!">

I know we’ve said this a number of times now but you really do need to sort this page out now and bring it into this century.:slight_smile:

8

Make sure the wrapping div doesn’t have position: relative, or the absolute position will be relative to the wrapper.

9

If you do that then you won’t be able to place the element in relation to the centered page. :slight_smile:

You have to have a stacking content otherwise the viewport is the point of reference which won’t allow the absolute element to keep track and stay in position.

The issue isn’t really with the image anyway because it’s in exactly the right position as expected - it’s the rest of the page that is out :slight_smile:

10

The following will place an image 300px to the right of the center of the window, which will be in relation to the centered page.


.element {
    position: absolute:
    margin-left: 50%;
    left: 300px;
}
11

I’m not trying to be awkward but that won’t really work either. It will place the left edge of the image at 50% from the left of the windows width and then offset it by another 300px.

It may stay pace with the centered layout for a while but only while the window is wider than the width of the layout. Once the window is smaller than the layout the image will be mispositioned and continue sliding off the side.

It’s too awkward and fragile a construct to use for a real layout (and won’t work in IE6 unless the absolute element is removed from the wrapper and is on its own).