Resources for Web Development Students @ Robin’s Blog

If you are a student in my class you are probably learning that the CSS styles that you are writing may look good in Internet Explorer (Windows), but not in Firefox/Opera and visa-versa. At times you may have to use what are referred to as “hacks” in your CSS code to get your site to look good across all browsers. A hack allows you to write CSS code that can be read by one browser and not another; there are several popular “hacks” for different browsers.

Today in class I was working with a student who was using Dreamweaver to position an object. The object was positioned perfectly in Internet Explorer, but in Firefox it was positioned too far down on the page. This positioning discrepancy was by about 10 pixels. When we looked at the code, we discovered that Dreamweaver had positioned the object, with an id of layer1, with absolute positioning; the top margin was set at 105px. This worked fine in Internet Explorer (Windows), but Firefox and Opera really needed a top margin around 95px, a ten pixel difference.

As an example, lets take a look at this Catalyst logo that I took some screen captures of. Here it is positioned perfectly in Internet Explorer for Windows.

Here is the logo in Firefox. Notice that it displays about 10 pixels further down on the page.

So the question is, how do we set two different top margins for an ID in CSS?

The Child Selector

#layer1 {
position: absolute;
top: 105px;
}

html > body #layer1 {
top: 95px;
}

Take a closer look at the example. All browsers will read this portion of the CSS code and set the top margin to 105px:

#layer1 {
position: absolute;
top: 105px;
}

Then Firefox, Opera, and other standards compliant browsers will then read this block of code and reset the top margin to 95px:

html > body #layer1 {
top: 95;
}

Internet Explorer ignores the above use of a child selector (html > body #layer1) because it can’t understand it. All standards compliant browsers can understand the code and because it’s declared last it is implemented on the page.

How else can we fix this 10 pixel problem?

The !important rule is used to take precedence over a user style sheet. It is another rule that Internet Explorer does not understand and therefore it can also be used when you want to write a CSS declaration that you want Internet Explorer to ignore.

#layer1 {
top: 95px !important; (all browsers with the exception of Internet Explorer with have a 95px top margin.)
top: 105px; (Internet Explorer will have a 2em left margin)

Update: David mentioned that the !important rule is somewhat inconsistent in IE. I will do further research on this issue. Meanwhile, test, test, test!

Global Reset

The other option is to reset the margin and padding for all elements in all browsers when you first begin building your CSS pages. This is done using the Universal Selector (*) which is a wildcard.

* {
margin: 0px;
padding: 0px;
}

This levels the playing field so to speak and essentially gives you a page with all margins and padding cleared. This declaration should be used with caution or some unexpected results. I was reading articles at Left Justified about this “global” fix. In CSS Negotiation and a Sanity Saving Shortcut the author, Andrew Krespanis, discusses how he starts every new style sheet he creates with this global declaration. This article raised some red flags from other developers so as a follow-up he wrote “Global White Space Reset” which discusses some of the issues that this code creates. I would recommend that you both of these articles, including the comments, before you employ this global reset technique; it should be used with caution, especially with forms and lists. Be sure to read the comments below. Andrew Krespanis, from http://leftjustified.net/ was kind enough to post some tips for us!

As you start using CSS to control the style of your web sites, you will notice inconsistencies across browsers quite a bit. You may want to print and/or bookmark this entry for future use.

More Resources

Here are a few sites that list and explain the popular CSS hacks:

1. Evolt: Ten CSS Tricks You May Not Know
2. WebCredible: Hacks and Browser Detection
3. Mani Sheriar: Tips from Mani’s visit to class
4. Community MX: Common Coding Problems with HTML and CSS
5. InformIT: Untold Mysteries of CSS
6. Mezzoblue: CSS Crib Sheet
7. Tantek: Undoing HTML.css

While these hacks and links have been mentioned elsewhere on this site and on tinkertech.net, I thought they were important enough to mention again. I would recommend that you print/bookmark the above links for future reference.

Finally, it’s best to test pages first in Firefox, Opera, or Safari, then in Internet Explorer. Doing so will ensure that your site looks consistent in most browsers. You can then use the hacks mentioned above to fix any Internet Explorer issues you may have.