 Forums
|
|
|
|
Page 1 of 1
|
[ 7 posts ] |
|
Misaligned background-image in IE7
| Author |
Message |
|
slideaway
Joined: Thu Aug 05, 2010 12:51 pm
Posts: 12
|
 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.
|
| Tue Sep 14, 2010 2:29 pm |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
|
Re: Misaligned background-image in IE7 This problem has been discussed before, here: viewtopic.php?f=3&t=24It 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 |
|
|
|
slideaway
Joined: Thu Aug 05, 2010 12:51 pm
Posts: 12
|
Re: Misaligned background-image in IE7 jason wrote: This problem has been discussed before, here: viewtopic.php?f=3&t=24It 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 |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
|
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 |
|
|
|
2byte
Joined: Tue Nov 09, 2010 5:30 am
Posts: 2
|
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 |
|
|
|
2byte
Joined: Tue Nov 09, 2010 5:30 am
Posts: 2
|
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 |
|
|
|
davebeesley1983
Joined: Thu Nov 18, 2010 5:52 am
Posts: 7
|
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.
|
| Mon Feb 07, 2011 4:34 am |
|
|
|
|
Page 1 of 1
|
[ 7 posts ] |
|
Who is online |
Users browsing this forum: Bing [Bot], 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
|
|
