Forums
View unanswered posts | View active topics It is currently Sat Dec 20, 2014 2:40 am



Reply to topic  [ 14 posts ]  Go to page 1, 2  Next
 PNG goes a bit wrong with rounded corners. 
Author Message

Joined: Mon Jul 19, 2010 4:46 am
Posts: 34
Post PNG goes a bit wrong with rounded corners.
The rounded corners are working great. Thank you very much for all your hard work. (also thanks for the "known issues" page, which was a very helpful and resolved why I hadn't previously been able to get border-radius.htc working).

However, something odd is happening in one of my divs: I have a PNG graphic in a box with some text. The PNG is displayed as a background image with no-repeat. In IE8, the image appears to bleed colour into its transparent areas.

See image attached, which shows how IE8 renders the box with and without PIE.htc. This only appears to happen in IE8 (it doesn't happen in IE7, and we're not supporting IE6)

The relevant code is as follows:

Code:
<div class="error"><ul><li>xyz is not valid</li></ul></div>


Code:
div.error {
  background-color: #b2efad;
  background: url(../images/round/warning_red.png) no-repeat  5px 5px;
  border-radius:6px;
  behavior: url(/sites/all/themes/speednames/behaviours/PIE.htc);
  position:relative;
}


For the time being, I can probably solve this by switching the image to a gif, but it does seem to the HTC causing this glitch, so I felt I needed to report it.


Attachments:
File comment: Spot the difference...
square-vs-round.png [4.02 KiB]
Downloaded 1482 times
Mon Jul 19, 2010 5:19 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1448
Post Re: PNG goes a bit wrong with rounded corners.
Thanks very much for reporting this. I will attempt to find a fix.


Mon Jul 19, 2010 8:47 am
Profile

Joined: Fri Jul 16, 2010 3:35 am
Posts: 9
Post Re: PNG goes a bit wrong with rounded corners.
not sure if this is the same issue I had but I got around mine by adding a 1 pixel transparent strip to the image on the opposite end to where the bleed occured.
Maybe that will work here too


Mon Jul 19, 2010 9:30 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1448
Post Re: PNG goes a bit wrong with rounded corners.
FYI this issue should now be fixed in the latest development code. Thanks for reporting it!


Sat Jul 24, 2010 9:51 am
Profile

Joined: Mon Jul 19, 2010 4:46 am
Posts: 34
Post Re: PNG goes a bit wrong with rounded corners.
jason wrote:
FYI this issue should now be fixed in the latest development code. Thanks for reporting it!


No problem. Thanks for fixing it (and the other bugs I've reported).

Any idea when you'll be ready for the next beta release?

Cheers,


Spudley.


Tue Jul 27, 2010 3:08 am
Profile

Joined: Fri Aug 13, 2010 4:08 pm
Posts: 3
Post Re: PNG goes a bit wrong with rounded corners.
I just downloaded the latest beta (2) after finding this thread. Having the same issue with IE8, the only diferrence being I deal with an GIF file. Beta 2 solves some of the issue - there is no bleed on the right. However, I am still experiencing a one-pixel cut-off on the background image on the left. This only happens in IE8.

Thanks for a great tool!

Update: actually, there's also a 1-pixel cutoff at the bottom. I tried adding one pixel at a time to the width of the image (with transparency) and that only makes things worse.


Attachments:
File comment: The problem is exemplified here (IE8 screenshot)
PIE_background_image_issue_IE8.PNG [3.35 KiB]
Downloaded 1108 times
Fri Aug 13, 2010 4:15 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1448
Post Re: PNG goes a bit wrong with rounded corners.
Weird... do you think the difference is between PNGs and GIFs? Wouldn't be the craziest thing I've ever heard of.


Sat Aug 14, 2010 3:21 pm
Profile

Joined: Sat Aug 14, 2010 11:07 pm
Posts: 2
Post Re: PNG goes a bit wrong with rounded corners.
I have same issue with a background png inside an a tag except i get one pixel on the right side cut off and placed on the left..weird!! seems opposite to what peeps above have seen


Sat Aug 14, 2010 11:14 pm
Profile

Joined: Sat Aug 14, 2010 11:07 pm
Posts: 2
Post Re: PNG goes a bit wrong with rounded corners.
Added a blank pixel all around and it makes the problem worse.
Tried every combination of 1-2-3 pixels on single/all and combinations of os sides and error differs but never correct.
It seems as if transparency is affecting it
Tried a Gif and the same issue
EXCEPT with the gif adding a blank transparent pixel to the right which was cut off stopped it repeating the pixel on the left but still had the right pixel cut off..adding two pixels etc diddnt make any differenc.
So a single pixel cut off my right pinting arrow i can live with in this situation


Sun Aug 15, 2010 12:15 am
Profile

Joined: Fri Aug 13, 2010 4:08 pm
Posts: 3
Post Re: PNG goes a bit wrong with rounded corners.
I just did a quick test with a PNG file and I am getting the exact same result. What does make this weird is the fact that on two other GIFs the problem does not occur. See attached shots.


Attachments:
File comment: Different image, similar dimensions - no problem
PIE_background_image_issue_IE8_3.PNG [3.34 KiB]
Downloaded 1063 times
File comment: Yet another GIF image, similar dimensions - no problem
PIE_background_image_issue_IE8_2.PNG [3.62 KiB]
Downloaded 1063 times
Mon Aug 16, 2010 9:33 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 14 posts ]  Go to page 1, 2  Next

Who is online

Users browsing this forum: Exabot [Bot], Yahoo [Bot] and 5 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.