HTML and CSS Reference
In-Depth Information
<ul>
<li><a href="nowhere.html" id="ex7">Link one
<span></span>
</a></li>
<li><a href="nowhere.html" id="ex8">Link two
<span></span>
</a></li>
<li><a href="nowhere.html" id="ex9">Link three
<span></span>
</a></li>
</ul>
These techniques show that it is possible to do dynamic image swapping using CSS.
Naturally, you can adapt these ideas to your own needs, but there is one limitation that we
haven't mentioned that you may have wondered about. In all the examples, we attached the
hover behavior to a link (an
a
element). What if you don't have a link on the web page where
you want the effect to happen? Unfortunately, it's not possible to do this on Microsoft Internet
Explorer 6 or earlier, but for most other browsers, including IE 7, you can use the
hover
pseudo-
class on any element. However, Microsoft is offering IE 7 as part of its Windows Update web
site and will automatically be downloaded for people who have opted in to the Automatic
Updates service. So it's hoped (at least by web developers who love web standards!) that the
numbers of IE 6 users and earlier should go into something of a decline.
Rounded-Corner Boxes
With border styles and padding at your disposal, it's all too easy to create blocks of content
that look, well, boxy! Wouldn't it be nice if we could create rounded corners and smooth off
some of those hard edges?
To achieve rounded corners, you need to make prodigious use of background images
combined with a suitable solid background color (in case images are disabled in the browser
or are slow to download).
Creating a Fixed-Width Rounded Box
Figure 8-20 shows a background with rounded edges that is split into three. The top and bot-
tom sections will be used as background images, while the middle section is solid background
color. Note that the bottom image has a slight gradient effect applied.
Figure 8-20.
A rounded corner box, “exploded” view
