SitePoint Sponsor

User Tag List

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

    Thumbs down Background positioned OK in FF, Shifts in IE

    Hi,

    I'm a bit of a CSS newbie and have put together a layout for a friend that looks great in FF but when viewed in I.E., one of the backgrounds of the sidebars shifts dramatically to the right. I've been reading up about IE fixes but can't seem to get it to work for me.

    www [dot] dayvinturchiano [dot] com/bio.html

    In IE, you'll notice that the left shadow border (sides_04.png) runs through the middle of the page (around the B in bio) instead of lining up with the edge of the left side of the wrapper as it does in FF. Can anyone give me an idea of how to fix this? I've been pulling my hair out over it for hours.

    Thanks,

    J.R.

  2. #2
    SitePoint Enthusiast ivanfx's Avatar
    Join Date
    May 2007
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you went about it completely the wrong way.

    Why not structure it like:

    - top
    - middle:
    - left-sidebar
    - content
    - right-sidebar
    - footer

    Make it something like:

    div.left{
    width: 20px;
    float: left;
    bg-im ....
    }

    And don't forget to put a PNG transparency filter for IE6!
    Freelance CSS and PHP developer. Using CakePHP and jQuery.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi tb,

    You need to give a left positioning rule to your .thrColAbsHdr #sidebar1
    If you look in your stylesheet right below sidebar1 you will notice that sidebar2 has a right position of 22px.

    Your sidebars are positioned absolute and they must receive top and side positions.

    Add left:0; to your #sidebar1, I'll put sidebar2 in below it to show you the 22px mentioned above
    Code:
    .thrColAbsHdr #sidebar1 {
        position: absolute;
        padding-bottom:200px;
        margin-bottom:-200px;
        left:0;
        top: 165px;
        width: 40px; 
        background:url(images/sides_04.png) repeat-y; 
        padding: 15px 10px 15px 20px; 
        margin-bottom:-3000px;
        padding-bottom:3000px;
    
    }
    
    .thrColAbsHdr #sidebar2 {
    
        position: absolute;
        padding-bottom:200px;
        margin-bottom:-200px;
        top: 165px;
        right: 22px;
        width: 150px; 
        background:url(images/sides_08.png) repeat-y right; 
        padding:0; 
        margin-bottom:-3000px;
        padding-bottom:3000px;
    
    }
    Ironic thing is though that there was a complete explanation about absolute positioning towards the top of the css.

    Code:
    /* Tips for absolutely positioned sidebars with header and footer:
    1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
    2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained.
    3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
    4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header.
    */



Tags for this Thread

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
  •