Category: CSS

Success! We have a good-looking rounded corner that works for both Firefox & IE (version 7 at least.) In digging for techniques, I found this nice index of possible rounded corner techniques at the CSS-Discuss mailing list site. If you are not already aware, CSS-Discuss is the premier mailing list if you are interested in leading-edge CSS information.

As the list is arranged in order from best to least browser support,  I decided to look through the ones at the top. One site name caught my eye… Roger Johansson’s  456 Berea St! I’ve found a lot of great resources there in the past, so that was my first, and last, stop. While the link on the CSS-Discuss page goes to an older version of the technique, it has been updated in the post, Transparent custom corners and borders, version 2. You may need to go back to the original post, and the one on customizing the graphics to help create your own. Thank you again, Roger!

This technique using JavaScript to adjust the DOM content of the document you want to add the borders to, thus not requiring heavy additional mark-up to the original document. I tried another technique earlier, that required adding additional <div>’s at the top & bottom where I wanted to the add the borders. It worked, but it wasn’t pretty! For this one, I simply have to reference the JavaScript file which is stored externally, add an additional CSS class to the <div> I want to have borders on, and add the CSS. Done! Well, almost. You do need to create the graphic used for the border. I think I spent more time on that than I did anything else! I’m not a graphic designer, so I don’t usually do ‘fancy stuff’ with graphics. So, it took me a couple tries to get what I wanted. I also am using the border technique a little differently than Roger shows.

In Roger’s examples, he is using a light background, so using the drop-shadow boder with transparency works nicely. However, in my case, the background is dark, so the drop-shadow style doesn’t work well, so I switched to an ‘internal shadow’, with a hard external border. This was important, as I had to add the background color to each corner of the graphic, otherwise the light background color would extend outside the box, squaring it off again. If it was a light color internal & external, this would not have been necessary. Here’s the two graphics I used:

The Box

[image no longer available.]

The borders:

[image no longer available.]

After adjusting the CSS for the height and width of the corners of the box, and the width of the left & right sides of the borders, it worked like a charm. In case you are not familiar with it, this uses the ‘sliding doors’ technique–as described by Douglas Bowman at A List Apart (another good site to watch!)–to use only two graphics to get all the pieces you need for the corners, as well as the sides of the box. Here’s the result:

[image no longer available.]

And here it is in IE:

[image no longer available.]

You can only tell them apart by the tabs now. As you may guess, that’s the next place this technique will be applied!

After reading Eric Meyer’s post, Reworked Reset, and it’s predecessor, Reset Styles, and his follow-up explanation of some of his choices, Reset Reasoning, I thought I may have a clue as to my troubles with the new template design. I should have known all this, but having been rusty in doing original design work, I had forgotten this basic practice. Learn it now! It will save your sanity someday.

However, my problem remains with the IE weirdness. The reset CSS made a few things more consistent, but the strange desire for IE to want to position itself differently is still unexplained. The post overlaps the tabs, and the sidebar seems to be intermittent.

I think I just found a clue! In looking at IE, I realized it’s default page looked strange… the graphics were all jaggy, like they had been enlarged improperly. I thought about it a minute, and decided to check my screen resolution settings. While the screen is normally at 1600×1200 (it’s a 20″ flat panel), the dpi resolution was set at 125% or 120dpi for larger fonts! I’m suspecting that the jaggy images was being caused by this. I’ve reset it, but it needs a system restart to enable, so I’m going to pause here and do that so I can report my findings… hang on!

Oh, well. Restart didn’t help… the fonts were already more normal sized before the restart, but the graphic problem was fixed at least. My overlap problem remains:

[image no longer available.]

Must be something else in IE that is effecting it. This will be one of those battles I don’t want to fight, but can’t ignore. It’s just too obvious, and my target audience is expecting perfection. Or at least nothing as obviously wrong as this. I can live without the rounded corners, but not this. It is a functionality issue also, as it is difficult to get to the tab links. We’ll dig into this first thing in the morning with a fresh cup of coffee in hand!

After a few hours sleep, I remembered that CSS3 was supposed to support rounded borders! That’s the way this should be done! Amazing what sleep can do for your memory. I found an example of the technique at 24 Ways by Andy Budd, in his post: Rounded Corner Boxes the CSS3 Way. The official documentation from the W3C for CSS3 Backgrounds and Borders Module is also available.

I found several sites with demos of the CSS3 technique, but they seem a little old. Of course that may be because the W3C seems to take it’s sweet time with some proposals: Cascading Style Sheets Current Work. If you follow the link for the CSS Backgrounds and Borders module you will find it was stated in September 2001!

CSS3.Info seems to be the current resource on the status of CSS3 if you would like more information. I’m going to experiment with it tonight in my new template design, and you will see how it goes!