Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Exclamation 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:


    Code:
    /* 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:

    Code:
    /* ---------------- 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.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    Last edited by Kor; 11-21-2011 at 09:27 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    mnkhaki (11-21-2011)

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks! I will rectify that at work tomorrow and see what happens. Sometimes the tutorials online can be confusing !

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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?!

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    > 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

    Code:
    body {
       line-height: 1.2em;
    }
    > indexicons.css, line: 11
    to fix the index: take height: 30px; out

    Code:
    #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



    most developers reset all tags with

    Code:
    * {
       margin: 0;
       padding: 0;
    }
    Last edited by Sammy12; 11-21-2011 at 05:03 AM.

  • Users who have thanked Sammy12 for this post:

    mnkhaki (11-21-2011)

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks Sammy - so when you you put

    Code:
    * {
       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?

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    * { 
      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

  • Users who have thanked Sammy12 for this post:

    mnkhaki (11-22-2011)

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Sammy - my paragraph spacing doesn't work on this site:

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

    code is as follows:

    Code:
    /* ---------------- 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!

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I think you either removed the file or moved it, because I'm getting a 404 not found!

  • #10
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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.

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    That is caused by the removal of margins and paddings from

    Code:
    * {
       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!

    Code:
    #contentright p {
       margin-bottom: 10px;
    }
    <br /> is redundant, since we do everything in css... I hope
    a <br /> is just space right? isn't that what a margin is?

  • #12
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks Sammy - every question I ask is answered and makes sense - a great forum!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •