The Icons - Page 3

The relatively simple nature of the icons (each is a single image alone in a link element) makes them easier to work with. We'll tackle the left-side icons first. We know that each icon is 50x50 pixels. We also know that we want them to sit in the left-side panel with no extra space around them, so we need to convert them to block-level elements with no margin. But we need to be careful about what we convert!

td#main {background: #FFD; color: black;
  border: 2px solid #797; border-width: 2px 2px 2px 1px;}
td#navbuttons a {display: block; margin: 0;}
td#navbuttons img {display: block; height: 50px; width: 50px;}
</style>

This won't have any immediate visual impact, but it avoids trouble in the next step. We want to increase the amount of space around each image, but rather than doing it with margins, let's do it with borders that exactly match the background color of the cell. We'll also set the background color of the images to be transparent so that the cell background remains visible around each icon.

td#navbuttons a {display: block; margin: 0;}
td#navbuttons img {display: block; height: 50px; width: 50px;
  border: 1px solid #ACA; border-width: 5px 10px;
  background: transparent;}
</style>

Okay, so besides adding some apparently empty space around the icons, what good did this do? Plenty. Assume that the current page is the Natural Gas page. We can highlight the icon by adding a rule that makes the border and background the same color as the intracell borders (see Figure 4.7).

td#navbuttons a {display: block; margin: 0;}
td#navbuttons img {display: block; height: 50px; width: 50px;
  border: 1px solid #ACA; border-width: 5px 10px;
  background: transparent;}
td#navbuttons img#gas {border-color: #797; background: #797;}
</style>

The big win we get here is not just that we can easily indicate the current page, but also make the background and border colors change when the link is hovered over by the mouse pointer or when the icon is clicked.

Figure 4.7
Highlighting an icon with borders and background

---

Visitation Styles

We'll skip writing a "visited" style for the icons, although we could create one easily enough. As an example, we could have written td#navbutton a:visited {border-color: gray;}..

---

td#navbuttons img#gas {border-color: #797; background: #797;}
td#navbuttons a:hover {background: yellow;}
td#navbuttons a:hover img { border-color: yellow;}
td#navbuttons a:active img {border-color: #FC0;
  border-style: inset;}
</style>

---

Two Blocks?

Yes, we've set both the hyperlinks and the images to be block-level elements. By making both elements blocks, we can be assured that they'll behave in a predictable way—sort of like one div inside another. If we left the images alone, they would default to being inline elements, which can cause unexpected space to appear in recent browsers.

---

Now any link (other than the one for the current page) will get a yellow background when hovered over. If an icon is clicked, its border will turn orange, thus framing the link for a moment in a thick orange box with the yellow background still visible inside (see Figure 4.8).

Figure 4.8
Combining hover and active styles can lead to interesting effects.

It's worth spending a moment on the selectors. Take, for example, td#navbuttons a:hover img. It's written this way because we want to give a yellow highlight to any image that's descended from a link being hovered over—both of which are contained within a td element with an id of navbuttons. Ditto for the "active" rule.

It's worth asking, though, why we set the background color on the hyperlink instead of for the image itself. It turns out that IE5.x for Windows mostly ignores background styles on images that are part of hovered links. This failure is very odd because it will change the border color, but there you have it. Because IE5.x will set the background color of the hyperlink, we can sneak around this bug in the manner shown. If you're developing for a situation in which IE5.x isn't an issue, you could just style the background of the image and not mess with the link's background at all.

---

No Hover for the "Current" Icon

So why doesn't the icon for the current page (the gas flame) take on the hover or active styles? Because the specificity of its selector (td#navbuttons img#gas) outweighs the selectors for the hover and active states, so its values for the border and background colors win out.

---

Styling the Document - Page 2
Eric Meyer on CSS: Mastering the Language of Web Design
Altering the Main-Text Links - Page 4