[SOLVED] Round corners problem

[Andy17]

Hi guys,

 

I am trying to make my containers have round corners because it just looks better in most cases. I do, however, have one small problem; I can not make half of my corners transparent so they match with my background! Click the link below to see what I mean.

 

http://dizzit.net/test/ (Right-click + View source code or similar)

 

"Why don't you just color half of it gray?", you might wonder. Well, the site I want to use it on has a gradient background so I need it to be transparent (each corner consists of a small image). I know that you can do it without images, but this oldschool method works nonetheless. I can change the gif images (the current format) to png without altering them and it remains the same. But when I make half of the png images transparent, they are not displayed at all - then it's just an orange square.

 

So, I need to make my transparent png images show at the correct positions instead of my gif images (since these won't match with my background).

 

I hope someone can help me out.

 

Thank you in advance!

 

PS - Yes, I am new to CSS. If you know of a better way to do it and you want to share it, please post a link or the working code. Otherwise I'll try to fix my oldschool code.

[Hybride]

GIF files also can use transparency. What program are you using to make these transparent images?

 

Some browsers also don't render PNG files properly either, completely or partially.

[Axeia]

With some browsers being IE6 or even older IE versions.

 

And properly with any image stored as full color and using alpha transparency. Make sure you got the entire name right if the host you're testing it on is unixed based as linking to for example right.png with the image name being right.PNG will give you problems.

[SuperBlue]

Hallo Andy, i had the same idea with one of my websites, some 1-2 year'(s) back, the problem was not with the transparency however, since that's the easy part. Any editor, like Paint.NET can remove the background, this is done by simply creating a new layer, and deleting the background layer. Then remember to save as either gif/png or png32, depending on your design goal.

 

Using images is not old-school, maybe the techniques used to create the borders are, but that's another matter, images still got many uses. Of Cause it would be more enjoyable to use vector graphics, or like, using the border properties of CSS3 when they are supported. But images will continue to have their use anyway, because the before mentioned has its limits.

 

You should not worry about IE6. If you have a help section, like most larger websites, then simply tell your users how they upgrade their browser, or shift to another one.

 

 

Anyway, i made my own BorderTechnique for Round Corners, the good part about my Technique, is that the box is scratch able, and fits well into percentage based layouts. And as such it eliminates the problem where you would be forced to have a fixed width box.

 

The bad part, as some will put it, is that it doesn't support IE6. I'm sure that its possible however, if you are willing to waste your time. There is also another problem with my example, the corners was of different widths, which cursed a pixel overlap, this is easy to avoid if you make each corner of equal width however.

 

You are also welcome to use the border-images in the example. Be sure to use CSS-Sprites when working with images as borders. I managed to cut down the size considerably, and even had the added benefit that i could save as png32.

[TheFilmGod]

GIF files also can use transparency. What program are you using to make these transparent images?

 

Some browsers also don't render PNG files properly either, completely or partially.

 

IE6 doesn't support png transparency. I gave up ie6 two years ago. I encourage you do the same.

[Hybride]

GIF files also can use transparency. What program are you using to make these transparent images?

 

Some browsers also don't render PNG files properly either, completely or partially.

 

IE6 doesn't support png transparency. I gave up ie6 two years ago. I encourage you do the same.

Unfortunately, many businesses have not given up IE6, so as a designer, am forced to use it (along with the other browsers) or risk losing business because of it.

[haku]

I agree. I still have over 30% of users on our sites using IE6 (it's really popular here). Ignoring them would be negligent of their needs. Your users get to decide what browser they are going to use, not you. Until a the number of them using a browser you don't want to support decreases to a point that you can safely ignore them, it's essential to support them. Doing anything less would be placing your own needs over that of the users, which is death to any company dealing with customers.

[SuperBlue]

You got it wrong, IE6 do support png transparency. Its the alpha channel that it doesn't support.

GIF files also can use transparency. What program are you using to make these transparent images?

 

Some browsers also don't render PNG files properly either, completely or partially.

 

IE6 doesn't support png transparency. I gave up ie6 two years ago. I encourage you do the same.

You got it wrong, IE6 do support png transparency. Its the alpha channel that it doesn't support.

 

Aside from that, i agree completely on ditching support for IE6. As well as other older browsers for that matter.

[Andy17]

Sorry for the late reply, I have been very busy lately.

 

GIF files also can use transparency. What program are you using to make these transparent images?

 

Please tell me how. I am using Adobe Photoshop.

 

Some browsers also don't render PNG files properly either, completely or partially.

 

Old versions of IE don't, but the browsers I used for testing do (recent versions of IE and FF). I am also discretely ignoring IE6 since it's just a pain sometimes.

 

Make sure you got the entire name right if the host you're testing it on is unixed based as linking to for example right.png with the image name being right.PNG will give you problems.

 

My host is unixed based (it is painful, believe me) and I made sure they were correct. Thank you for the reminder!

 

Thanks for the suggestions, BlueRoden, but I simply find it easier if I could make my PNG files display (I am not designing for some huge business). I did use Photoshop for my PNG files as I have done for years (and the PNG files themselves were fine, they just didn't display in my CSS menu).

 

Any suggestions for a fix?

[SuperBlue]

I haven't used photoshop for a long time, and I'm increasingly converting all my old psp files, to pdn versions, since Paint.NET is free, and dose everything i need.

 

But i do remember that Photoshop allows you to save as PNG8, as well as PNG24. Which are both just short for 8bit images, and 24bit images. I'm not sure if you can save PNG24 with just Index transparency, it sure would be very useful if you could. I however think you are forced to save them with the alpha transparency, aka variable transparency. Likewise, you can't save PNG8s or Gifs with Alpha.

 

 

In Photoshop you will need to Save your image, through File >> Save for Web Then chose the relevant format, gif, or png8, and remember to check the Transparency check box. Just acknowledge the limits of Index Transparency, as in that of gif's and PNG8's. These images can contain a maximum of 256 colors, so that's another reason you might not want to use them.

 

Further more, there is a bug with saving images with the same background, as that of your site/element. Depending on the browser used, the background in the image, may render in a slightly different color then that on the website, even though they have the same hex values. This is a bug in the browser, which can be avoided by using transparent images instead. Just before anyone suggest saving with the same background.

 

I would also highly recommend everyone, to compress their Images with PNGGauntlet, unless they use jpeg's, which are already highly compressed. Note. png's are generally smaller then gifs, even when saved as png24. So that's another advantage right there, since it enables you to use 24bit images, with smaller file-sizes.

 

There are also ways to get png24 to render in IE6, such as using the solution found on http://koivi.com/ie-png-transparency/ Note. I'm not associated with the mentioned site, and do not provide support for those solutions, i actually recommend against using them, as newer versions of IE doesn't have problems with alpha transparency. In other words, i recommend that you tell your users to keep their browser updated to avoid such bugs. BUT i also recommend that you use the correct formats, for instance, you shouldn't use alpha, if you only need index transparency, unless theres some benefit file-size wise

[Andy17]

Saving the png images the way you said did not fix the problem; the corner is not round, the browser just completely leaves out the corner picture. Thanks for your reply anyways.

 

Bump.

[Andy17]

I found a new technique that worked with some modifications. Thank you for the replies.