...

View Full Version : IE Position Absolute Compatibility Issues



cookpau01
10-27-2010, 03:59 PM
I have a GIF image on my website, in Firefox it is located exactly how I want it:

http://i56.tinypic.com/2s1n3me.jpg

But in IE, 6, 7 and 8 it is positioned differently:

http://i53.tinypic.com/a4vds1.jpg

The CSS behind this image is as follows:


#animation {
position : absolute;
width : 459px;
height : 282px;
background : url(../images/animranke.gif);
}

and the HTML is:


<table><td height = "283"></td></table>
<div id="animation"></div>
<div id="head_menu"><div id="head_bot">

Any one got any tricks to help with this compatibility issue, I have had a lot of compatibility issues which I have been able to solve this is the only one left. I would prefer a CSS hack rather than having to create new CSS templates for each browser type using IF statements.

Thanks,

abduraooft
10-27-2010, 04:11 PM
Can we have a link to your page?

PS: I'd save it a single transparent png and apply it as the background of the main container or body.

cookpau01
10-27-2010, 04:21 PM
Yes the website is: s344499840.websitehome.co.uk

SB65
10-27-2010, 04:34 PM
You need to set the start point for the absolute position.

Apply position:relative to this div:


<div style="width:945px;">

and then add the following to #animation:


#animation {
background:url("../images/animranke.gif") repeat scroll 0 0 transparent;
height:282px;
position:absolute;
width:459px;
left:0;
top:287px;
}

cookpau01
10-27-2010, 05:51 PM
[QUOTE=SB65;1008276]You need to set the start point for the absolute position.

Apply position:relative to this div:


<div style="width:945px;">

I do not quite understand this bit? Is this in the HTML section?

Thanks

SB65
10-27-2010, 06:31 PM
Yes, it is.

cookpau01
10-27-2010, 09:22 PM
That code almost did the job, below is a screen shot of the images current position.

http://i56.tinypic.com/kbxceg.jpg

I am assuming I would need to add a margin element?

teedoff
10-27-2010, 09:45 PM
Play with the left:0px; attribute. It's set to display at 0px from the left.

cookpau01
10-28-2010, 06:34 PM
Play with the left:0px; attribute. It's set to display at 0px from the left.

I have fiddled with the left px and this does not change the position at all.

cookpau01
10-28-2010, 06:57 PM
The left position does not change it in Firefox but does in internet explorer. So it is now in the correct position for internet explorer by to the left as the image above for Firefox.

teedoff
10-28-2010, 07:05 PM
You have just a few errors in your code that may be causing the problem in IE.
One I saw in particular is that you specify a height for a table column, but dont tell what the height is measured in. 283 what? pixels or ems?

Fix those and see if IE behaves.

If that doesnt work, then we can go from there, but either way it needs to be corrected.

SB65
10-28-2010, 07:05 PM
Can yoou update your live site so we can have a look at what you've got now?

cookpau01
10-28-2010, 07:29 PM
This is the code now, the top is for Firefox which is currently not working, the bottom is for IE and thanks to member here now works perfectly.

http://i56.tinypic.com/kbxceg.jpg



#animation {
position : absolute;
width : 459px;
height : 282px;
background : url(../images/animranke.gif);
}
html>body #animation {
position : absolute;
width : 459px;
height : 282px;
background : url(../images/animranke.gif) left top no-repeat;
left:140px;
top:287px;
}

SB65
10-28-2010, 07:52 PM
Did you set position:relative on the div?

cookpau01
10-29-2010, 06:29 PM
Did you set position:relative on the div?

Is that is in the HTML code then no there is no relative position set

teedoff
10-29-2010, 06:35 PM
Setting positions for divs would be in the CSS code...the stylesheet, not the html code.

cookpau01
10-29-2010, 06:45 PM
The div code is:


<div style="width:945px;">
<div id="animation"></div>

The CSS code is:


#animation {
position : absolute;
width : 459px;
height : 282px;
background : url(../images/animranke.gif);
}
html>body #animation {
position : absolute;
width : 459px;
height : 282px;
background : url(../images/animranke.gif) left top no-repeat;
left:140px;
top:287px;
}

It is the top animation CSS that needs to be modified. I have tried putting the position relative in the div and this does not work, it places in the image into the center of the page

SB65
10-29-2010, 06:54 PM
If you apply position:relative with your css like that it will be in the middle. You need:


<div style="width:945px;position:relative">


with this css:


#animation {
background:url("../images/animranke.gif") repeat scroll 0 0 transparent;
height:282px;
position:absolute;
width:459px;
left:0;
top:287px;
}

That should work in both IE and FF. Setting position:relative on that div then tells #animation to position itself relative to that div - so it should be aligned to the left of the div with left:0 and 287px down from the top.

Without setting position on that div, #animation is positioned relative to the viewport - so your left positioning for IE will only be correct at 1280 by 800 - it's wrong at 1024 by 768 or any other resolution.

cookpau01
10-30-2010, 10:40 PM
So I used that code, and for both IE and Firefox the image is in the center??

I now know why people hate IE lol.

Tony M
10-31-2010, 04:32 AM
It all can be replaced by tables (not div) but also some people do not recommend tables :thumbsup:

SB65
10-31-2010, 09:00 AM
So I used that code, and for both IE and Firefox the image is in the center??

I now know why people hate IE lol.

Can you update your live page so we can see what's happening?

If the image was in the centre for both browsers, are you sure you have set left:0 on #absolute?

cookpau01
11-03-2010, 01:46 PM
Can you update your live page so we can see what's happening?

If the image was in the centre for both browsers, are you sure you have set left:0 on #absolute?

I am unable to update the live site at the moment. But yes for both browsers the image is in the center. I have triple checked the code and yes left is set to 0

SB65
11-03-2010, 03:10 PM
I cannot recreate your current issue. If I take your code and make the changes I suggested then all is well in FF and IE7/8. See here (http://simonbattersby.com/test/test_abspos.htm).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum