Border extends to undesired elements; incorrect menu display (background image).

[cosmo_canuck]

Hi all!

I'm a web designer who's valiantly struggling, with occasional moments
of triumph, to build my first fully CSS site. Hope that you can answer
a couple of quick newbie questions.

Page: http://adamabrams.com/tnd/spaprofits/hometest.html
CSS: http://adamabrams.com/tnd/spaprofits/voknew.css

Two issues right now:

1) The border around the photo-collage (set in the #headimages style)
wraps around the menu and content elements which are below it. Thus the
double-thick border. Yet these two are not within the #headimages tag
on the page.

2) The menu: I'm edging closer to my desired menu which will also work
in IE 5 on the Mac. My previous attempt looks how I want it to in
Safari (but breaks in IE). But I can't get the rollover background
(white with a black bar) to appear, and the text isn't centered. Both
of these were the case in my previous version here:

Page: http://www.adamabrams.com/tnd/spaprofits/index.html
CSS: http://www.adamabrams.com/tnd/spaprofits/vok-new.css

Can someone point me in the right direction? Feels like I'm so close...

Thanks!
Adam

[Beauregard T. Shagnasty]

cosmo_canuck wrote:

Hi all!

I'm a web designer who's valiantly struggling, with occasional moments
of triumph, to build my first fully CSS site. Hope that you can answer
a couple of quick newbie questions.

Page: http://adamabrams.com/tnd/spaprofits/hometest.html
CSS: http://adamabrams.com/tnd/spaprofits/voknew.css
If this is a new design, why is it using a Transitional doctype? That's
for legacy pages; you should use Strict.
Two issues right now:

1) The border around the photo-collage (set in the #headimages style)
wraps around the menu and content elements which are below it. Thus the
double-thick border. Yet these two are not within the #headimages tag
on the page.
In Firefox 1.0.7 and in Opera 8.5, I don't see that.
2) The menu: I'm edging closer to my desired menu which will also work
in IE 5 on the Mac. My previous attempt looks how I want it to in
Safari (but breaks in IE). But I can't get the rollover background
(white with a black bar) to appear, and the text isn't centered. Both
of these were the case in my previous version here:

No Mac here, sorry.

While we're here, why are you setting the font to 80% of my desired
size? body {font: 0.8125em ...
That should be 100%. And I've never had to mess with line-height in any
normal situations. Leave it out.

The topphoto.jpg is slightly mis-sized in the HTML. Causes it to jump
around a bit while scrolling.

Is that a US phone number?

Is that you on the 404 page? :-)

--
-bts
-Warning: I brake for lawn deer

[cosmo_canuck]

Thanks for the advice, bts. Coming back to the page, I see now that
one of the DIV tags wasn't properly closed. Should have seen that right
away - there were certainly enough clues. Guess it's good to just walk
away for a little while!

Mainly concerned now with the menu and why I was able to get "full
height" of white on rollover in the earlier version, but not the
current one. But I'll keep plugging away on that one.

As for your last 2 questions - it's a B.C. (Canada) phone number... and
yes, that's me on the error page!

Thanks,
Adam