CSS Rounds Corners in Firefox, But Not in IE8

Firefox/Mozilla browsers are gaining shares of the browser market and for good reason. Upbeat features let the user take complete control of their browsing experience, which is one main reason behind their gaining popularity. Add-On tools can help most any website developer to see that their site is put together in a valid way and that has pushed Firefox use among developers to probably a very high level. I still have yet to hear another web developer state that they prefer IE over Firefox, and I’m pretty sure that all of us have cursed IE6!

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.


.box {
border-width: 1px;
border-style: solid;
border-color: #000;

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

.box {
border: 1px solid #d1d1d1;

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:

.box {
border-left: 1px dashed #000;
border-right: 2px solid #5ca3b7;
border-top: 1px dashed #000;
border-bottom: 2px solid #5ca3b7;

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 {

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:

.roundedbox {
border:1px solid #5ca3b7;

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.

ColorZilla Browser Extension for Firefox

Yet another way to explore colors is to use the ColorZilla browser extension for Firefox. This is one of my favorite ways to pick up colors as Firefox is always handy.

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.
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.
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.
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!

Check Your Site Design in the New Chrome Browser and Many Other Browsers

Since the new browser from Google has come out I’ve wanted to see how my various websites look in Chrome.

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.

Best Tools for Troubleshooting Problems with CSS and XHTML

Different browsers have their own ways of helping developers troubleshoot problems with positioning divs and combating errors that pop up here and there.

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?