A Few CSS Tricks You May Be Looking For

Post an Article

Date: 18th Sep 2005
Author: Webmaster
Contact Author
Ranking: 8.00 (3 Votes)

CSS (cascading style sheets) has proven to be a great replacement for tables in website designing. Style sheets makes a website more accessible, fast loading, easily controllable, cleanly coded and sensible. But apart from some of the browser support issues, CSS can sometimes become tricky to achieve some effects with. New users of CSS will know the challenges faced by them when they start shifting towards CSS from tables. Below are a few tricks, which you might not have known before.

The Shorthand Methods

Font, Border, padding, margin and Background properties are probably those, which are used very often by every designer in styling their pages through CSS. Through CSS it is possible to have a string of values defined in one line for each one of these elements rather than writing multiple lines for each property-attribute values. Example is probably the best way to explain it.

Here is how you would define different properties for the font normally in a style sheet:

Now using the shorthand property you can define all those properties in one line as follows:

The only restriction here is that you must at least have the font-size and font-family specified. Other properties are optional. Also when specifying all these properties, make sure they come in the same order as given above.

Now lets move to the Border property. Again in a traditional way you would have the following lines of code for styling a border`s width, style or colour:

You can specify all the 4 properties in one line by using the shorthand method shown below:

For the above style it would become:

You can use the same method to define border-color and border-style properties.

TIP: When using the shorthand property if you have same values for the top-bottom and left-right pairs, you can even make your style more simplified by using the following method :

Most often you would have the same values for all the four dimensions of border style, color and width properties. In which case you can make your style sheet even more simplified by combining all the three styles in one. Here is how you can achieve this:

Vertically aligning in middle with CSS

Remember using tables it is very easy to vertical align content in a given cell by applying the vertical-align:middle property. In CSS there isn`t any such property available to be used for vertical aligning something in the middle. However you can still achieve this by using a trick. The trick is to use the line-height with the height, defining the same value for both. For example you want to vertically enter align the content of an element whose ID is container. You can do this by using the following style :

Box Model Hack and its alternatives

There is a rendering problem in the earlier IE browsers (version 5, 5.5 and earlier) which has been fixed by Microsoft since version 6. The problem arises when you define the padding and border properties for an element with a specified width. The issue is if the size of the border and padding should be INCLUDED into the width or ADDED to it? According to the W3C standards, an assigned width (and height) of a box refers to the content area only. The padding and borders are then added to this value to make the total box width. But the earlier IE versions used to apply the box model wrong and INCLUDE the padding and border inside the box. This problem causes all those web page elements with padding and border to occupy different width/space than it should actually occupy on a correctly rendering browser thus causing inconsistency across different browsers. A method called the box model hack was introduced by Tantek Celik to fix this problem. The original hack is explained at http://www.tantek.com/CSS/Examples/boxmodelhack.html . Here is how it works.

Suppose we have the following CSS :

Now according to the W3C standards, the total width of the Box should be 100+10+10+5+5 = 130px.

But when you use this style in IE 5 or 5.5 browsers you will see that the width of the box still remains 100px and the padding and border has been included inside, thus reducing the actual area of the content. The hack for this problem actually takes advantage of another parsing bug in IE 5 and 5.5 on windows, which is to apply a width which is then overridden.

The IE 5 and 5.5 on windows ignores the overridden width property because of the 2 voice family commands and thus equal width is achieved on all browsers. The additional html>body style adds support for the browsers that understand CSS2.

Alternatives to Box Model

There are ways to achieve the box model hack more simply and easily. One way is to have a container element with only width (total width with border and padding added) defined and another container inside it with the border and padding properties. Because the container will have only the width property, it will retain it on all browsers. So if you had a style like this:

You should split it into two styles as follows to overcome the IE bugs :

Now you can use <div id="box"><div> ...</div></div> to put it to work.

Another Alternative

This alternative is the simplest of all. Just have a look at the following style sheet:

By placing empty comment tags (/**/) before the colons, IE5.0 will ignore the command. Similarly, by placing these empty comment tags after the colon, IE5.5 will ignore the command. By using these two rules together we achieve a uniform width across all browsers.

Applying two classes together:

You might get amazed as I did when I first read about it on some website, that you can apply two classes to an element at a time. It as easy as it says and here is the example for you :

<div class="class1 class2">...</div>

Remember to use a space in between the two classes and not commas. Also if a rule is getting overridden in the two classes, the class that appears last in the style sheet will be applied.

---

Comments

No comment has been posted for this article yet. Be the first to comment below