[WEB4LIB] CSS and line spacing problem

[Kevin Bishop]

-----Original Message-----
Subject: [WEB4LIB] CSS and line spacing problem 

I'm trying to convert the template for our library web page from being
table
based in design to CSS.  So far I've met with success except for one
little
problem, I can't get the body (the right side of the page) to display
correctly in Mozilla based browsers.  Rather than lining up with the top
of
the nav bar on the left, the text drops down about three lines.  This
does
not happen in IE.  I suspect that I've made a mistake somewhere in the
style
sheet that's affecting the header tags, but I can't find it. If I remove
the
header, regardless of whether it's h1, h2, h3 or h4, the text lines up
correctly.

The URL for the page is http://librdata.utep.edu/testlibrary/test.cfm
and
the style sheet is http://librdata.utep.edu/testlibrary/libraryweb1.css.
If
any of the CSS specialists out there can help I would really appreciate
it.
--------------------------

Hi Lisa,

I'm glad to see one more library has the courage and foresightedness to
use CSS for presentational effects, rather than mixing it with structure
in the markup.  Congratulations!

Let me give you a few suggestions.  First: validate validate validate.
CSS in today's browsers is much more reliable when both the HTML and the
CSS conform to web standards.  The W3C recently updated its validator:
http://validator.w3.org/  (It also makes it much easier for you to
solicit help from others when everything validates.)

If you had a valid DTD (the "doctype" tag), IE would switch from quirks
mode to standards mode and (supposedly) display your work in the same
fashion as any other standards compliant browser (Mozilla is a good
example).  I suspect the difference you see between the 2 browsers
(although I'm not seeing it) may have something to do with IE's quirks
mode.  

Second, since your nav bar at the top, the piece you'd like to align
flush to the bottom of your header (if I understand what you want),
consists of a series or a list of links, make them just that: a list.
Most navigation of this type could be structured as a list and then
styled accordingly.  See Listamatic for inspiration:
http://www.listamatic.com/

Next, play with the "margin" and "padding" properties for the elements
in question.  If the nav bar doesn't align flush when defining those
elements with zero (0) padding and/or margins, try using negative
margins (but never negative padding).  

Let us know how it goes.  And feel free to contact me off-list if you
have further questions.  

Cheers,
-kb

___________________________
Kevin W. Bishop > bishopk at rpi.edu
Communication & Collaboration Technologies
Rensselaer Polytechnic Institute > http://www.rpi.edu/
  RPInfo: http://www.rpi.edu/rpinfo/