Frustrating gap between leftmenu div and onecolbody div

Discussion in 'HTML' started by Isaac Grover, Sep 5, 2007.

  1. Isaac Grover

    Isaac Grover Guest

    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,
    --
    Isaac Grover, Owner
    Quality Computer Services of River Falls, Wisconsin
    Web: http://www.qcs-rf.com
     
    Isaac Grover, Sep 5, 2007
    #1
    1. Advertising

  2. Isaac Grover

    John Hosking Guest

    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/
     
    John Hosking, Sep 5, 2007
    #2
    1. Advertising

  3. Isaac Grover

    John Hosking Guest

    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)

    > apply to *ul* elements which are descendants of #onecolbody.



    --
    John
     
    John Hosking, Sep 5, 2007
    #3
  4. Isaac Grover

    John Hosking Guest

    John Hosking wrote (using a newsreader with a mind of its own):
    > 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".

    ^^^^^^^^^^
    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).

    --
    John
     
    John Hosking, Sep 5, 2007
    #4
  5. Isaac Grover

    Isaac Grover Guest

    On Sep 4, 8:32 pm, John Hosking <>
    wrote:
    > > 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; }


    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.

    --
    Isaac Grover, Owner
    Quality Computer Services of River Falls, Wisconsin
    Web: http://www.qcs-rf.com
     
    Isaac Grover, Sep 5, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kate
    Replies:
    4
    Views:
    652
  2. Kate
    Replies:
    1
    Views:
    458
    Oli Filth
    Feb 19, 2005
  3. the idiot
    Replies:
    2
    Views:
    463
    the idiot
    May 15, 2005
  4. Jeff
    Replies:
    2
    Views:
    638
    dorayme
    Jun 16, 2005
  5. chlori

    Gap in IE, no gap in FF

    chlori, Jan 19, 2006, in forum: HTML
    Replies:
    1
    Views:
    466
    kchayka
    Jan 19, 2006
Loading...

Share This Page