SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    position: absolute a no show in IE

    I've searched these forums as well as Google and nothing came up to match when I'm looking for.

    Basically at this page: http://devel.murderflymultimedia.com/temp/ there is a white, vertical piece of text which that is an image placed just outside the content area with absolute positioning. It shows up fine in Firefox but it doesn't display at all in IE v6 W2K. (I'm not sure of performance on other browsers).

    Code:
    #vert {
    	position: absolute;
    	margin-top:209px;
    	margin-left:-32px;
    	width:30px;
    	height:291px;
    	background:url('../images/mm_vertical.gif') no-repeat;
    }
    Is the direct piece of CSS being used for the positioning. I've used code that is the exact same to the above (without the margin-top attribute) and it displays perfectly fine -- on a different site.

    Any ideas?

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

    First of all you need a stacking context in #container and then you can position in relation to that container. Secondly you haven't supplied any left or top co-ordinates so the absolute position is starting somewhere in the flow and with all those floats we can't be sure where that is.

    Thirdly IE seems to have taken a dislike to the rightside float for some unknown reason! However it doesn't matter as its not really needed to be floated anyway.

    try these styles insstead.
    Code:
    #container {
    width:590px;
    height:500px;
    margin:0 auto 0 auto;
    border: 1px solid #c0c0c0;
    position:relative;
    }
    #vert {
    position: absolute;
    width:30px;
    height:291px;
    background:url(images/mm_vertical.gif') no-repeat;
    margin-left:-32px;
    margin-top:209px;
    left:0;
    top:0;
    }
    #rightside {
    background:#FFF;
    text-align: left;
    }
    You could have just use the left and top positions instead of margin anyway.

    Hope the above helps

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW that was quick.

    Thanks! I think the part I was missing in my constant tries was the position: relative; part. I tried almost everything else I could think of and didn't think of the context box at all.

    Thanks again!


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
  •