Forums
View unanswered posts | View active topics It is currently Sat Oct 25, 2014 3:28 am



Reply to topic  [ 7 posts ] 
 IE7 background image clipping 
Author Message

Joined: Fri Oct 07, 2011 1:33 am
Posts: 6
Post IE7 background image clipping
Hi there,

I'm not sure if it's related to this : http://css3pie.com/forum/viewtopic.php?f=3&t=534&p=1869&hilit=IE7+background+images#p1869
But I'm experiencing a problem with IE7 and background images.
In the screen-shot I'm joining to this message, the above content background is compound with 3 images : small dots at left top repeat-x, noisy texture repeated both x and y, and folded corner image at bottom right no-repeated.

I tryied several things on this bottom-right image, like different sizes, with or without transparent pixels on image borders etc... no luck.

Do you there have an idea on what is it ? problem with the content rounded-corner ?

Sincerely.


Attachments:
IE7-Pie-background-problem.png [110.95 KiB]
Not downloaded yet
Wed Oct 12, 2011 4:34 am
Profile

Joined: Wed Oct 12, 2011 5:20 am
Posts: 3
Post Re: IE7 background image clipping
I'm having the exact same problem, and it's related to the rounded corner function. My CSS-code:

Code:
.box {
 padding: 10px;
 border: 1px solid #FAAFAA;
 margin-bottom:15px;
 background:#FEEFEE url('/img/icons/error.png') 3% 50% no-repeat;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 behavior: url(/css/ie/PIE.htc);
}


Attached image show exactly what's going wrong. Things go wron in IE7 as well as IE8.


Attachments:
roundedcorners.jpg [25.59 KiB]
Not downloaded yet
Wed Oct 12, 2011 5:30 am
Profile

Joined: Fri Oct 07, 2011 1:33 am
Posts: 6
Post Re: IE7 background image clipping
gijsbert123 wrote:
I'm having the exact same problem, and it's related to the rounded corner function. My CSS-code:


I'm not sure about this. Commenting the border-radius line in the css file for the element supporting the multiple background don't fix the problem.

Looking at the screen-shot I joined in the first message in this thread, the bottom line and the right first line of the image are repeated top an left.
The rendered image is 1 pixel wider and 1 pixel highter than the one provided by the css.

I don't have this issue on IE8.

Sincerely

EDIT : I fixed the problem with a workaround while adding empty lines, 1px, top, right, bottom, left, in the image loaded for IE7 and IE8 by -pie-background.


Wed Oct 12, 2011 7:03 am
Profile

Joined: Wed Oct 12, 2011 5:20 am
Posts: 3
Post Re: IE7 background image clipping
Hi Brunus,

Can you give me an example of your css? Or an url with a small testpage? That would be nice :)


Wed Oct 12, 2011 9:11 am
Profile

Joined: Fri Oct 07, 2011 1:33 am
Posts: 6
Post Re: IE7 background image clipping
gijsbert123 wrote:
Hi Brunus, Can you give me an example of your css? Or an url with a small testpage? That would be nice :)


It's a local developpement, I can only show you the involved css code and join my modified images for IE7 and IE8.
#content is the element supporting 3 background images in the screen-shot joined to my first message.

Code:
#content {
    margin-top:62px;
    background:url('images/puce-black.png') top center repeat-x, url('images/folded-corner.png') bottom right no-repeat, url('images/content-noise.png') repeat;
    background-color:#FFF;
    margin-top: 60px;
    width: 926px;
    z-index: 2;
    border-radius:0 0 15px 15px;
}
html.ie7 #content,
html.ie8 #content{
    -pie-background:url('images/puce-black.png') top center repeat-x, url('images/folded-corner-IE78.png') bottom right no-repeat,  url('images/content-noise.png') repeat;
    behavior: url(PIE/PIE.htc);
}


The folded-corner.png image don't have empty lines like the folded-corner-IE78.png joined to this message.
Has you can see, we use to put ie7, ie8 or even ie9 classes on the html element.

Sincerely.


Attachments:
folded-corner-IE78.png [1.44 KiB]
Not downloaded yet
Wed Oct 12, 2011 9:34 am
Profile

Joined: Wed Oct 12, 2011 5:20 am
Posts: 3
Post Re: IE7 background image clipping
Brunus wrote:
gijsbert123 wrote:
Hi Brunus, Can you give me an example of your css? Or an url with a small testpage? That would be nice :)


It's a local developpement, I can only show you the involved css code and join my modified images for IE7 and IE8.
#content is the element supporting 3 background images in the screen-shot joined to my first message.

Code:
#content {
    margin-top:62px;
    background:url('images/puce-black.png') top center repeat-x, url('images/folded-corner.png') bottom right no-repeat, url('images/content-noise.png') repeat;
    background-color:#FFF;
    margin-top: 60px;
    width: 926px;
    z-index: 2;
    border-radius:0 0 15px 15px;
}
html.ie7 #content,
html.ie8 #content{
    -pie-background:url('images/puce-black.png') top center repeat-x, url('images/folded-corner-IE78.png') bottom right no-repeat,  url('images/content-noise.png') repeat;
    behavior: url(PIE/PIE.htc);
}


The folded-corner.png image don't have empty lines like the folded-corner-IE78.png joined to this message.
Has you can see, we use to put ie7, ie8 or even ie9 classes on the html element.

Sincerely.


Quote:
Hello Brunus, I've been puzzling for hours, but can't get it to work in IE7. Would you like to troubleshoot that issue for me? I can sent you a small testpage with all css included. Hope you're willing to help me out.


Wed Oct 12, 2011 3:48 pm
Profile

Joined: Fri Oct 07, 2011 1:33 am
Posts: 6
Post Re: IE7 background image clipping
gijsbert123 wrote:
Hello Brunus, I've been puzzling for hours, but can't get it to work in IE7. Would you like to troubleshoot that issue for me? I can sent you a small testpage with all css included. Hope you're willing to help me out.


I will have a look at your test-page, but it can take a couple of days, I'm really overloaded with work.
I will send you my adress mail in Private Message.

I suggest you try to post it also on the css3PIE forum or to ask for help on #css IRC chanel, perhaps you will have answers faster than by me.

Sincerely.


Thu Oct 13, 2011 1:38 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Google [Bot], Yahoo [Bot] and 3 guests


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:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.