Forums
View unanswered posts | View active topics It is currently Wed Jul 30, 2014 5:17 pm



Reply to topic  [ 7 posts ] 
 Misaligned background-image in IE7 
Author Message

Joined: Thu Aug 05, 2010 12:51 pm
Posts: 12
Post Misaligned background-image in IE7
I've posted an image of the issue I'm having in IE7. It looks like it is shifting the image 1px both left and top to the images. I tried using the same background declaration using -pie-background, but that just made the image disappear.

CSS
Code:
.mobileWolfBox {border:2px solid #696666; background:url(images/mobilewolf-logo.png) no-repeat 320px 65px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; behavior: url(/PIE.htc); position:relative; padding: 5px 0 5px 155px; margin-bottom:35px; top:20px; }


HTML
Code:
          <div class="mobileWolfBox">
             <div class="iPhoneImage"></div>
             <h4>Mobile Search</h4>
             <p>Text: <span>KSHOME</span> To: <span>32323</span> and shop for a home from your mobile phone!</p>
             <a href="#" class="sidebarButton">Learn More</a>
          </div><!--mobileWolfBox-->


This may be something that has been seen before, but I couldn't find any mention of it using the search.


Attachments:
css3pie-glitch.png [43.74 KiB]
Downloaded 944 times
Tue Sep 14, 2010 2:29 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Misaligned background-image in IE7
This problem has been discussed before, here: viewtopic.php?f=3&t=24

It appears there is some sort of rounding error that makes the clipping get a pixel off in some circumstances. I haven't had a chance to find the pattern yet; if anyone is willing to help that would be great. I'm guessing it's a combination of the image size and its position within the background area.


Tue Sep 14, 2010 7:53 pm
Profile

Joined: Thu Aug 05, 2010 12:51 pm
Posts: 12
Post Re: Misaligned background-image in IE7
jason wrote:
This problem has been discussed before, here: viewtopic.php?f=3&t=24

It appears there is some sort of rounding error that makes the clipping get a pixel off in some circumstances. I haven't had a chance to find the pattern yet; if anyone is willing to help that would be great. I'm guessing it's a combination of the image size and its position within the background area.


I'll have to test tomorrow, but I think my problem seems to be different. First IE8 works fine, only see it in IE7. It's not actually clipping a pixel, it's shifting the image down and tiling it at the top and left, so the pixels you see are actually the last pixels from the bottom and right sides. It seems to be similar to the issue from the first poster in the thread, but the later posters seem to have a different issue.


Tue Sep 14, 2010 8:13 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Misaligned background-image in IE7
Yeah your exact symptoms are slightly different but they seem like they're probably related to me, based on how PIE implements non-repeated background images. In VML there is no such thing as a non-repeated background, so PIE draws a repeated background and then clips it at appropriate lengths from the left, right, top, and bottom. It appears that in some cases either the clipping or the positioning of the image is off by a pixel in one direction or another.

That other post was specifically for IE8 but I've seen it happen in IE7 too; it seems to usually happen in one or the other but not both, which indicates a difference in how the 2 versions are calculating things.


Wed Sep 15, 2010 8:28 am
Profile

Joined: Tue Nov 09, 2010 5:30 am
Posts: 2
Post Re: Misaligned background-image in IE7
Did we get a solution for this?

I am also suffering a shift in pixels that only happens in IE7.

Code:

ul.collection_set {
   margin:0;
   padding:0;
   list-style:none;
   list-style-image:none;
   position:relative;
   }
ul.collection_set li {
   margin:5px 0;
   padding:3px 44px 1px 64px;
   list-style:none;
   list-style-image:none;
   background-color:#FFFFFF;
   background-position:6px 4px;
   background-repeat:no-repeat;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius:10px;
   position:relative;
   background-image:url(../images/icons/3D_43x43.png);
   /* this has to be in relation to the document */
   behavior:url(assets/css/styles-css3pie.htc);
   }

The bottom row of pixels are apearing at the top, very frustrating..

Thanks,
T


Tue Nov 09, 2010 5:33 am
Profile

Joined: Tue Nov 09, 2010 5:30 am
Posts: 2
Post Re: Misaligned background-image in IE7
Changed all the bg images to be 45x45 pixels instead of 43x43 and now they look fine.
Just added a border of ttransparent pixels basically..


Tue Nov 09, 2010 5:52 am
Profile

Joined: Thu Nov 18, 2010 5:52 am
Posts: 7
Post Re: Misaligned background-image in IE7
I too am having this issue Jason.
It only seems apparent in IE7 for me. IE6, IE8 and IE9 seem fine.


Attachments:
tttpIssue.gif [37.4 KiB]
Downloaded 319 times
Mon Feb 07, 2011 4:34 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

Users browsing this forum: Google [Bot] and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.