Frustrating gap between leftmenu div and onecolbody div

[Isaac Grover]

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?

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.

The template document is at http://www.amstructural.net/prototype/template.html
and the external stylesheet is at http://www.amstructural.net/prototype/layout.css
..

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.

Thank you in advance,

 

[John Hosking]

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 Hosking]

John Hosking wrote (without paying enough attention):

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

^^^^^^^^^^
should be twocolbody (copy-and-paste-forget-to-edit error)

 

[John Hosking]

John Hosking wrote (using a newsreader with a mind of its own):

John Hosking wrote (without paying enough attention):

^^^^^^^^^^
should be twocolbody

(copy-and-paste-forget-to-edit error)

Thunderbid uses different wrapping for editing than it does when
posting. I hope my intended meanin is now clear, despite my best efforts
(and no matter how this last post turns out).

 

[Isaac Grover]

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

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

Hi John,

Thanks for the tip to avoid the onecolbody,twocolbody construct. It
was silly of me thinking that the overall conciseness of CSS would not
allow for such a convenience.

Trickier than it ought to be. Take a pilgrimage over tohttp://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).

That's quite a read. Throughout this site, the longest column on one
page is not necessarily the longest column on all pages. Is there a
way to do a "universal" padding-bottom/margin-bottom combination to
accommodate for varying column lengths on all pages? In my brief
experiments, this doesn't seem possible. I ask because the left
vertical bar looks fine in FF2, but comes up short in IE6. Take a
look: http://www.amstructural.net/prototype/template.html .

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

On the to-do list for tomorrow.

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.

All valid questions. I picked up the code from
http://homepage.ntlworld.com/bobosola/png_mouseover.htm , and I have
tried loading it from an external file to no avail. And I am not a
Javascript programmer so I am not going to take the time to make it
work.

Though that leads to a question that may open up another discussion.
I started using PNGs many years ago when Compuserve was threatening
legal action against GIF creators, and always hated the kludge of
pngswap.js but loved the transparency of PNGs. If I start using GIFs
again, am I to be concerned of legal troubles with Compuserve?

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.

This layout will not be changing with the exception of content updates
periodically, so I'm thinking that my naming conventions will work for
now. Also, many of my client's sites are just as static and some have
multiple menus, so I could do "mainmenu", "submenu", etc. but naming
them after position makes more sense to me. And the .italic, .bold,
etc. classes were residue from a previous layout. You wouldn't
suggest using the "style: font-weight: bold;" in the HTML would you?
Doing so would seem to me like going back in time to the old "font
face" days.

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?

Yes, that was part of the design. Couldn't you tell? =)

That error came from an earlier img definition where I included some
padding. It has been resolved.