Height Spacing Issues

Hi everyone - me again. After TREMENDOUS help from some posts here, I have managed to understand a lot more than I ever expected. Back to a place where I am confused and I don't know why.

I have two links:

http://jafferyacademy.org/index-beta.php
http://jafferyacademy.org/aboutjaffery.php

The first is the main/index page. The second is a page that will be similar to the rest of the site.

My query is as follows:

1. The spacing if you notice, for example on the "UPCOMING EVENTS" section is greater in height in the page aboutjaffery.php than in the index.php page. I prefer it to be as it is in the index page - what is causing the spacing to expand?

2. By switching back and forth between the two pages, the alignment of the text is slightly higher in the second page than in the index page. I cannot figure out why.

The codes are as follows in regards to the specific question in (1) and (2) above:



/* CSS Document */

/* ---------------- BODY ATTRIBUTES ---------------- */

body {
font-family: arial, hevetica, sans-serif;
font-size:12px;
color:#666666;
background-color:#ffffff;
line-height:1.5em;
}

/* ---------------- pagelayout ---------------- */

/*.row1 {
width:100%;
color: #0a5a0a;
height: 150px;
}
.row2 {
width:100%;
background-color:#FFFFFF;
color: #ffffff;
}
.row3 {
background-color:#FFFFFF;
color: #ffffff;
height:300px;
}
.row4 {
background-color: #ffffff;
color: #0a5a0a;
border-top:thin #ffffff solid;
height:75px;
}

/* ---------------- typography ---------------- */

a:link {
color:#cfcfcf;
text-decoration:none;
}
a:visited {
color:#cfcfcf;
text-decoration:none;
}
a:hover {
color:#669900;
text-decoration:none;
cursor:pointer;
}
a:active {
color:#999999;
text-decoration:none;
}

/* ---------------- page ----------------

#container {
width:1100px;
margin:auto;
} */

/* ---------------- LOG-IN AREA ONLY ---------------- */

#loginbox {
position:relative;
margin:auto;
width:100%; /* formerly 100% */
height:25px;
display:block;
background-color:#333333;
}

#login {
top:5px;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#Ffffcc;
position:relative;
width:1080px;
margin:auto;
text-align:right;
}

/* ---------------- HEADER AREA ONLY ---------------- */

#headerbox {
position:relative;
margin:auto;
width:100%; /* formerly 100% */
height:125px;
display:block;
background-color:#56731d;
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0a5a0a, endColorstr=#669900);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0a5a0a), to(#669900)); */
}

#header {
position:relative;
width:1100px;
height:auto; /* orig 130 */
top:10px;
margin-left:auto;
margin-right:auto;
}

#header .logo {
position:absolute;
left:10px;
top:-5px;
}

#header .link {
position:absolute;
right:10px;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#F5f5f5;
}

#header .title {
position:absolute;
top:30px;
float:right;
right:10px;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
color:#F5f5f5;
}

/* ---------------- NAVIGATION SECTION ---------------- */

#navbar {
z-index:100;
width:100%;
height:auto;
margin:auto;
position:relative;
background-color:#99978d;
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5f5f5f, endColorstr=#2b3033);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5f5f5f), to(#2b3033)); */
}

#navbar .menu {
width:1100px;
margin-left:auto;
margin-right:auto;
}

/* ---------------- SPACER ---------------- */

div.spacer {
height:1px;
color:#FFFFFF;
display:block;
overflow:auto;
}

/* ---------------- MAIN PAGE / INFO SECTION ---------------- */

#containerrow {
/* position:relative;
margin:auto;
display:block; */
width:100%; /* formerly 100% */
background-color:#ffffff;
z-index:-2;
clear:both;
}

#container {
z-index:1;
position:relative;
width:1100px;
margin:auto;
padding-top:25px;
overflow:auto;
font-family: arial, hevetica, sans-serif;
font-size:12px;
color:#666666;
line-height:1.5em;
min-height:300px;
border-bottom:none;
background-color:#FFFFFF;
/* line-height:1.5em;
position:relative;
width:1102px;
margin-left:auto;
margin-right:auto;
padding-top:25px;
font-family: arial, hevetica, sans-serif;
font-size:12px;
color:#666666;
background-color:#ffffff;

-moz-box-shadow:0px 3px 10px 5px #999999; /*left offset, top offset, blur, spread, color
-webkit-box-shadow:0px 3px 10px 5px #999999;
box-shadow:0px 3px 10px 5px #999999; */
}

#content {
width:630px;
float:left;
padding:10px;
}

#contentright {
width:430px;
float:right;
padding:10px;
}

/*
#contentright .menuboxes {
position:relative;
width:100%;
} */

/* ---------------- FOOTER ----------------

div.spacer {
clear:both;
height:0px;
display:block;
}

div.stripe {
height:10px;
width:100%;
border-bottom:1px solid #370045 #ffffff;
border-top:1px solid #ffffff;
background-image:-moz-linear-gradient(#d5d5d5, #000000);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d5d5d5), to(#000000));
filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#d5d5d5, endColorstr=#000000);
}
*/

#bottomcontainer {
clear:both;
position:relative;
width:100%px;
padding-top:25px;
background-color:#7c823a;
border-top:thick #333333 solid;

/* background-image:-moz-linear-gradient(#669900, #0a5a0a);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#669900), to(#0a5a0a));
filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#669900, endColorstr=#0a5a0a); */
}

.footer {
position:relative;
width:100%;
margin:auto;
padding-top:20px;
height:75px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
text-align:center;
}

/* ---------------- FONTS ---------------- */

.maintitle {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color:#333333;
line-height:1.5em;
}

/* ---------------- GENERAL ---------------- */

.myimage-left {
margin:4px;
float:left;
}

.myimage-right {
margin:4px;
float:right;
}

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#999999;
font-stretch:semi-condensed;
line-height:1.5em;
}


and for the evens query, the css code is:



/* ---------------- EVENTS SECTION ---------------- */

#events {
margin:auto;
line-height:1.2em;
width:400px;
padding:10px;
margin-bottom:25px;
background-color:#F7F7F7;
}

#events .header {
height:30px;
font-family:Arial, Helvetica, sans-serif;
color:#99978d;
font-size:36px;
font-weight:bold;
border-bottom:#666666 solid thin;
}

#eventsbox {
width:390px;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
padding-top:5px;
padding-bottom:5px;
border-bottom:#CCCCCC thin solid;
padding-left:10px;
overflow:auto;
}

#events .date {
color:#56731d;
font-weight:bold;
font-size:13px;
margin-bottom:10px;
}

#events .month {
font-size:14px;
color:#857b3b;
font-weight:bold;
}

#eventsbox.opacity {
opacity: 0.7;
filter: alpha(opacity=70);
-webkit-transition: opacity 1s linear;
}

#eventsbox.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
background-color:#e3e3e3;
-webkit-transition: opacity 1s linear;
}

#eventsbox .intro: {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#999999;
margin-bottom:10px;
margin-left:150px;
}



2.

I suspect that a part of your problem might be related with your measurement units: you are using much too often the em instead of px.

em is a relative measurement unit, and it is always related with the first parent, up on the DOM tree, which happens to have an absolute measurement unit defined. Moreover, it is relative to a certain font-size defined within one of those parents.

This is the reason for em is to be used carefully and, anyway, only to set the font-size, not the line-height, size, distances, etc.

Thanks! I will rectify that at work tomorrow and see what happens. Sometimes the tutorials online can be confusing ! :)

Hello Kor - so I tried removing all the line-heights.

The result is disastrous - please see http://jafferyacademy.org/index-beta.php and notice that the header lines of some sections go through the text - this did not happen before.

The previous link I gave you did not change, but the lines are in place: http://jafferyacademy.org/aboutjaffery.php

Where am I going wrong - again?!

> news.css, line: 1
the problem with setting a line-height to the body, is that it will be the same for all text that you didn't override with line-height. take this out


body {
line-height: 1.2em;
}


> indexicons.css, line: 11
to fix the index: take height: 30px; out


#icons .header {
height:30px;
width:400px;
font-family:Arial, Helvetica, sans-serif;
color:#99978d;
font-size:36px;
font-weight:bold;
border-bottom:#666666 solid thin;
}


also notice that you never reset, or setting all default margins and paddings to 0
therefore your <p> has an automatic margin on the top and bottom of 1em

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-118.png

most developers reset all tags with


* {
margin: 0;
padding: 0;
}

Thanks Sammy - so when you you put


* {
margin: 0;
padding: 0;
}


(and pardon my ignorance in this), are you saying that its a good practice to reset margins, and if so, how do I apply that reset for subsequent p tags?

* {
margin: 0;
padding: 0;
}


this will reset ALL tags. So <div>, <h1>, <p>, <a>, everything will have no margins and paddings. This way you can control what gets margins and paddings yourself

Sammy - my paragraph spacing doesn't work on this site:

http://mombasajamaat.org/index-beta.php

code is as follows:


/* ---------------- general ---------------- */

body {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-size:12px;
margin: 0;
padding: 0;
}
h1 {
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
}
h2 {
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
}

/* ---------------- typography ---------------- */

a:link {
color:#666666;
text-decoration:none;
}
a:visited {
color:#666666;
text-decoration:none; }
a:hover {
color:#FF3300;
text-decoration:none; }
a:active {
color:#666666;
text-decoration:none; }

/* ---------------- topbar for messages, twitter, facebook, and linkedIn ---------------- */

#topbar {
position:relative;
width:100%;
height:45px;
display:block;
background:#181e5a;
}

#topbarbox {
top:10px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
position:relative;
width:1100px;
margin:auto;
text-align:left;
background:#181e5a;
}

/* ---------------- HEADER SECTION ---------------- */

#headerwrapper {
height:200px;
width:100%;
margin:auto;
border-bottom:#181e5a thick solid;
background-image:-moz-linear-gradient(#d5d5d5, #ffffff);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d5d5d5), to(#ffffff));
filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#d5d5d5, endColorstr=#ffffff);
}

#header {
position:relative;
width:1100px;
height:200px;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#CCCCCC;
background-image:url(../img/header_bg.png);
background-repeat:no-repeat;
background-position:center;
}

#header .menu {
float:right;
right:20px;
top:40px;
}

#header .headerbox {
position:relative;
width:1100px;
margin:auto;
}

.logo {
position:absolute;
left:20px;
top:20px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:30px;
color:#181e5a;
}

.logofontsmall {
font-size:24px;
font-variant:small-caps;
font-stretch:extra-expanded;
color:#666666;
}

/* ---------------- MAIN PAGE / CONTENT ---------------- */

#bodywrapper {
width:100%;
background-color:#FFFFFF;
}

#content {
width:1100px;
background-color:#FFFFFF;
margin:auto;
text-align:left;
overflow:auto;
-moz-box-shadow:0px 20px 20px #d5d5d5;
-webkit-box-shadow:0px 20px 20px #d5d5d5;
box-shadow:0px 20px 20px #d5d5d5;
}

#contentright {
width:820px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
float:right;
text-align:justify;
padding:15px 10px 25px 20px;
}

#contentleft {
width:240px;
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
float:left;
margin:auto;
padding:15px 5px 25px 5px;
}

/* ---------------- FOOTER ---------------- */

div.stripe{
height:10px;
border-bottom:1px solid #/*370045*/ffffff;
border-top:1px solid #ffffff;
background-color:#181e5a;
/* background-image:-moz-linear-gradient(#181e5a, #500000);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#181e5a), to(#500000));
filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#181e5a, endColorstr=#500000); */
}

#footer {
clear:both;
padding-top:3px;
height:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
text-align:center;
background-color:#444444;
}

/* ---------------- MY BOXES MENU ---------------- */

#mybox {
position:relative;
width:230px;
min-height:110px;
color:#666666;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-top:10px;
background:url(../img/box-bottom-divider.png) top center no-repeat;
}

#mybox .title {
position:relative;
font-family:Arial, Helvetica, sans-serif;
text-indent:10px;
top:50%;
color:#181e5a;
font-size:18px;
margin-bottom:10px;
margin-top:20px;
/* border:#CCCCCC thin solid;
-moz-border-radius: 10px 20px 2px 6px;
-webkit-border-radius: 10px 20px 2px 6px;
border-radius: 10px 20px 2px 6px; */
}

.myboximg{
padding-right:10px;
float:left;
}

/* ---------------- EVENTS SIDE BOX ----------------- */

#upcomingevents {
margin:auto;
width:230px;
padding:5px;
}

#eventsbox {
width:220px;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
border-bottom:#CCCCCC thin solid;
padding-top:5px;
padding-bottom:5px;
}

#upcomingevents .date {
color:#181e5a;
font-weight:bold;
font-size:10px;
margin-left:10px;
}

#upcomingevents .event {
color:#666666;
font-size:12px;
margin-left:10px;
}

#eventsbox:hover {
background-color: #C5C5C5;
color:#FFFFFF;
}

/* ---------------- general ---------------- */

.myimage-left {
margin:0px 10px 25px 10px;
float:left;
}

.myimage-right {
margin:0px 10px 25px 10px;
float:right;
}

.header1 {
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
margin-bottom:10px;
}

.header2 {
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
margin-bottom:10px;
}

.header3 {
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:17px;
margin-bottom:10px;
}

.divider{
border-top: #999999 solid thin;
}

/* ---------------- committee box ----------------- */

#committee-box {
margin:25px 0 0 25px;
line-height:175%;
}

#committee-box .title {
font-family:"Trebuchet MS";
font-size:12px;
text-align:right;
padding-right:10px;
width:200px;
float:left;
}

#committee-box .name {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
padding-left:10px;
width:200px;
float:left;
}

#committee-box .contact {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
padding-left:10px;
width:150px;
float:left;
}

.center {
text-align:center;
margin:auto;


Can you kindly let me know whats wrong? This beats me and I've tried going through everything!

I think you either removed the file or moved it, because I'm getting a 404 not found!

Sorry about that. We launched it yesterday and so its now www.mombasajamaat.org

The spacing you see between paragraphs is only because I added <br />, which of course should not be the case. Without the tag, it does not space out into paragraph form but just goes to the next line.

That is caused by the removal of margins and paddings from


* {
margin: 0;
padding: 0;
}


that was the whole point of this code ^ that I gave you
default margins and paddings are different between browsers, that's why it's best that you set them yourself for every aspect of your page.

try setting your own margins and paddings!


#contentright p {
margin-bottom: 10px;
}


<br /> is redundant, since we do everything in css... I hope :thumbsup:
a <br /> is just space right? isn't that what a margin is?

Thanks Sammy - every question I ask is answered and makes sense - a great forum!