Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

By: Ashton Sanders

Internet Explorer 6 and 7 on the Same Computer

Aug 10 2007

Yes, in the world of Website Designing, you must make sure your website looks the same in every major browser. This means having all major browsers available: IE6, IE7, Firefox, Safari, Opera, etc. You may even want to go as far as checking it on the Netscape, MSN or AOL Browsers. (Although I recommend never downloading anything from AOL, as I’ve observed legal but slightly malicious coding from them.)

If you’re a PC guy, that means you’ll need to find a friend with a Mac to check your Safari websites. Also, since when you install Internet Explorer 7, it deletes, Internet Explorer 6, you’ll need to have two computers…. right? Wrong!

We can thank TrendoSoft for this beautiful program that will allow you to install multiple versions of IE on your PC!

Now your task bar can look like this:
My Task bar

And if you are using Internet Explorer, I recommend switching to Firefox for a even safer and user-friendly experience.

-Ashton Sanders

By: Ashton Sanders

Internet Explorer CSS Tip

Mar 2 2007

Filed under: CSS,Website Design

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.

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 atribute for that HTML tag. You can also put the attibute and that atributes 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.

-Ashton Sanders

By: Ashton Sanders

FireFox Vs. Internet Explorer

Mar 1 2007

Which one would you choose?
It’s almost 100% unanimous accross the Computer Nerd and Internet Geek world: Firfox is the best. But What does the rest of the world think? Internet Explorer comes installed on every Windows Machine, and by far most computers are windows machines.

As of September 6th, 2006, Internet Explorer owns 83% of the market share (Down .5% from 83.5% in July) while Firfox Gained .5% to 11.8. So Firefox is very slowly gaining momentum.

Other browsers posted slight gains in August, including Apple’s own Safari (+.03 percent to 3.21) and Opera +.05 percent to 0.64).


Whats the difference?

There are many differences, but the most important one to me is the extensions. An extension is a program that is added onto your Firefox. These extensions could be anything as simple as “When you double click you go to your home page” or as complex as a whole toolbar full of internet and website editing tools.

Firefox is an open source browser, and it allows programers to create extensions for Firefox. It displays all of the extensions on the Firefox Website.

Here are some of my favorite Extensions:

Web Developer by Chris Pederick
This Toolbar is a must-have for any web developer or Computer programmer. It does everything from validating the webpage you are on to Revealing passwords that Firefox remembered but you forgot. My favorite part about this tool bar is “Outline Current Elements.” This tool will tell you all about the organization and what is happening on your website.
For Example, if you want a picture to align right, but for some reason there is huge space between the picture and the right side of the screen, simply hit this tool and put your mouse over the space and it will tell you what part of your code is creating that space. It may highlight your image. In which case, you have a Margin for your image that you didn’t remember making. Or there may be another object in the way. This toolbar takes the guess and check out of it.

Firebug by Joe Hewitt
This is a Great Tool for validating a page. It will tell you in the bottom right of your Firefox how many error/warnings a page has. You don’t have to press any extra buttons or anything.

Check out Tomorrow’s post for more cool extensions.


Where Am I?

You have found the semi-coherent ramblings of Ashton Sanders: a website designer, developer and webmaster. This is primarily Ashton's place to save notes about techniques and things that he learns in his never-ending conquest of the internet. Hopefully it's coherent enough to be useful to you too.


Enter your email to get automatic emails whenever Ashton posts on the blog.


Tags and Categories


Blog Roll