HTML and CSS Reference
In-Depth Information
5.
now there's one more thing that needs to be fixed. You'll notice that the
aside
element is missing some styles such as
background-color
and
padding
. This is a
side-effect of the CSS extension. To create the table in your page, this code created
real table elements for you such as
<tr >
and
<td>
. So once the JavaScript runs, the
aside
element is removed and replaced with rows and cells. Since there is no
aside
element anymore you can't use an element selector to style it. However, there is only
one
aside
element in your source document and it has the sidebar
id
attribute.
6.
Close the browser, which will stop the debugger.
7.
Replace all
aside
selectors with
#sidebar.
, including the one you just added. There
are several places in the
Index.cshtml
file that you'll need to change.
8.
Press F5 to run the application and change the browser mode to iE7. The sidebar
should now have a background color and there is also padding around the text.
Adding Rounded Corners
If the browser does not support rounded corners, you can easily add them thanks to a nifty jQuery plug-in written
by Dave Methvin. In addition to rounded corners, this plugin can also create a number of other patterns, which
are displayed on their web site (
http://jquery.malsup.com/corner
)
. This is provided through an open-source
license so you can freely download and use it in your application.
You'll use this plugin to implement rounded corners for the
nav
and
footer
elements. However, this
should only be done if rounded corners are not supported natively. So the first question is how do you know
if the browser supports rounded corners? The answer again is: Modernizer. Adding a statement like this will
conditionally call the custom method:
if (!Modernizr.borderradius)
■
Tip
i will show you another technique for rounding corners later in this chapter.
eXerCISe 7-3. aDDING rOUNDeD COrNerS
1.
the jquery.corner.js link near the top of the page. This will download the latest
version. Save the file in your Scripts folder.
2.
From the Solution Explorer, right-click the Scripts folder and select the Add ➤ Existing
item links. navigate to the Chapter
7
\Scripts folder and select the
jquery.corner.js
file.
3.
This function is based on jQuery so you'll also need to reference that in your page.
The jQuery script is already included in the Script folder.
4.
open the
Index.cshtml
file and add these references near the top of the page, just
after the modernizr script:
<script src="~/Scripts/jquery-1.6.2.js"></script>
<script src="~/Scripts/jquery.corner.js"></script>
