The importance of !important in CSS


In this article I’ll introduce the declaration !important in CSSs and explain how to use it as a “workaround” to avoid adopting IE proprietary code to obtain the max-width effect in your web pages.

When a CSS propriety is specified twice, the browser will commonly use the last one. Let’s see an example:

#main {

In this example the browser will assign width 800 pixels to the #main element.

The declaration !important can be used in cascading style sheets to give priority to some parameters.

#main {
width:600px !important;

In the example above the browser will give priority to the first declaration and the #main element will be 600 pixels width.

So, what’s the point?
Internet Explorer 6 and previous versions simply ignore the declaration !important (while IE 7 supports them) therefore we can take advantage of this issue to design a “browser-based” CSS.

Let’s consider, for example, the CSS proprieties max-width and min-width: these parameters specify a maximum and minimum width of a web element (such as a table or a DIV container). This is a useful feature which allows to create fluid and dynamic layouts that can be displayed correctly both in low resolutions (e.g. 640×480) and in very high resolutions.
Unfortunately IE 6, among other things, doesn’t even support the max/min width declaration: in order to obtain the same effect under IE6 you can use a proprietary code:

#main {
max-width: 900px;
width:expression(document.body.clientWidth > 900? "900px": "auto" ); /* IE proprietary code */

In this example the #main element will be rendered with a maximum width of 900px both in Firefox, Safari, Opera and Internet Explorer.
Please note that the proprietary code width:expression is not a valid CSS declaration, so if you decide to adopt it, your stylesheet won’t respect web standards and won’t be validated.

However, we can use the !important declaration to avoid non-standard CSS expressions. Here is a “workaround” which allows to use max/min width with smart browsers and specify a fixed width for IE 6 users:

#main {
margin: 0 auto 0;
max-width: 900px;
min-width: 770px;
width:auto !important;

In the above example (you can see it in action on this website) the declaration !important is used to specify dynamic width attributes to browsers that support them (e.g. Firefox, Netscape, Opera, Safari and IE 7) while the width is fixed to an average value (800 pixels) for IE 6.
This doesn’t solve completely the matter, but can be considered as a workaround to improve your fluid layout appearance avoiding non-standard code.

Xubuntu Linux on iMac G3

iMac G3
iMac G3

Today I decided to install Linux on my 500Mhz iMac G3 with 256 MB RAM. Although this mac is quite old, it can still be employed for internet surfing or as a local web/file server. Its design is terrific and the machine is compact, silent and easy to move.

I am oriented on debian-based distros, so I chose to install Xubuntu (7.04), a light linux distribution (Ubuntu-flavoured), which features Xfce desktop environment instead of Gnome or KDE (you can download Xubuntu freely from the official website: I downloaded the Alternate Install CD, which is easy to install as the Live CD version, but requires less ram).

The installation went smoothly and the only problem I encountered was the freezing of X server at startup; I googled for some information and found several posts which explained how to solve the issue changing various parameters such as monitor horizontal and vertical sync in xorg.conf, however I wasn’t able to start correctly the X server and have the graphical interface working (everything seemed extremely slow and Xfce was frozen) .

Eventually I found a solution and decided to post it here as Mac configurations are quite standard and someone else with this machine could run into the same problem:

  • If X or Xfce freeze (or crash) on the first restart after installation you’ll be able to access the terminal through the shortcut ctrl+alt+F1 (don’t wait too much time to access the terminal as the mac could freeze completely and you’ll have to restart it)
  • login into the system typing your user and password, then type:
    sudo su
    and repeat your password in order to obtain root access
  • now open xorg.conf with nano, a simple text editor:
    nano /etc/X11/xorg.conf
  • go to the section “Module” inside xorg.conf file and place a comment adding the # symbol before the line Load “dri”:
    # Load "dri"
  • Save the xorg.conf file with the shortcut ctrl+o and press Enter
  • Reboot the system typing
    and everything magically will work :-)

Disabling DRI (Direct Rendering Infrastructure) couldn’t be a very elegant solution, however, if you don’t plan to use 3D games or OpenGL applications (don’t think this iMac model would run them adequately anyway), this solution makes your old iMac G3 work like a charm and you’ll be able to perform home and office tasks such as surfing the internet, playing music or writing a document with your new brand, free operating system.