Internet Explorer cannot open the Internet site - Operation aborted.

The problem was traced to the older IE browsers’ inability to render the page completely before it tried to execute some javascript code.

The solution was to add a simple defer tag to each javascript call, like so:

<script defer="defer" type="text/javascript" src="src goes here">/*code goes here*/</script>


Thanks goes out to Richard for posting his found solution. Thanks, Richard!

Microsoft also indicates that this error can be avoided by updating your browser to the latest version, which at this time is IE8. Now, if only all my clients would do the same!

Firefox also champions the use of future CSS, which are CSS features that will only be seen by IE users at some time in the future. Ok, I made that up, but since Internet Explorer is playing the catchup game, I think it’s only fitting to point out an example.

Looking at some CSS basics…we have a way to draw a box around some content. It’s called the border property. The top, left, right and bottom sides of the box can be assigned diferent values for the width, style and color. Each of these values can be assigned separately or all at once.

Separately:

All together, in the order width, style, color:

If you want to have different widths, styles or colors for your box, then you’ll have to use the properties that target each side, like so:

That’s nice, but sometimes we really don’t want the square boxy look. Rounded corners are nice, aren’t they? Well, our Firefox users can see rounded corners for the same box that we’ve built for our menu. All we have to do is add one property to the menu, called the -moz-border-radius, and specify its size. IE simply ignores this property, so those boxes will show pointed corners.

.roundedbox {
-moz-border-radius:10px;
}

The 10 pixel radius is the size of the rounded corner. We probably want to add a little padding to the menu box so the content isn’t smashed against the border, so we’ll set that at 10 px, too.

Here’s a menu box that will show rounded corners in Firefox/Mozilla browsers:

There are ways to get the rounded corner look in IE browsers, but it’s a bit more work. For now, we’ll continue to use the -moz-border-radius property in appreciation of our Firefox users.

Once installed, Colorzilla resides down in the left, bottom corner of Firefox. You’ll see a little eye dropper icon. Click the eyedropper and the mouse pointer changes to a cross hair. Hover over any spot on the page and the RGB and #hex values are noted at the bottom of your browser. Click again and the color values are stored temporarily until you click on the eyedropper again.

If you leave the current tab and come back you’ll note that the color values have disappeared from the bottom bar, but they’re not really gone. Right-click the eyedropper and you’ll be presented with a menu of choices.

Right-click menu for ColorZilla Firefox browser extension.

Have fun exploring all the features of ColorZilla, but take note that the details of the last color picked are ready for you to copy in your favorite format.

The Options menu has a hidden feature that you might want to check out:

ColorZilla Firefox browser extension options menu.

Right-click on the eyedropper, click on Options, then click on Statusbar Format…. Here, you can modify the information that you see in the bottom bar of the Firefox browser when you activate ColorZilla.

ColorZilla menu for statusbar formatting.

Now, along with color values, you can “see” elements of a webpage, their paths, URLs and distances to other page elements.

A great feature that I must point out is the Webpage DOM Color Analyzer that you can reach from the Options menu. Visit a page where you like the color scheme, right-click the eyedropper and choose the Webpage DOM Color Analyzer…. A window at the bottom of the screen will show the main colors of the page, but not from the images on the page. Clicking on any of the colors in the palette will show you the css rules that are using that color.

ColorZillla – what a neat way to explore a page and all its colors!

The fastest way to see how your site designs hold up in various browsers is to sign up for an account at Browsershots.

It’s as easy as ticking off a few boxes to select which browsers you want to view and hitting the Submit button.

As of today you can test your site designs in 31 browsers for Linux, 33 for Windows, 6 for Mac OS, and 11 for BSD. Each operating system is paired with the most popular browsers and some you’ve never heard of, like Dillo, Epiphany, Minefield, Shiretoko and others.

That’s not all! You also get to choose a screen size, the color depth, which javascript version is used or if it’s used, and whether java and flash are enabled or not. If these parameters don’t matter and you just want to look at a screenshot of your design in some different browsers, leave the spin boxes at the default “don’t care” setting.

Now you don’t have to wonder what your designs look like to Mac or Linux or BSD users, or even in the newest version of browsers you don’t use on your PC.

I have found a few tools that are extremely valuable for developing web pages. I’m sure these are very popular due to their ability of helping isolate and fix problems.

I prefer Firefox browser so these are my favorite browser add-ons and their features that I really like:

• Firebug – view divs onscreen, explore code and its output onscreen
• Web Developer Toolbar – one-click validation, resize screen to 800×600, disable cache, lots more – an army of tools
• Total Validator – validates complete with screenshots in various browsers
• ColorZilla – color picker, great view of css divs, zooms page

Care to add to my list? What do you use to help in your WordPress and web page design?