Help! Inline Menu w/Padding Exceding DIV Container

I've been reading old posts and Googling all nite for solutions to my
problems, but I can't find any. I appreciate any help you can provide.

Here is the link to the problem web site:

http://fmp.freac.fsu.edu/Timeline/

These are the problems I can't solve:

- The padded list elements are taller than the containing div (note
the dark gray bar at the right). How can I fix this?

- The last list element (the red part) creates the right side of the
menu. It is supposed to stretch all the way to the right edge. How
can I do this?

- In Firefox, there is a 1 pixel space between the list indexes for
"Florida Photographic Collection" and "Online Classroom". I know these
problems are usually solved by removing newlines and other whitespace
characters, but I already have. How can I remove this?


If any of you wise people can advise me on how to fix some or all of
these issues, I promise to name my first-born child after you!

If I can't fix this, I'm gonna have to do it all in tables with spacer
gif's and javascript. Yuk!

Thanks!

-peter

I'm still messing with the page, so here is safe copy that will allow
you to see the problem without my ongoing debuggin and testing:

http://fmp.freac.fsu.edu/Timeline/sample.cfm

Thanks again!

-peter

google (AT) warcode (DOT) com wrote:

Here is the link to the problem web site:

http://fmp.freac.fsu.edu/Timeline/

So I see - let me guess: Dreamweaver?

These are the problems I can't solve:

[snip problems]

I saw more problems than you just mentioned.
How about you first get a valid document?
Meaning: start with a doctype, then get to the html, and put the
stylebits into the head. Check with the validator before you post the
URL again - it's no use trying to find your errors when the basics are
already wrong.

If any of you wise people can advise me on how to fix some or all of
these issues, I promise to name my first-born child after you!

No need for such promises..

If I can't fix this, I'm gonna have to do it all in tables with spacer
gif's and javascript. Yuk!

No need for such threats either ;-)
(You already carried out the table part of the threat anyway)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

google (AT) warcode (DOT) com wrote:

I'm still messing with the page, so here is safe copy that will allow
you to see the problem without my ongoing debuggin and testing:

http://fmp.freac.fsu.edu/Timeline/sample.cfm

It isn't any better than the first URL - still the same problems (I
don't mean the ones you mentioned).


--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Depending on when you looked at it, it shouldn't have looked any
different.

Anyway, here is the sample page again, but now I have stripped out all
but the problematic code:

http://fmp.freac.fsu.edu/Timeline/sample.cfm

I should have done this in the first place - sorry!

Thanks again for any help you can offer.

-peter

OK, I believe I've solved most of my problems now. Check out this
additional sample page to see how far I've gotten:

http://fmp.freac.fsu.edu/Timeline/sample2.cfm

How do I make the red part stretch all the way to the right?

No width tricks seem to work. I'm wondering if the solution is to
actually the float the menu to the left of a new DIV that will contain
the red area with the white line underneath.

Any thoughts?

Thanks!

-peter

Oh and I still have that 1 pixel gap between the "Florida Photographic
Collection" and "Online Classroom" menu items.

-peter

I appreciate you looking at my page 3 times, but I'm a bit confused by
your comments.

First of all, I am able to view source in both Firefox and Internet
Explorer. What browser are you using?

Second, according to the W3C CSS Validator, my page does validate:

http://jigsaw.w3.org/css-validator/v...ne/sample2.cfm

Thanks for your help!

-peter

google (AT) warcode (DOT) com wrote:

I appreciate you looking at my page 3 times, but I'm a bit confused by
your comments.

:-(

First of all, I am able to view source in both Firefox and Internet
Explorer. What browser are you using?

An older version of Firefox. I was looking at sample.cfm, not
sample2.cfm btw, not sure if that makes any difference.

Second, according to the W3C CSS Validator, my page does validate:

http://jigsaw.w3.org/css-validator/v...ne/sample2.cfm

It validates as CSS! That's only the style part of your document.
I'm talking HTML. Without a doctype, all kinds of problems may arise,
so please use this validator to validate the HTML:
http://validator.w3.org/


--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

You know you can upgrade Firefox for free, right? Not sure why you're
giving advice to people on web stuff when you're not using a current
browser.

Anyway, the page now validates as valid html and the same problems are
still there:

http://fmp.freac.fsu.edu/Timeline/sample2.cfm

Are you ready to start making suggestions to fix my problems yet?

Thanks for all your help!

-peter