Posted by John Hosking on 09/05/07 01:32

Isaac Grover wrote:
> Good afternoon from Wisconsin,
>
> The pressing issue is that there is a gap between my leftmenu div and
> my onecolbody div, verified both visually and with the aardvark plugin
> in FF2. This gap can also be seen in IE6. Where is the gap coming
> from?

From your stylesheet, of course. Look closely at this ruleset:

#onecolbody,twocolbody ul {
margin-left: 1.5em;
padding: 8px; }

You ask for a left margin for elements with id="onecolbody" and it looks
like you also want it to apply to ul elements which are descendants of
elements with id="onecolbody". In fact, I bet you wanted the margin to
apply to *ul* elements which are descendants of #onecolbody.

Well, there's no ul following the #onecolbody, so you get the margin to
the left of #onecolbody, providing the space you don't want to the right
of the menu. And you're missing the "#" (or possibly the ".", if you
wanted a class) in front of the twocolbody, so no ul gets that margin.

Note also #onecolbody,twocolbody img { margin: 0px; } .

>
> The not-so pressing issue is how do I create full-length columns in my
> layout? Ideally, I want the black vertical bars to be a border-right
> in my leftmenu div and a border-left in my rightcontent div to keep
> the onecolbody and twocolbody divs clean of that mess. The background
> image in my leftmenu div is certainly long enough to fill the entire
> vertical space, but it's only as long as there is content to fill
> space.

Trickier than it ought to be. Take a pilgrimage over to
http://www.positioniseverything.net/articles/onetruelayout/ (to move
forward with the discussion you will have to look for the semi-hidden
"Next (Any Order Columns)" link just above the Footnotes).

>
> The template document is at http://www.amstructural.net/prototype/template.html
> .
>
> As is true Usenet style, I encourage you to rip into my habits and
> tendencies as I'm sure I'm developing some bad ones. And any
> assistance, advice or suggestions would be appreciated.

Um, okay: Change your doctype to HTML 4.01 strict to avoid Quirks mode,
and then validate your code at http://validator.w3.org/ .

Do you really need that much JS just to handle PNG transparency in IE?

Why not move whatever JS you do need into an external file?

I don't think you need the language="JavaScript", or the comment
delimiters around the JS.

You might want to get in the habit of naming classes for their function
(semantic importance) rather than their current styling (positioning or
formatting). Instead of "leftmenu" use "menu" and then style "menu"
anyway you want it: on the left now, on the right next month, at the top
six weeks later... Get rid of the .italic, .bold, .center, etc. classes.

You didn't ask about it, so I'm not sure you've noticed it, so: are you
happy with the way the building-metal-frame.jpg (really #rightcontent)
flops decadently out of the lower-right corner of the page?

--
John
Pondering the value of the UIP: http://improve-usenet.org/

[Back to original message]