6 replies [Last post]
EdAROC
Offline
Regular
Rochester NY USA
Last seen: 18 years 51 weeks ago
Rochester NY USA
Joined: 2003-12-10
Posts: 19
Points: 0

Gosh darn it. I really tried to figure out what was causing the problem. I want y'all to be proud of me and yourselves - all the guidance, tips and advise you've given me.

asburyfirstumc.org

Why is there so much space above and below the text? My goal is to have minimum space, but, enough to create a natural visual separation from the main content. (It's amazing how the eyes/brain work.)

Any other tips on the website are welcome - be forewarned that not all the pages have been DIVvied up yet. (And once I get them DIVvied up the submenus will be converted from a table to css lists.)

TIA,
Ed

Life is a party...
Sometimes you host
Sometimes you're the guest

blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 19 years 34 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

Help! My footer <DIV> is too high!

Have you gone through this article. It may help answer your question
http://www.alistapart.com/articles/footers/

-bMs-
http//www.blakems.com !important;

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Help! My footer <DIV> is too high!

Hi

It doesn't matter how many times I say this, someone still asks Cool Cool

Most block elements have default padding and/or margin. The text is sitting in unstyled paragraphs (<p>fagfsdf</p>).

Either give them a class, or style the p itself, e.g.

p{margin:0} will close the gap entirely

The default for p is about 1em, so to halve the gap:

p{margin:.5em 0} will put half an em top and bottom, and squish the text up a bit

div similarly has a default, and h1 and so on, just beware (think, does this have a default and should I zero it for the whole page, like this:

html,body,p,div,img,h1,h2,h3,ul,li,dl,dd,dt {
margin:0;
padding:0;
border:0;
}

Trevor

EdAROC
Offline
Regular
Rochester NY USA
Last seen: 18 years 51 weeks ago
Rochester NY USA
Joined: 2003-12-10
Posts: 19
Points: 0

Help! My footer &lt;DIV&gt; is too high!

Both of you - thanks.

Blakems - ala is more information for me to learn.

Trevor - DARN! I was afraid of that. That was the first thing that came to mind, but, I thought the DIV margins were inherited. Thought maybe the <P> spacing, least the leading blank line. I did search "browser defaults" (and combinations and a few other variations, i.e. css, both here and google) - couldn't find anything.

My biggest problem with learning solutions is that it is scattered all over the internet and finding examples and tutorials is so time consuming and not a science (i.e. browser defaults did not turn up any sights that listed them, much less list them. W3C school provides technical information, but, not as a reference that I find to be expedient. I do have two HTML books, "HTML Complete" / Sybex and "HTML for The World Wide Web" / Visual Quick Study, Castro.

Is there a book you would recommend? One that breaks things down? The resource types I need most are:
1. Reference list, i.e. http://webquestpro.com/css.htm
2. Examples - i.e. The church's website is set to 760px wide, but I can't find the example coding for centering it. (I know it's somewhere on this forum!)

Thanks again,
Ed

Life is a party...
Sometimes you host
Sometimes you're the guest

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Help! My footer &lt;DIV&gt; is too high!

Hi

IE has to be in standards mode (ie with a valid doctype).

Chances are that you have a design with a page container. You can center it all with something like this:

body{
text-align:center;
min-width:760px;
}
#container {
text-align:left;
margin-left:auto;
margin-right:auto;
width:760px;
}

In quirks mode IE will not inherit the centering of the body to the container, but in Standards mode it will, so add text-align:left; in the container to re-set it.

Trevor

EdAROC
Offline
Regular
Rochester NY USA
Last seen: 18 years 51 weeks ago
Rochester NY USA
Joined: 2003-12-10
Posts: 19
Points: 0

Help! My footer &lt;DIV&gt; is too high!

Hi Trevor,

Thanks for the code to center the page.

I have the webpages in Transitional mode - too many pages are not converted (there are over 70 pages on the site), so I'm using Transitional until then.

Save me a little time please - does your code mean I want to "wrap" everything in a <DIV id="container">? I put the width: 760px; in the body selector.

[I realize that this means multiple passes to "upgrade", but, wanted to get the design change (and up to date content) in place ASAP; then clean up the code. First pass got the "DOCTYPE and <HEAD>ing established. 2nd pass was to get design (pages with table based submenus, prepare for the div's, and content up to date. 3rd pass is DIVing up the pages - creating the DIVs I defined in the css, which is where I am now. 4th pass will be to remove frames and include DIVs for Banner and Nav bar. Phew! Smile Once that is done I will convert my own website!]

Life is a party...
Sometimes you host
Sometimes you're the guest

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Help! My footer &lt;DIV&gt; is too high!

Hi

IF you don't have the whole page inside a div, then yes.

IF you DO have the whole page in a div, but it isn't called container, just use that div instead.

It's always a good idea to put the page into a container. Makes all sorts of issues easier to handle. (YET another undocumented design tip)

Trevor
[Edit 500 posts in 3 months :twisted: :twisted: :twisted: ]