Internet Explorer CSS Tip

Beginners Note: The main purpose of CSS, or Cascading Style Sheets, is to add color and life to a website. The main use for HTML, or Hyper Text Markup Language, on the Internet is to create the format or layout of your website. (Note: It is quite possible to create two identical websites, one in only HTML, and one with almost no HTML formatting and lots of CSS.)

Many Search Engine Optimizers will tell you that the more CSS you use the better. The reason for this is simple: If you created a web page only in HTML, a search engine would have to index 300 lines of code (lets say), while on the other hand, if the same website was formatted with lots of CSS, you would only have 50-100 lines of HTML for the search engine to index. So the search engine would index almost only textual information, and very little code. And in theory, the search engine will think that you are a much more important resource for it to index.

As any Website designer will tell you, Internet browsers can react very differently to the same piece of CSS code. And since a vast majority of the public use Internet Explorer, it’s very important for your website to look good in that browser. Unfortunately, this browser doesn’t listen to CSS directions as rigidly as FireFox, the next most popular Internet browser. (Internet Explorer Vs. FireFox)

Now for the Internet Explorer CSS Tip:

Lets say you have this piece of CSS code:

.text {
padding-top: 5px;
}

And this is your HTML:

<div>Welcome to the HTML Class</div>
<div class=”text”>Today we will be learning about HTML</div>

And for some reason the freaking Internet Explorer won’t listen to your CSS. No matter what, it just refuses to add padding in between the two <div>s. There are many things you can try to get it to work. You can change it to “margin” or change the distance to 70px. Nothing happens. Believe me… one of the most frustrating things in the world… second only to stupid people… maybe.

Well behold there is something else you can try: be more specific when you define your selector (.text). Try this:

div.text {
padding-top: 5px;
}

I’ve found that Internet Explorer takes much more kindly when you are more specific with your CSS defining.

Another CSS Note I thought I’d throw in as a bonus:

I realized that almost none of the CSS tutors on the Internet tell you about this extremely useful CSS syntax that can help you to be more specific. Lets take this example. You have a 100 page site with lots of pictures that you want to validate. Unfortunately, a couple of your pictures don’t have an “alt” tag (which will create an error in almost all HTML validators). The solution is use this CSS code:

img[alt] {
border: 5px solid #FF0000;
}

This code will put a 5px red border around ever image that has an alt. This will make it easy for you to scan through your site and easily view images that are and are not properly formatted.

This is how it works: After the HTML tag (selector) and inside the brackets [ ] put any attribute for that HTML tag. You can also put the attribute and that attributes variable. Like this:

img[alt=”Websites in a Flash”] {
border: 2px solid #FF0000;
}

With that code, any image that has the alternate text of “Websites in a Flash” will have a 2px red border around it.

-Enjoy
-Ashton Sanders