Block doesn't "expand" and borders not quite right

[Wayfarer]

Could some maven (shameless flattery) here take a look at the following
site and help me with two problems:

1. When zooming in, <div id="banner"> is the *only* block that doesn't
"expand" to fit the text & image. I thought height: auto would work,
but it didn't.

2. Viewed in Firefox, Netscape and Opera, the borders for each menu
selection don't go all the way across (you'll see what I mean, I hope),
though it looks OK to me in IE 6.

The page to test is at http://wayfarer.brinkster.net/wcts/index.htm, CSS
is at http://wayfarer.brinkster.net/wcts/wcts.css. Only this page and
the CSS have been validated.

TIA

Neill

 

[David Dorward]

1. When zooming in, <div id="banner"> is the *only* block that doesn't
"expand" to fit the text & image. I thought height: auto would work,
but it didn't.

It has height: 260px, not height: auto. When I give it height: auto, it does
expand.

2. Viewed in Firefox, Netscape and Opera, the borders for each menu
selection don't go all the way across (you'll see what I mean, I hope),
though it looks OK to me in IE 6.

You have an <li> with a width of 155px then you put an <a> element inside it
with width 155px + padding and borders. Reduce the width of the <a> to fit.
Listamatic has copy/paste code for styling lists of links.

<http://css.maxdesign.com.au/listamatic/>