Website Design Ireland, Website Development » CSS http://www.eire-webdesign.ie/blog Web Design and Development Sat, 02 Jan 2010 14:53:06 +0000 en hourly 1 http://wordpress.org/?v=3.0 CSS Hack !important http://www.eire-webdesign.ie/blog/2007/10/15/css-hack-important/ http://www.eire-webdesign.ie/blog/2007/10/15/css-hack-important/#comments Mon, 15 Oct 2007 10:02:31 +0000 Louie @ Eire Web Design http://www.eire-webdesign.ie/blog/2007/10/15/css-hack-important/ In CSS is very easy to overwrite a rule you have created earlier, then you wonder why making changes to the rule doesn’t  apply to the page layout. 
One thing to know is the !important rule available since CSS1.
Adding !important after a command like this:

.div { margin-left: 5px;color:#ff0000!important;margin-left: 3px;}

will make sure that all browsers  will have a margin-left of 5px regardless of what appears after it, except IE (Internet Explorer)  which ignores the !important command gives a margin-left of 3px.

This can be very useful when you need to set relative margin as the display will differ from browser to browser.

IE, however, will respect the !important declarations if they are not in the same rule as below:

.div_font {color: red;!important;}
.div_font { color: blue; }

So whatever you asign this rule to the font color will be red not blue as in the second command. 

The first example above was a very useful CSS Hack for IE, however since IE7 has been released, the !important rule doesn’t have much effect any longer, as IE7 renders the page much like Firefox.

]]> http://www.eire-webdesign.ie/blog/2007/10/15/css-hack-important/feed/ 0 CSS Centering fixed-width layouts http://www.eire-webdesign.ie/blog/2007/10/15/css-centering-fixed-width-layouts/ http://www.eire-webdesign.ie/blog/2007/10/15/css-centering-fixed-width-layouts/#comments Mon, 15 Oct 2007 09:59:18 +0000 Louie @ Eire Web Design http://www.eire-webdesign.ie/blog/2007/10/15/css-centering-fixed-width-layouts/ Do you ever wonder how you can center a containing div?
The use of “tables” or “center” tag makes the job a lot easier, but it will fail validation.
Another way of doing this is using CSS stylesheet.

body{padding:0px; margin:0px; text-align:center;}

#div_container{margin-left: auto;margin-right: auto;width:800px;}

The only problem with the above solution is that “#div_container” will also have the text centered.
To overcome this problem you have to specify the “text-align” tag as below:

body{padding:0px; margin:0px; text-align:center;} #div_container{margin-left: auto;margin-right: auto;width:800px;text-align:left;}

W3C Visual formatting model explains: “If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal.
This horizontally centers the element with respect to the edges of the containing block.”

]]> http://www.eire-webdesign.ie/blog/2007/10/15/css-centering-fixed-width-layouts/feed/ 2