Styling the Amazing Netscape Fish Cam Page

Summary: A classic reborn! The Amazing Netscape Fish Cam Page has been restructured and restyled for the new millennium, ditching tables for strong and accessible markup. Take a cruise through one aspect of the redesign with master styler Eric Meyer. It's a well-known maxim that if you stick around long enough, you get a chance to see the tides of history turn. If you're lucky, you get to ride the surf that second time around without being knocked over by the waves. I was privileged enough to have that chance recently: I was asked to redesign The Amazing Netscape Fish Cam page for a new millennium. To put that in perspective, I remember when the Fish Cam page first appeared and word of it circulated around the Internet. You could see the actual fish in the mythical Netscape headquarters, any time of the day or night! (Assuming the lights were on.) It was cool, it was funny, it was pretty amazing.

It's also a weird feeling when someone asks you to work on something that has near-legendary status in your mind. It's like a SCUBA enthusiast getting to join Jacques Cousteau on a dive, even down to the required time travel. I dove right in and decided to have some fun with with the redesign, which is why I rather like the final result. To share the joy, I herein present a look into just one piece of the redesign, and how I accomplished certain effects using simple HTML and some CSS.

Marking Up the Fish

In the old Fish Cam page, there was a table that contained the pictures and descriptions of the fish. Well, I couldn't let that continue—fish are flexible, slippery things, and tables are very much not. So I decided to break up the content so that there is a self-contained bit of markup for each fish, and then get down to styling. Here's what one of those bits looks like once all the CSS has been applied.

In order to make the Fish Cam page as agile as the fish themselves, it was necessary to strip out all of the tables, font tags, and other non-validating stuff. At the end of it, there were a series of div elements that contained a picture of the fish, the name of the fish, and one or more paragraphs of text about the fish. Here's a typical (and short) example.

<div class="card">
<img src="thumb_clown_trigger.jpg" alt="Clown Trigger"
  border="0" width="150" height="115">
<h3>Clown Trigger</h3>
<p>
Our clown trigger is a bold little fish, though for a few weeks he 
slept a lot and didn't look well in general. He's much better now.
</p>
</div>

Basically, that's all that was needed. The reason for the class value being card is that the original idea was to style each fish's description like a trading card. Although this design approach was abandoned fairly quickly, the class name stuck, kind of like a barnacle.

Giving the Fish Some Style

With the markup all set, it was time to style. The idea was to have the fish listed in a side-by-side arrangement, sort of like a two-column table, only without the table. This was most easily accomplished by floating the div elements themselves. Since I wanted them to be side by side, it was important to be sure the total width of the element boxes (including margins) was less than 50%, so the first step was this:

div.card {float: left; width: 45%; margin: 1em 2% 0 2%;}

By making the content of each card 45% the width of the containing element, and adding 2% margin to both the left and right sides, each card's element box is 49% as wide as the parent. Two of them side by side will take up 98% the width of the parent element. This leaves out 2% as "wasted space," so to speak. I did it that way because it's a lot less likely to trigger a situation where rounding errors force the two floats to total more than 100% the width of the parent, as could happen if the floats' element boxes were made to total 50%.

Unfortunately, a few browsers don't get this right, and end up flowing the cards as a single vertical column instead of putting the fish side by side. After a bit of fiddling to try to fix this, I decided that trying to overcome this error in document flow wasn't worth the effort. The layout wasn't bad if the fish weren't laid out next to each other, so I moved on.

Floating Fish

With the cards set up to float, the next step was to place the images appropriately. This involved floating the image inside the floated div. It just seemed like a Fish Cam page should have a lot of floating for some reason. I also added a border to the image, so that it would have a nice frame.

div.card {float: left; width: 45%; margin: 1em 2% 0 2%;}
div.card img {float: left; border: 1px solid #339;}

That done, it was time to style the fish names. These are enclosed in h3 elements, so the field was pretty wide open in terms of what we could do. Since the image was floated, any background or border we set on the h3 would "slide under" the image; this is an expected effect with floated elements. Rather than try to fight it or push the image below the h3's element box, I let the image mostly overlap the h3, but with a slight offset. I then set up a thicker double border on the left, a one-pixel border the rest of the way around, and set the background to match the rest of the design. Thus:

div.card {float: left; width: 45%; margin: 1em 2% 0 2%;}
div.card img {float: left;
  margin: 4px 0 0 0; border: 1px solid #339;}
div.card h3 {border: 1px solid #339; border-left: 5px double #339; 
  background: #EEC url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;}

Finishing the Style

Adding the background to the heading containing the name of the fish created three problems:

1. The double border was completely covered up by the image.
2. The text of the h3 was basically touching the right side of the floated image...
3. ...or it would have been, except in some browsers the heading was drawn over the floated image, in contradiction to the CSS specification.

Getting the image back on top of the heading turned out to be a matter of relatively positioning the floated image, and then giving it a z-index value. In order to create visual appeal, I decided to offset the top let corners of the fish image and fish name. With just a few simple margin and padding changes, this was possible.

div.card {float: left; width: 45%; margin: 1em 2% 0 2%;}
div.card img {float: left; position: relative; z-index: 10;
  margin: 4px 0 0 0; border: 1px solid #339;}
div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px;
  border: 1px solid #339; border-left: 5px double #339; 
  background: #EEC url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;}

Note how the image is pushed downward four pixels, while the h3 is pushed rightward four pixels. At the same time, the heading's padding was set to that it had 150 pixels of left padding. Thus, the text starts 159 pixels from the leftmost edge of the card (4px left margin plus 5px left border plus 150px left padding). Since all the fish images are 150 pixels wide, that's a good interval between image and text.

The last thing to do was style the paragraphs of text in each card. In most cases, there is only one paragraph per card, but a few have two. Therefore, I just added a half-em margins on card paragraphs, and then changed the left margin to be 160px, which makes sure the text in the paragraphs won't wrap under the floated images. This is desirable for the cases where only one word would wrap under an image. It's better to keep the text as if it's in a column of its own.

div.card {float: left; width: 45%; margin: 1em 2% 0 2%;}
div.card img {float: left; position: relative; z-index: 10;
  margin: 4px 0 0 0; border: 1px solid #339;}
div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px;
  border: 1px solid #339; border-left: 5px double #339; 
  background: #EEC url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;}
div.card p {margin: 0.5em 0.5em 0.5em 160px;}

And voila! The cards are done.

Conclusion

Redesigning a classic is something like being asked to revise Moby Dick for modern audiences: you're thrilled at the opportunity, but afraid of doing injustice to the original. I'd like to think that the final result was in keeping with the original spirit of the Amazing Netscape Fish Cam page while giving it a nice new CSS-driven look.

- FIN. -

Related Links

• The Amazing Netscape Fish Cam Page