SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    Louisville, KY
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background shifts over a pixel in IE.

    That 1px bug in is IE is driving me nuts! Itís supposed to be a background that floats over to the right, but IE keeps pushing it over to the left. I tried adding the padding-left: 1px; hack, but itís not working. Hereís the code:

    Itís one container within the other:

    #container{
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    z-index: 1;
    }

    #containertwo{
    height: 754px;
    background-image: url(/images/bgdesign.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    margin-left: auto;
    margin-right: auto;
    }

    Thanks!

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does your HTML look like? Is it one DI|V tag nested in another? What other attributes are present? Could you also insert your HTML markup just so i'm sure i'm giving you the right answer?

  3. #3
    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)
    Or more preferably give us a site-have you an image on the body element? Read the FAQ as that causes a 1px shift
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    Louisville, KY
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It can be viewed by going <a href="http://www.zurieshe.com">here</a>. Please excuse the messy code. I even have tables inside a few of the divs just to test out some things.

  5. #5
    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)
    HI, I don't know where exactly the shifting is though I notice you se ta bg on the body which is causing a 1px shift (probably) in IE. Read hte FAQ for more
    Code:
    body{
    	background-color: #fff;
    	background-image: url(/images/bg.png);
    	background-position:  top left;
    	background-repeat:repeat-x;
    	font-family: tahoma;
    	font-size: 12px;
    	margin: 0px;
    	padding: 0px;
    	width: 99.8%;
    }
    Also I should tell you z-index only applies to elements that have a position set-aka position:relative;

    Also on "#menu ul" your falling to IE6's double float margin bug where the horizontal margin set as the same direction as the float doubles the margin. Add display:inline; to fix it
    Code:
    #menu ul{
    	float: left;
    	list-style: none;
    	margin: 0;
               display:inline;
    	padding: 0 0 0 0;
    	padding: 0px;
    	margin-left: 30px;/*would be 60 in IE6*/
    }
    .mainbox is also in need of display:inline; to fix the bug, along with h1#logo, , .widget-btn, .home-spot, .multi-address-checkout-box .legend, and .quick-access

    I see you are setting display:table; (probably to contain floats maybe) but you should know that IE6/7 don't support that and that right there is a huge majority of the market.

    On ".base-mini .product-images" I see you set float and absolute positioning. Remove the float as in conjunction with AP it does absolutely nothing. As defined by the specs

    And one final thing. You set min-height but IE6 down don't support that so you need to set a CC (you have one, but the file was 404 for me ) and feed the height property to taht (IE6 treats that almost as min-height)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    Louisville, KY
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    HI, I don't know where exactly the shifting is though I notice you se ta bg on the body which is causing a 1px shift (probably) in IE. Read hte FAQ for more
    Code:
    body{
    	background-color: #fff;
    	background-image: url(/images/bg.png);
    	background-position:  top left;
    	background-repeat:repeat-x;
    	font-family: tahoma;
    	font-size: 12px;
    	margin: 0px;
    	padding: 0px;
    	width: 99.8%;
    }
    Also I should tell you z-index only applies to elements that have a position set-aka position:relative;

    Also on "#menu ul" your falling to IE6's double float margin bug where the horizontal margin set as the same direction as the float doubles the margin. Add display:inline; to fix it
    Code:
    #menu ul{
    	float: left;
    	list-style: none;
    	margin: 0;
               display:inline;
    	padding: 0 0 0 0;
    	padding: 0px;
    	margin-left: 30px;/*would be 60 in IE6*/
    }
    .mainbox is also in need of display:inline; to fix the bug, along with h1#logo, , .widget-btn, .home-spot, .multi-address-checkout-box .legend, and .quick-access

    I see you are setting display:table; (probably to contain floats maybe) but you should know that IE6/7 don't support that and that right there is a huge majority of the market.

    On ".base-mini .product-images" I see you set float and absolute positioning. Remove the float as in conjunction with AP it does absolutely nothing. As defined by the specs

    And one final thing. You set min-height but IE6 down don't support that so you need to set a CC (you have one, but the file was 404 for me ) and feed the height property to taht (IE6 treats that almost as min-height)
    I made sure to implement those changes. Thank you for that!

    I still wish I can figure out how to stop the background from shifting.

    I can't wait until we live in the days where Internet Explorer is either nonexistent, or at least the more buggy versions are completely wiped off the face of the planet.

  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)
    Well if you SS and post a picture of the shifting I can see where the shifting is and I can tlel you how to fix it
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    Louisville, KY
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Well if you SS and post a picture of the shifting I can see where the shifting is and I can tlel you how to fix it
    Sure!


  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    That looks a lot bigger than a 1px gap - It looks like a 60&#37; gap

    I'm guessing the problem is that you are using javascript to get png transparency in ie6 but you can't use repeated pngs with the script you are using.

    As a test remove this script and see if the image displays correctly.

    Code:
    src="http://www.zurieshe.com/js/index.php?c=auto&amp;f=,lib/ds-sleight.js,varien/iehover-fix.js" ></script>
    It doesn't look to me as though that image needs to be transparent anyway so make it a gif or jpg and see if it works.

    You need to validate the page as there are some missing tags and also tidy up the ie stylesheets as you should only have the differences in the ie file and not everything. It makes debuggung and maintenance a nightmare.

  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)
    Oops didn't post it here...I told him via pm to give IE6 gifs lolz...
    Quote Originally Posted by Paul O'B View Post
    That looks a lot bigger than a 1px gap - It looks like a 60% gap

    I'm guessing the problem is that you are using javascript to get png transparency in ie6 but you can't use repeated pngs with the script you are using.

    As a test remove this script and see if the image displays correctly.

    Code:
    src="http://www.zurieshe.com/js/index.php?c=auto&amp;f=,lib/ds-sleight.js,varien/iehover-fix.js" ></script>
    It doesn't look to me as though that image needs to be transparent anyway so make it a gif or jpg and see if it works.

    You need to validate the page as there are some missing tags and also tidy up the ie stylesheets as you should only have the differences in the ie file and not everything. It makes debuggung and maintenance a nightmare.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    Louisville, KY
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That looks a lot bigger than a 1px gap - It looks like a 60% gap

    I'm guessing the problem is that you are using javascript to get png transparency in ie6 but you can't use repeated pngs with the script you are using.

    As a test remove this script and see if the image displays correctly.

    Code:
    src="http://www.zurieshe.com/js/index.php?c=auto&amp;f=,lib/ds-sleight.js,varien/iehover-fix.js" ></script>
    It doesn't look to me as though that image needs to be transparent anyway so make it a gif or jpg and see if it works.

    I assumed that too, but even after I remove them, it still does it. Even after I changed it as a gift to test IE, it still shifts. It's so weird.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I assumed that too, but even after I remove them, it still does it. Even after I changed it as a gift to test IE, it still shifts. It's so weird.
    Did you remove the script and test as I mentioned above?

    I tested locally and it was displaying fine (I deleted the local test so can't try again right now).

  13. #13
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    Louisville, KY
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Did you remove the script and test as I mentioned above?

    I tested locally and it was displaying fine (I deleted the local test so can't try again right now).
    Yes. That's what I meant to say. Sorry for not being clear. I keep refreshing in IE and it still looks the same.

    However, I'm certain that something with this script is causing it because before the script was implemented into the layout, it was showing just fine. I'm about to go remove some other js files to see if it helps.


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
  •