SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    content shift IE6

    Hi,

    on page load and refresh i get a content shift in IE6. I was thinking some width problem but i tried debugging with borders on the usual suspects but didn't see anything sticking out.

    Anybody knows what's the culprit?

    page

    css
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    It's probably because you don;t have the height and width attributes in the image and the browser doesn't know how much space to allocate until the image is loaded and the has to adjust.

    Code:
     <img src="http://www.dzinelabs.com/sandbox/GrupoMP/../GrupoMP/Images/cavalhoprincipal.jpg" alt="foto de cavalo mec&acirc;nico com prancha e estrutura mec&acirc;nica" width="526" height="397" /

  3. #3
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jeez, IE6 doesn't stop to amaze me. I would never have figured that one out :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, seems there's more under the hood: the shift doesn't occur anymore on refresh, but on initial load it still does. Atleast at my end.

    Any clues?

    page
    Good css
    bad ie css
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

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

    It's much better than it was but I can still occasionally see the shift.

    I think you are running into this bug for which there is no cure. IE6 can't handle percentage margins until it knows the width of the elements concerned which is why you get the jog effect.

    I tried the usual fixes (and even removing the image altogether) but the effect is still there. There may be another trigger but I couldn't spot it. I always avoid percentage margins because of this bug.

    There may be a solution if you divided the page up without using margins (e.g three percentage width containers) and then used inner elements to create the spacing but that would be too much to do at this stage.

  6. #6
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was afraid it would be that bug...

    I assume changing the margins in ems also wouldn't be an option being it a fluid lay-out...
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Noo that would make it an elastic layout .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, at the moment i'm reading up at the percentage bug, Paul mentioned.

    I think i'm gonna try with feeding IE the expression shown there (if i can get it to work), otherwise feeding IE ems so in IE it will be an elastic lay-out. I can live with that.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the expression is no option i noticed. I need to have a negative value in the expression and i have no clue as how to do that lol. I suppose it's not as easy as just giving -5 because it doesn't have any effect. (eventual replies are maybe better send in private as it seems to be OT).
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I think in JS you can find the absolute value of that, wrap that in () and outside it put a -, it should be able to...I know it's posible to do negative values.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think i have it working....

    Would be so kind as to check the pages in IE6?

    Page
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I'm not seeing a shift in ie6 anymore

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Missed your post Luki, on my mothers IE6 (native) no shift.

    Edit:

    Tried so many times to convert her..even tried deleting it/hiding it
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YEAHHHHHHH lol.

    Oh no.... when adding the ie sheet to the live site it's all messed up: float drops all over the place. I can't find anything wrong/missing in the css or the page.

    page without percentage fix

    page with fix

    Jeez am i getting nuts or what????
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

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

    My maths was never very good but are those expressions correct for division?

    5&#37; would be 100/5 = 20 wouldn't it.

    e.g. 100 / 20 = 5%

    3% would be 100/3 = 33.3

    e.g. 100/33.3 = 3%

    e.g.
    Code:
    /* prevents box-expansion caused by too wide content in IE6 */
    #maincontainer {
        overflow-x: hidden; 
        margin-left: expression(this.parentNode.offsetWidth / 20 + 'px');
    }
    
    /* keeps overflowing content visible in IE6 */
    /*Also needs zoom:1 to prevent disappearing last paragraph and reappearing on resizing*/
    #maincontainer * {
        position: relative; 
        zoom:1;
    }
    
    /* prevents box-expansion caused by too wide content in IE6 */
    #rightcol {
        overflow-x: hidden; 
        margin-left: expression(this.parentNode.offsetWidth / 20 + 'px');
        margin-right: expression(this.parentNode.offsetWidth / 20 - 'px');
    }
    
    /* keeps overflowing content visible in IE6 */
    #rightcol * {
        position: relative; 
    }
    
    #sidebar {
        margin-left: expression(this.parentNode.offsetWidth / 33.3 + 'px');
    }
    Of course I think you probably should have been multiplying them by .05 and by .03

  16. #16
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my.... it seems you're correct Paul: 20 and 33.3 are the correct values:

    Page

    No more drops and as far as i can tell no shift anymore :-)

    Now, what i did wrong was just using the expressions stated in the article about the percentage bug without giving it proper thinking:

    margin-left: expression(this.parentNode.offsetWidth / 10 + 'px'); is equivalent to margin-left: 10&#37;;.

    So in my haste i said 'oh, okay, if i need to convert 5%, it's just substituting the '10' by '5'.

    But ofcourse: 10% from what? What's the width of the CB??

    Jeez, i feel so stupid

    Tnx a lot for the help and patience :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •