More CSS woes :(

[somebody]

http://www.hostforge.net/~bjg/alt.html/

I am trying to design a simple layout with an army feel. So far it's ok, but
i've spent far too long on it already and want to finish it.

The main problem is the gap between the #header and the #content / #navbar.
As soon as I get it aligned up without a gap i'll be happy.

Can someone please help? The code is such a messy hack. Does anyone know of
any good manuals that explain the theory of CSS and "CSS block model" as
someone has pointed out to me before. I still have the <table> layout idea
in my head it seems.

Thanks in advance.

 

[David Graham]

http://www.hostforge.net/~bjg/alt.html/

I am trying to design a simple layout with an army feel. So far it's ok,
but i've spent far too long on it already and want to finish it.

The main problem is the gap between the #header and the #content /
#navbar. As soon as I get it aligned up without a gap i'll be happy.

Can someone please help? The code is such a messy hack. Does anyone know
of any good manuals that explain the theory of CSS and "CSS block model"
as someone has pointed out to me before. I still have the <table> layout
idea in my head it seems.

Thanks in advance.

Is the css below creating the gap?

#header {

padding-bottom: 1px;
}

If not try margin-bottom: 0; on the header div a bit like you have
margin-top: 0 for the footer div

HTH
David

 

[somebody]

Is the css below creating the gap?

#header {

padding-bottom: 1px;
}

If not try margin-bottom: 0; on the header div a bit like you have
margin-top: 0 for the footer div

Nup, still there :/

 

[Toby A Inkster]

http://www.hostforge.net/~bjg/alt.html/

The main problem is the gap between the #header and the #content / #navbar.
As soon as I get it aligned up without a gap i'll be happy.

I can't see any gap. (Opera 7.23)

 

[Lauri Raittila]

I can't see any gap. (Opera 7.23)

I can with O7.5p1.

img {display:block}

or

img {vertical-align:bottom;}

will cure that. The reason there is cap is that image is inline element,
and so positioned to baseline of line-box.

 

[kathy painter]

http://www.hostforge.net/~bjg/alt.html/

The code is such a messy hack.

Yes, you do have a code problem. The biggest is that you have combined
doctypes 4.01 and xhtml. Because of that you cannot validate your document.
(i.e., 4.01=<br>, xhtml=<br />. The header changes with each, too. Decide
which you will be using and a reference is:
http://www.alistapart.com/articles/doctype/.

Does anyone know of any good manuals that explain the theory of CSS and

"CSS block model" as
Perhaps http://www.brainjar.com/css/positioning/ this might help with
positioning. Or, Google your way. There are so many online tutorials for CSS
and block models. Eric Meyer http://www.meyerweb.com/eric/css/ is my
favorite since he wrote the book and offers classes.

Clean up your html and you'll be in a lot better shape. Before you clean it
up, you have to establish correct doctype (don't forget spelling, i.e.,
"lucinda"), then run it through a validator and you should be on your way to
seeing your errors. If you need more help, please ask.

Good luck.
Kathy

 

[kathy painter]

kathy wrote: (don't forget spelling, i.e.,"lucinda"),

ooooops. looks like i'm a dufus. i spelled the lucinda wrong. i apologize!
kathy