These basic styles remove the bullets from the list and ensure that the input
fields are all the same size. We also modify the form’s <fieldset> and <legend>
to create a “tab” for the form. With the basic styling in place, we can turn our
attention to rounding the edges of the legend, fields, button, and form.To round all the input fields on our form, we need a CSS rule like this:
css3_rough_edges/stylesheets/style.css
.logininput, .loginfieldset, .login legend{
border-radius:5px;
}Add that to your style.css file, and you have rounded corners.
Falling Back
We have everything working in Firefox, Safari, Chrome, and Internet Explorer
9 and 10, but it doesn’t work in Internet Explorer 8. That’s ridiculously easy
to fix thanks to PIE,^1 which gives us drop-in support for border-radius and a few
other features. Download PIE, unzip the archive, and place PIE.htc in the
stylesheets folder.Before we get to rounding the corners, we have a style glitch to fix. Internet
Explorer treats legends a little differently, so when we look at our form in IE
we don’t see the legend as a tab; the legend is placed completely inside of the
fieldset. We can add in a small style fix for IE that pushes the fieldset’s legend
up a few pixels so that it looks the same as it does in Firefox and Chrome.
We’ll create a new file called stylesheets/ie.css and link to it from our web page
with a conditional comment so it loads only in IE 8 or earlier:css3_rough_edges/index.html
<!--[if lte IE 8]>
<linkrel="stylesheet"href="stylesheets/ie.css"type="text/css"media="screen">
<![endif]-->Then, in stylesheets/ie.css we’ll add the fixes for the legend and fieldset:
css3_rough_edges/stylesheets/ie.css
.login{margin-top:20px;}.loginfieldsetlegend{
margin-top:-10px;
margin-left:10px;
}
.loginfieldset{
padding-left:10px;
}report erratum • discussRounding Rough Edges • 155
Download from Wow! eBook <www.wowebook.com>