SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute positioned anchor problem in IE6

    Hi!

    I want to position an anchor in the lower right corner of a container div. It looks nice in FF2.0.0.6/Win and IE7/Win. But in IE6SP2/Win the link is not positioned correctly (it is not visible at all).

    I'm still developing locally so I can't give you an URL but here is a test which repeats the problem partially. The link is visible but has a strange offset. Please see attached images.

    Any suggestions?


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Test</title>
    
    <style type="text/css">
    body {
    position : relative;
    width : 600px;
    margin-left : auto;
    margin-right : auto;
    margin-top : 50px;
    border : 1px solid rgb(100,100,100);
    padding : 20px;
    }
    
       #msg {
    position : relative;
    border : 1px solid rgb(100,100,100);
    background : rgb(240,240,240);
    margin-top : 10px;
    margin-left : auto;
    margin-right : auto;
    padding : 5px;
       }
    
       #msg p {
    padding : 5px 20px 20px 20px;
       }
    
       #msg a {
    position : absolute;
    right : 5px;
    bottom : 5px;
       }
    </style>
    
    </head>
    
    <body>
    
    <div id="msg">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vitae eros vel libero sollicitudin accumsan. Nam ornare, pede in faucibus pulvinar, est sem ornare ante, ac fermentum magna dui non dui. Aliquam erat volutpat. In hac habitasse platea dictumst. Aliquam interdum, purus at elementum semper, odio mi ultricies augue, ac ullamcorper risus lacus at tortor.</p>
    <a href="#">Link</a>
    </div>
    
    </body>
    
    </html>
    Attached Images Attached Images

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Strange code ? is a simple display block, text align right not better
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Test</title>
    
    <style type="text/css">
    *{padding:0;margin:0;}
    
    body {
    width : 600px;
    margin-left : auto;
    margin-right : auto;
    margin-top : 50px;
    border : 1px solid rgb(100,100,100);
    padding : 20px;
    }
    
       #msg {
    border : 1px solid rgb(100,100,100);
    background : rgb(240,240,240);
    margin-top : 10px;
    margin-left : auto;
    margin-right : auto;
    padding : 5px;
       }
    
       #msg p {
    padding : 5px 20px 20px 20px;
       }
    
       #msg a {
    display:block;
    text-align:right;
       }
    </style>
    
    </head>
    
    <body>
    
    <div id="msg">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vitae eros vel libero sollicitudin accumsan. Nam ornare, pede in faucibus pulvinar, est sem ornare ante, ac fermentum magna dui non dui. Aliquam erat volutpat. In hac habitasse platea dictumst. Aliquam interdum, purus at elementum semper, odio mi ultricies augue, ac ullamcorper risus lacus at tortor.</p>
    <a href="#">Link</a>
    </div>
    
    </body>
    
    </html>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The parent element needs "haslayout" (see faq) otherwise ie6 doesn't know where its boundaries lie and will incorrectly position the absolute element

    This code will apply haslayout and the element will be correctly positioned.

    Code:
    /* mac hide \*/
    * html #msg {height:1&#37;}
    /* end hide */
    However All4nerds answer is the sensible way to do this unless you have a specific need for it to be placed at the bottom of an element that isn't only content height.

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, the block display and text-align works just fine in this case.


Bookmarks

Posting Permissions

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