Chrome alone fix, here when i was in a situation where i had a good design ready for a live implementation, but there was an issue waiting for me. Everything was intact untill i got my site to be run on Chrome browser, i had an exclusive issue that was occuring only on Google Chrome.

The solution has to be in such a way that I get the css style that works only for chrome. How can I have a style written for this exclusive for Chrome???Then i got this Chrome fix on the web,

@media screen and (-webkit-min-device-pixel-ratio:0) { …….. }

Something like this,

@media screen and (-webkit-min-device-pixel-ratio:0) { id_name/class_name{style_property: style_value;} }

One good example for this can be like,

@media screen and (-webkit-min-device-pixel-ratio:0) { #right_col{height: 2419px;} }

Add this to your css styles either inline or external.It works like a wonder 🙂

Try it on your code and get back with your comments.


Emulating IE7 in place of IE8

September 27, 2010

Sometimes fed up of all the issues over correcting the compatibility of Internet Explorer on multiple browsers we are to hang up with our incomplete work. A good solution to make the things work is to have the browsers emulated and by default make our website open with a single browser that we require the site to open wit. So here is a the code you need to add for making your website open by default with IE7 rather than IE8,

“<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />”

Hey but do remember, do not make this a permanent solution, have this as a solution until you fix all the compatibility bugs over IE8.

This was one such moment that made me go mad for no big deal.
The issue was simple to get a line of horizontal alignment, as we have with the <HR> tag in XHTML with a dotted decoration. As per the requirement said, i was in need of a “HORIZONTAL LINE”, so as any normal human my mind striked for going with the <hr> tag. SO what next start experimenting with the CSS behind the HR tag. It took all my time and my patience was tested to its peak. Oh god, there were no signs of getting it. All the backgrounds were tested , all the text decorations were applied for the HR tag, finally as usual the last solution – GOOGLE for the solution and so i did. Now wats this, i was no were near to the right solution to this issue. To my dismay it was done with a DIV tag???!!! But how??
This was as simple as u can imagine. The thing required was a DIV tag with no cotent in it. As u can in the below code, this shall give you an idea how really it works,
<div style=” border-bottom: 1px dotted #f4f4f4;”></div>
As is seen in the code, the division has no conetent and has a bottom border of size 1px, the border style as dotted and the color as per your need.
Isn’t that simple 🙂

The concept of ID and class:

The main and the most important thing that makes the ID and class a very important and a strong concept in css is that it acts as a hook to the several elements being used in XHTML. The elements are defined with their own class and ID. They are to carry with a defining of the several parameters and styles defined under every class and ID. Now When we assign any element under our HTML with ani ID or class, then the particular element is to follow the styles defined under the respective Class or ID.

<div id=”div1″>

<div id=”div2″>

So here we can see we have the same Div element, but they follow different styles defined under their respective ID’s. And so in your CSS we define the styles, somethinmg like this,



So this way both the Div are to use different styles defined. The undefined styles remain the same for both the DIVs.

Difference in ID and a CLASS:

So here we come to the most important topic on this post. Its about the ID and CLASS, why do we need them as two.. As to some one very new to CSS, might feel these as one and the same. But they are not.

The ID are unique,
The most importatnt characterstic of an ID is that its unique for every element of the HTML. This way, we must define different IDs for every single element. Two elements can never have the same ID. This way, we can define different styles for different elements of same type in HTML.

The CLASS are not UNique,
In contrast to the IDs the CLASS are not a unique typed ones. We can have more than one element to be with a same class name. The class groups several elements and defines the same set og styles to all those elemets defined under the same class. This way the class helps in defining styles that we need to apply to more than one element.


This is an analogy that i read in one of the post recently that really made me to write this post,

Its like gives a clear idea why we go for ID and Class in two different formats, and why do we need them both. So its like take for an example, we have a product in a super market, may be a dvd pack. Now the DVD pack has a bar code on it and also a serial number of it. Here the serial number is unique for all the DVDs in the shop, whereas the barcode which defines the cost and name of the product is same for all DVDs. Here the serial number sticker acts as a class and Bar code acts as an ID. The real use comes, when the shop keeper wants to check for the number of DVD he uses, he needs the unique value called the serial number, whereas when he needs to get the product name, value cost etc which are same for all dvd he goes for the bar code reading. So when he needs to change the cost for all DVD, he simply changes the barcode (CLASS) value. Whereas if he want to calculate the number of them he uses the serial number (ID). Is n’t it a great gift of CSS to have  them both 🙂

After knowing the difference, we get a clear idea and this helps us to efficiently make use of both class and ID where ever needed.

Javascript needs ID:

This is a yet another need for the use of ID, the javascript function getstylebyid(), this allows the javascript to work on the dependency to the styles defined by the ID of an element and not by its class styles.
ID wins over CLASS

Now there was an interesting question which rises in my mind, what if i have both ID and Class defining the same styles with different values, now here which value will the element choose from?? The answer is, the value defined by the ID, as the rule of CSS always the ID overrides the Class for any element.

Hope this post clears your idea on both the ID and CLASS, and in what way they differ from each other. Thanks and do give your comments on this, and also your queries. Thanks. 🙂

%d bloggers like this: