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.
Separately:
.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 {
-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:
.roundedbox {
border:1px solid #5ca3b7;
padding:10px;
-moz-border-radius:10px;
}
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.
