Website Designers and Webmasters

As most designers know, there is a difference between Internet browsers. Internet Explorer and Firefox displays websites differently. Some differences are hardly noticeable, and others are huge.

From my experience, Firefox follows HTML and CSS rules to the letter while IE only follows most of them. Here is an example I ran into today having to do with Centering Images using CSS:

Using CSS to Center Images:
I have the same image three times. Here is the image:

As you can see it is just a simple 2×26 pixel image. In the following link example, I have this same image centered three different ways.

CSS Image Centering

If you are viewing this in Firefox, those three images will create one perfectly centered, two-pixel wide, vertical line (as it should). But in Internet Explorer, the bottom two images move to the left one pixel…. I would ask Micro, “Why?” But I’m sure I wouldn’t get an answer.

Three Cheers for open source!

BTW, Here is the Code for the three above images, so you can tell the different centering techniques that I used:

This one works correctly in both browsers:

<div style=”background: url(http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg) center no-repeat; height:20px;”> </div>

These two don’t work correctly in Internet Explorer:

<div align=”center”><img src=”http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg” alt=”"></div>

<div style=”text-align:center; margin:0 auto”><img src=”http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg” alt=”"></div>

Enjoy,
Ashton

As I was doing some CSS research yesterday, I came upon a site that really impressed me. This site was primarily Red. It had a page called “skins”. “Skins” usually mean what the website/program look like. For example, Trillian messaging program is always the same program, but you can change the way it looks by getting new skins. Here are a couple skins from their website:

Now this kind of confused be, because a website will always have one look, and you have to actually edit the site to change that, right? Wrong! On this guy’s “skins” Page he had three buttons and when you clicked on them, it totally changed what the page looked like!! So of course I learned all I could about it, and here is what I have to share with you.

You can view his site here.

Here is the code:

You need two (or more) different style sheets to use for the same website. You will include it in the header like this:

<link rel=”stylesheet” type=”text/css” href=”asset/stile.css” title=”metrostation” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” href=”asset/cielo.css” title=”cielo” />

This is the javascript that needs to be included in the page:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName(”link”)[i]); i++) {
     if(a.getAttribute(”rel”).indexOf(”style”) != -1 && a.getAttribute(”title”)) {
       a.disabled = true;
       if(a.getAttribute(”title”) == title) a.disabled = false;
     }
   }
}

Then all you need to do is create this simple anchor on your website that will switch themes to that CSS document(You will need to make a different button for each different CSS):

onclick=”setActiveStyleSheet(’cielo’, 1);return false;”

That is freaking the coolest thing, with endless possibilities. Once I have duplicated this on mywebsite, I’ll be sure to make a post so you can find it!

-Enjoy,
-Ashton Sanders

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 Interent 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 frusturating things in the world… second only to stupid people… maybe.