January 07, 2004
Standards and browsers - neverending discussion
Today at Mezzoblue.com, i saw a new discussion about the question of web-standards, and wether to ultimately stick to them or rather use the possibilities you are given by existing browsers and their pros and cons?
A consensus definitely is to keep the goal and audience of your work in mind when you design. But that apart, use any hack and trick you know to tweak the last out of your creation? Some people sure will do that, but no majority. Why?
You are definitely on the safe side if you indeed stick to the standards. At least to a good degree, as it is very probable, that future browsers and versions will also implement these standards and interpret your HTML and CSS the way it is intended. Chances are simply bigger that your design will live long(er) and prosper.
Sure, the odd hack is needed if things get tricky, but if we keep those scarce we save ourselves trouble, maybe later on. It usually is not so hard to find a way to make things look well on the major browsers.
So there you go!
Before i forget, happy new year everyone, and lets hope it brings many of them good things that we are wishing for and make our work easier and successful.
November 16, 2003
Rectangular boxes get boring ... so we try to spice them up
Using the basic possibilities of a CSS-based design, a layout often ends up using a lot of rectangular boxes. This is by far the most straight-forward approach, as all it takes is setting the background of your div to a nice color and maybe use a border as an additional touch. Now this looks good in a lot of situations and is still a very good choice if you are after this certain plain and serious look of your website.
But not always do we want this, so we start looking for ways of customizing the look of the structural elements on the page. Very popular and sought after are rounded corners for example. If you are somewhat fluent with CSS elements, you know that there is an implementation for rounded corners coming up in CSS3 (“border-radius” property). But alas, this most recent version of the CSS specification is still the future and we are happy to have CSS2 coming along with the latest generation of web browsers.
So, for now the webdesigner has to fall back to the use of graphics that are placed in the corners of the box to achieve the effect of a rounded corner. For the actual implementation, there are more than just a handful of ways to do the placement of the corner-graphics. The problem is, you have four corners (= four graphics) but only one of these you can place as the background of your div. And you will really want to have the images in the CSS and not the HTML. So how do we go about the remaining 3 corners?
Well, as mentioned earlier there are different approaches. One would be to use nested div’s in the HTML. These div’s inside the div you want to style with rounded corners only have the purpose of holding the graphics needed to do so. This is pretty straight-forward and works well across different browsers. A good write up and explanation of this method can be found in the article Rounded corners in CSS by Adam Kalsey. However, this technique is cluttering your HTML with semantically unnecessary div’s.
It is also possible to assign the background images to the content of your div. Thus, the headline is assigned the upper right corner graphic for example, a link at the bottom the lower left graphic, and so on. An implementation of this idea can be seen here. However, this approach is still showing some flaws with smaller window sizes in IE, that seem to break the arrangement.
More information on this subject can be found on Eric Meyers CSS pages or in this listing
The bottom line is, you probably have to find a method that fits your special needs and make that work. There is no universial solution to the problem of styling your div’s with rounded corners. As with a lot of things in the world of CSS design, there is more than one way to achieve the effect you need.