Grow your CSS skills. Land your dream job.

absolute positioning problem

  • # November 30, 2008 at 12:10 pm

    absolute positioning moves in IE:

    here is the code:

    Code:
    a.promo, a.promo:link, a.promo:visited
    {
    position:absolute;
    top:120px;
    right:200px;
    width:115px;
    height:25px;
    line-height:25px;
    text-align:center;
    font-family:”arial”;
    font-size:10pt;
    font-weight:bold;
    border:1px solid #b5bcd9;
    background-color:#ff0000;
    color:#ffffff;
    text-decoration:none;
    }
    a.promo:hover, a.promo:active
    {
    position:absolute;
    top:120px;
    right:200px;
    width:115px;
    height:25px;
    line-height:25px;
    text-align:center;
    font-family:”arial”;
    font-size:10pt;
    font-weight:bold;
    border:1px solid #b5bcd9;
    background-color:#ffffff;
    color:#ff0000;
    text-decoration:none;
    }

    here is a test page http://www.bearsdensom.com/test/, its the xmas vouchers thats the problem.

    they are static in FF, Chrome, Safari, & Opera, but in IE8 when hovering the button moves to the left about 20px;

    why? the code is virtually the same apart from the colours

    # November 30, 2008 at 12:44 pm

    Works fine for me on FF3 and IE7, and using IE Tester it also works on IE6 and IE8 beta 2

    # November 30, 2008 at 1:01 pm
    "MikeC" wrote:
    Works fine for me on FF3 and IE7, and using IE Tester it also works on IE6 and IE8 beta 2

    it moves only on hover in IE I got IE8, but after you have hovered it stays where it went to which is about 20 pixels more to the left.

    in IE hover then refresh, hover then refresh, you will see it happen

    I uploaded 3 image and I put a red line from the right top edge and moved it up to show you what is going on all in IE8.

    http://www.bearsdensom.com/test/before.jpg
    http://www.bearsdensom.com/test/hover.jpg
    http://www.bearsdensom.com/test/after.jpg

    forgive that the page looks as if it is sitting on another page, but that is just me pasting my screenshot.

    # November 30, 2008 at 1:36 pm

    Ok well for me the button is to the right, outside the main part of the website.

    I think you havea problem…

    Rob
    # November 30, 2008 at 1:44 pm

    Have you added a position to the div that its contained in? So the <div class="banner"> should have a position of relative, then the absolute postion would be defined by the div banner box…

    # November 30, 2008 at 2:11 pm
    "Robskiwarrior" wrote:
    Have you added a position to the div that its contained in? So the <div class="banner"> should have a position of relative, then the absolute postion would be defined by the div banner box…

    I added a position:relative to the banner CSS but does not alter anything, IE still showing it moving slightly

    # November 30, 2008 at 2:17 pm
    "MikeC" wrote:
    Ok well for me the button is to the right, outside the main part of the website.

    I think you havea problem…

    could you screenshot that for me please?

    I think I got it now:

    this is my new code and it seems ok on 1024×768 & 1280×1024

    it seems to sit perfectly, i changed my CSS to:

    Code:
    a.promo, a.promo:link, a.promo:visited
    {
    display:inline;
    position:absolute;
    padding-top:0px;
    margin-top:110px;
    margin-left:-160px;
    width:115px;
    height:25px;
    line-height:25px;
    text-align:center;
    font-family:”arial”;
    font-size:10pt;
    font-weight:bold;
    border:1px solid #b5bcd9;
    background-color:#ff0000;
    color:#ffffff;
    text-decoration:none;
    }
    a.promo:hover, a.promo:active
    {
    display:inline;
    position:absolute;
    padding-top:0px;
    margin-top:110px;
    margin-left:-160px;
    width:115px;
    height:25px;
    line-height:25px;
    text-align:center;
    font-family:”arial”;
    font-size:10pt;
    font-weight:bold;
    border:1px solid #b5bcd9;
    background-color:#ffffff;
    color:#ff0000;
    text-decoration:none;
    }
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".