I'm trying to get away from using multiple rollover images by simply using two background images for a: and a:hover, respectively. I would also like to have a small border separating the links. This has caused a few problems, however:

1. A small gap appears below the nav bar, even if I set #nav height to a certain value (e.g. 16 pixels - the height of the background image)

2. During the rollover, the a:hover background image shifts to just below the a: background image

3. I can't seem to get the text to vertically align in the middle of the image; it stays on the bottom.

4. I set a small, 1-pixel white right border for each list item, but is there a way to eliminate it after the last item? Or do I have to set a class for this one item?

Here are the links:

http://www.diamondpackaging.com/green/diamond8b.htm
http://www.diamondpackaging.com/green/diamond8b.css

For one, the problem lies in your choice of font sizing. It is not a good idea to use units such as small medium and large. Use percentages or em units and you'll get better results.

I changed the font-size in your body rules to 70% and the text aligned better and the ugly gap disappeared.

LadynRed,

Thanks for the tip. Changing the body font-size to 100% and adjusting the other DIVs also fixed a small gap in Firefox.

So if I'm understanding correctly, a font size can "force" a DIV open just as it does in tables?

Apparently "vertical-align: top" does not move the text up. The only way I found to move the text up was by using bottom padding. And this only worked if the font size was small enough or if the DIV was tall enough. Otherwise, adding padding (or too much padding) caused a gap below the nav bar.

Here is the new code:
http://www.diamondpackaging.com/green/diamond8b.htm
http://www.diamondpackaging.com/green/diamond8b.css

a font size can "force" a DIV open just as it does in tables?

Yes, provided you have text inside it. Also be aware that both browsers will make room for the decendent parts of some letters, IE is notorious for this.

Apparently "vertical-align: top" does not move the text up.

Vertical-align doesn't work the same in CSS as it does in tables. Padding is the correct way to adjust spacing.

Wilbury, quick question..

Whats the font that you used within your header graphic?

Thanks in advance.

b0081,

I used Swis721 LtEx BT bold 32pt for "Diamond's greenbox initiative" and
Swis721 ExBT bold 12pt for "Eco-friendly".

Wilbury