Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE Position Absolute Compatibility Issues

    I have a GIF image on my website, in Firefox it is located exactly how I want it:



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



    The CSS behind this image is as follows:

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

    Code:
    <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,

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes the website is: s344499840.websitehome.co.uk

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You need to set the start point for the absolute position.

    Apply position:relative to this div:

    Code:
    <div style="width:945px;">
    and then add the following to #animation:

    Code:
    #animation {
    background:url("../images/animranke.gif") repeat scroll 0 0 transparent;
    height:282px;
    position:absolute;
    width:459px;
    left:0;
    top:287px;
    }
    Last edited by SB65; 10-27-2010 at 04:39 PM.

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    [QUOTE=SB65;1008276]You need to set the start point for the absolute position.

    Apply position:relative to this div:

    Code:
    <div style="width:945px;">
    I do not quite understand this bit? Is this in the HTML section?

    Thanks

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, it is.

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That code almost did the job, below is a screen shot of the images current position.



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

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Play with the left:0px; attribute. It's set to display at 0px from the left.

  • #9
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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.

  • #10
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Can yoou update your live site so we can have a look at what you've got now?

  • #13
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.



    Code:
    #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;
    }

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Did you set position:relative on the div?

  • #15
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Did you set position:relative on the div?
    Is that is in the HTML code then no there is no relative position set


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •