HTML and CSS Reference
In-Depth Information
The page looks awful and nothing like what you were expecting. You're certainly not going to win any prizes
for it. Not to be deterred you send the link to your boss and things get worse. They are using IE 7 and they see
something like Figure
7-2
.
Figure 7-2.
The CSS Demo as seen in IE 7
Now the sidebar is no longer on the side but tacked on at the bottom of the page. Your boss begins
wondering what you've been doing in all your spare time. You've just learned two important lessons - the
hard way:
1.
Always control your demo environment; in this case, let them see the page on your
browser.
2.
More importantly, test your web site on several different browsers.
In this chapter, I will show you some fairly simple techniques to get your page looking its best even with older
browsers. You don't have to write much code because there is a lot of open source code that you can easily add
to your site.
Creating the Demo Application
To work the exercises in this chapter, you'll use the same web page that you developed in Chapter
4
. In this case,
however, you'll implement it using Visual Studio. I'll first show you how to create the project and copy the web
page from the previous WebMatrix project. In the rest of the chapter, I'll demonstrate the techniques you'll use to
make this page look great, even in IE 7.
■
The source code download that is available at
www.apress.com
contains the initial Visual Studio project for
this chapter. if you want to skip exercise 7-1, you can use the project from the Chapter
07
\initial folder instead.
Tip
