We just bump the fieldset down 20 pixels and pull the legend up 10 pixels,
creating the tab. We also nudge the legend over to the right, but because of
Internet Explorer’s default styling, we need to add some padding to the fieldset
itself. Now it looks similar to the style in other browsers.Finally, we load PIE by using behavior, a special CSS rule that Internet
Explorer understands:css3_rough_edges/stylesheets/ie.css
.loginfieldset, .logininput, .login legend{
behavior:url(stylesheets/PIE.htc);
}Note that we saved PIE.htc in the stylesheets folder. The link to PIE.htc in our style
sheet must be relative to the HTML page that loads the style sheet, not relative
to the style sheet.Now things look similar on all of the major browsers; you can see the Internet
Explorer version in the following figure.Figure 26—Our form in Internet Explorer
In our example, the client really wanted rounded corners for all browsers.
However, you should always keep these kinds of features optional if you can.
Although some people may argue that there’s a real benefit to softening up
the way a form looks, you should first have an idea of how many people use
browsers that don’t support CSS-based rounding. If your visitors are using
Internet Explorer 9 or higher, it’s not worth your time to maintain a fallback
solution.Rounded corners add a touch of softness to your interfaces. That said, it’s
important to be consistent with your implementation and to not overuse this
technique, just like any other aspect of design.Chapter 8. Eye Candy • 156
Download from Wow! eBook <www.wowebook.com> report erratum • discuss