SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE probs positioning CSS2 style

    Hi
    I'm trying to position a style to the right of my website page but am experiencing difficulties. The text I am trying to align is "view details".
    It seems to look OK in Mozilla, but in IE it's all over the place.
    Can someone please check out the css as I'm not convinced I have coded it correctly. What am I doing wrong? arrgh!

    http://www.tagdesign.co.nz/resume/index.html

    http://www.tagdesign.co.nz/css/tag.css

    thanks so much
    Last edited by Feliciaf; Sep 18, 2004 at 23:14.

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

    You are placing the details 500px from where they are because you are using position absolute. You need to set the left position to place it where you wanr or set the left position to zero and use the margin property as you have done.

    However you also need to set a stacking context for the absolutely placed element so that is stays in relation to the page content and not the viewport.

    So add position:relative to your content.
    Code:
    #content
    {
     margin:0px auto;
     text-align:left;
     padding:1.3em;
     border:1px solid #fff;
     margin-bottom: 1.6em;
     background-color:#577479;
     width:580px;
     position:relative;
    }
    Code:
    #details
    {
     position: absolute;
     display: block;
     margin: 0 0 0 500px;
     font-size: 70%;
     padding: 0px -10px;
     left:0;
    }
    This wil place the details at the right edge of the content in IE. (You will need to make sure content doesn't overwrite it).

    However your page is much bigger in mozilla so the positioning will be different. This is because you haven't taken account of the broken box model in ie. Have a look at the FAQ stocky thread which explains in detials the way to overcome this depending on the mode you are working in. You are working in quirks mode (doctype without uri) so you need to use the correct hack for quirks mode or change to standards mode and use the usual hack.

    However because you have padding in percentages and a width in pixels you will be unable to work out the correct width as you can't add then together, therefore it would be better to put the padding on an inner element instead and do away with the need for a hack at all.

    Hope that helps.

    Paul

  3. #3
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    You are placing the details 500px from where they are because you are using position absolute. You need to set the left position to place it where you wanr or set the left position to zero and use the margin property as you have done.

    However you also need to set a stacking context for the absolutely placed element so that is stays in relation to the page content and not the viewport.

    So add position:relative to your content.
    Code:
    #content
    {
     margin:0px auto;
     text-align:left;
     padding:1.3em;
     border:1px solid #fff;
     margin-bottom: 1.6em;
     background-color:#577479;
     width:580px;
     position:relative;
    }
    Code:
    #details
    {
     position: absolute;
     display: block;
     margin: 0 0 0 500px;
     font-size: 70%;
     padding: 0px -10px;
     left:0;
    }
    This wil place the details at the right edge of the content in IE. (You will need to make sure content doesn't overwrite it).

    However your page is much bigger in mozilla so the positioning will be different. This is because you haven't taken account of the broken box model in ie. Have a look at the FAQ stocky thread which explains in detials the way to overcome this depending on the mode you are working in. You are working in quirks mode (doctype without uri) so you need to use the correct hack for quirks mode or change to standards mode and use the usual hack.

    However because you have padding in percentages and a width in pixels you will be unable to work out the correct width as you can't add then together, therefore it would be better to put the padding on an inner element instead and do away with the need for a hack at all.

    Hope that helps.

    Paul
    Yes it does - very much. I'm not sure about the DOCTYPE and how I should use one properly. Where should I insert the URI into the DOCTYPE? Sorry, I know this is not CSS but thought I'd stay on the subject whilst it's fresh in memory...
    thanks

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

    Have a look here for more info on doctypes.

    http://www.ericmeyeroncss.com/bonus/render-mode.html

    Paul

  5. #5
    SitePoint Addict Feliciaf's Avatar
    Join Date
    Mar 2004
    Location
    New Zealand
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Have a look here for more info on doctypes.

    http://www.ericmeyeroncss.com/bonus/render-mode.html

    Paul
    thanks so much.


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
  •