CSS help?

[Noozer]

I've got a few questions regarding the layout of a page I'm developing...

http://www.csd.ca/test/

In Internet Explorer the page doesn't seem too bad, but I've a couple
questions:
- If the window isn't open wide enough the DIVs at the right side of the
screen move down below the menu. How can I stop this?
- The table in the final section (labelled "This") doesn't fill the full
width of the DIV. Specifying a width of 100% causes the container DIV to
slip under the left menu. How can I make the table fill the DIV?
- In the left menu, what CSS can I use to highlight the complete line of
each LI element when the mouse hovers? If I make it a block element I get a
blank line after each element. If I don't make it a block then only the text
is highlighted, not the entire line. In my sample, the purple ITEMS area has
the <A> tags as block elements to show what I mean - noticed the blank
lines.

Finally, checking the page in Firefox 0.9.3 I notice two problems...
- The three DIV's on the right side appear to go under the left menu DIV,
except that the text is aligned directly against the left menu.
- The Category DIV that appears properly in IE with an orange background
seems to get ignored and falls within the DIV containing the entire left
menu.

....Any suggestions to correct these issues? Any general comments?

Thanks!

 

[brucie]

In alt.html Noozer said:

I've got a few questions regarding the layout of a page I'm developing...
http://www.csd.ca/test/

http://validator.w3.org/check?uri=http://www.csd.ca/test/
http://jigsaw.w3.org/css-validator/validator?uri=http://www.csd.ca/test/&warning=1&profile=css2
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you.html

 

[Noozer]

In alt.html Noozer said:

http://jigsaw.w3.org/css-validator/validator?uri=http://www.csd.ca/test/&warning=1&profile=css2
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you.html

First of all, it's a mockup.

I don't expect it to pass validation.

 

[brucie]

In alt.html Noozer said:

First of all, it's a mockup.
I don't expect it to pass validation.

then don't expect it to work.

HAND

 

[Eric Bohlman]

First of all, it's a mockup.

I don't expect it to pass validation.

If you want other people to help you with a page, they'll be *much* more
willing if you've already done the "grunt work" to get rid of anything that
could be an obvious cause of problems. That means, among other things,
having a machine do anything a machine can do to spot potential problems
rather than expecting the other people to act like machines.

Cross-browser CSS compatibility is tricky enough to achieve when you're
dealing with valid code. It's a *great* deal harder to achieve when you've
got invalid code, because every browser "fixes" the invalid code a bit
differently. In fact, it's so much harder that nobody who's at all
familiar with CSS (which is to say the only people who could help you) is
going to be willing to try it, at least not unless you pay them a great
deal of money or supply them with other things of value. It's just not
worth their effort. Trying to debug CSS applied to invalid HTML is like
banging your head against a wall.

Once you've adopted the right habits, there is *no* extra work involved in
making even the smallest bit of HTML and/or CSS pass validation! Doing it
right the first time involves *less* work than doing it sloppy and then
cleaning it up. It's really a matter of attitude more than anything else;
if you think of writing valid markup as a chore to be done grudgingly,
you're just going to make the task of Web development unpleasant for
yourself. That's your right, but then you can't expect others to
participate in the unpleasantry. If you think of writing valid markup as
the way you always write markup, then after a few days (at most) of
possible frustration while you're learning, the task becomes a lot more
fun.

 

[Noozer]

In alt.html Noozer said:


then don't expect it to work.

There... It passes...

 

[Noozer]

If you want other people to help you with a page, they'll be *much* more
willing if you've already done the "grunt work" to get rid of anything that
could be an obvious cause of problems. That means, among other things,
having a machine do anything a machine can do to spot potential problems
rather than expecting the other people to act like machines.

Cross-browser CSS compatibility is tricky enough to achieve when you're
dealing with valid code. It's a *great* deal harder to achieve when you've
got invalid code, because every browser "fixes" the invalid code a bit
differently. In fact, it's so much harder that nobody who's at all
familiar with CSS (which is to say the only people who could help you) is
going to be willing to try it, at least not unless you pay them a great
deal of money or supply them with other things of value. It's just not
worth their effort. Trying to debug CSS applied to invalid HTML is like
banging your head against a wall.

Once you've adopted the right habits, there is *no* extra work involved in
making even the smallest bit of HTML and/or CSS pass validation! Doing it
right the first time involves *less* work than doing it sloppy and then
cleaning it up. It's really a matter of attitude more than anything else;
if you think of writing valid markup as a chore to be done grudgingly,
you're just going to make the task of Web development unpleasant for
yourself. That's your right, but then you can't expect others to
participate in the unpleasantry. If you think of writing valid markup as
the way you always write markup, then after a few days (at most) of
possible frustration while you're learning, the task becomes a lot more
fun.

I inherited a bunch of this, so I'm still trying to clean it up... I didn't
realize that the DOCTYPE made such a big difference, for example -
especially with that invalid space before "DOCTYPE".

.... the test page as it stands now validates fine but still has issues.

- Now the Categories DIV doesn't work in IE or in Firefox. I have no idea
why this happens.

- The three results sections don't appear to the right of the menu. I assume
it's because they are set for 100% width, which won't fit with anything else
on the same row as they are. How to I tell them to fill the remaining space
to the right of the menu. If the window is too narrow I'd like them to
scroll off the right side.

- I'd like to highlight the complete line in the menu, instead of behind the
text. (Items section is using block elements - but then I get blank lines).
I've tried chaning the <A> or the <LI> elements to block elements but I get
blanks lines between each item.

- I'd like the table in the "This" result section to fill sections width.

I'm not asking anyone to write my code... just looking for pointers.

Thanks