HTML and CSS Reference
In-Depth Information
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.
Close the browser, which will stop the debugger.
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.
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 ( ) . 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)
i will show you another technique for rounding corners later in this chapter.
eXerCISe 7-3. aDDING rOUNDeD COrNerS
go to the web site referenced above ( ) . Click
the jquery.corner.js link near the top of the page. This will download the latest
version. Save the file in your Scripts folder.
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.
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.
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>
Search WWH ::

Custom Search