Webmaster Forum / HTML, CSS, Scripts / CSS / February 2007

Your problems are much much more than this. Starting with your
font-size at 0.65em. Please read:

<http://www.htmldog.com/guides/htmlbeginner/>

That white gap is a function of several collapsed margins-- the top
margin of the h6 inside #footer, the top margin of #footer (which is
zero), the bottom margin of #content (also zero) and the bottom margin
of the last <p> in #content.

You can get rid of it by setting margin-top:0 on h6, and
padding-bottom:1px on #content.

That way the <p>s margin is still there, but stays inside #content.

You could use the same trick with #footer: give it 1px of top padding,
but then your h6 overflows it (since you've set a height on #footer).

Finally instead of bottom padding on #content you could add
style="margin-bottom: 0" to the last <p> inside it, but that would make
the <p> end rather abruptly before the footer.

[...]

Don't know why that should be.

A few suggestions, though you may be already aware of them.

FF has DOM inspector under the tools menu.  I think this may
be an option when you install FF.  If you don't have it,
reinstall FF and request this be installed.

The DOM inspector lets you look at the DOM hierarchy. If the
DOM inspector & your web page are both visible, clicking on
an element in the DOM inspector causes the web page to flash
a border around the element you have clicked.

A drop down menu on the right side of the DOM inspector lets
you examine the CSS rules - both browser and author
settings, and where (which files) the rules are located.

It's a great tool.

Another feature of FF is the JS console.  Open another tab
and use this URL

chrome://global/content/console.xul

The JS console reports javascript and CSS errors as you load
different web pages.  You can often click on an error and
the console takes you to the line where the error occurred.

I'm always amazed at the CSS and javascript errors that are
reported on major websites.  As an example, go to Google
news and then look at the JS console after.

My third suggestion has to do with the way the CSS rules
are defined.  There are 3 common ways.

1) a separate external stylesheet - the one you're familiar
with.

2) embedding CSS rules within a style tag in the header like so:

<style type="text/css">
<!--
BODY { font-family: sans-serif; font-size: 10pt }
-->
</style>

3) creating a rule within the element declaration itself.
This usually overrides previous CSS rules established
elsewhere.  An example ...

<div class="whatever" style="border:thin dotted navy">
blah blah blah
</div>

The last method is a great diagnostic technique for actually
'seeing' the margins and padding that are being applied to a
block element.  I will often use different colors for block
elements that contain other block elements.

Another advantage of the last method is its immediacy (or
specificity).  Let's say that you are creating a table less
web page and you have a rule like this.

DIV.stack  { float: left; clear none }

Suppose that you have 6 divs in a row like this, they all
stack nicely from left to right, like a 1 x 6 table.  But
you want a 2 x 3 layout.

So the 3 div element might look something like this.

<div class="stack" style="clear:left"> ... </div>

So you only have one general rule (a stack class) instead of
two, and you selectively override general rules only when
you need to. Your CSS style sheets will be smaller and
simpler and development will be faster.

Hope this helps.

Cheers
Jim Sontag