A one px height difference on one column?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Christopera
    New Member
    • Feb 2007
    • 70
    #1

    A one px height difference on one column?

    I built a this sites http://www.ourzeal.com/walko/index.html . If you look closely at the far right column it is about 1 px higher than the other two. The source does validate. I can not however get this column fo level out. Any help would be much appreciated.


    Right click to view source and the CSS looks like this:

    [code=css]
    body { background-color: #000;
    margin: 10px 0px 0px 0px; }
    h1 { font-size: 15px; }
    #block_1 { width: 800px;
    height: 125px;
    border-width: 0px;
    color: #FFF;
    margin: 0px auto 0px auto;
    background-image:url('../images/newtopheader.jp g'); }
    #navigation_blo ck { width: 760px;
    border-width: 0px;
    color: #e20b0b;
    margin: 0px auto 3px auto;
    padding: 3px 2px 3px 2px;
    height: 14px;
    text-align: center; }
    #block_2 { width: 800px;
    height: auto;
    border-width: 0px;
    margin: 0px auto 0px auto;
    background-color: #000;
    color: #FFF;
    background-image: url('../images/');
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 0px; }
    #jwrsymbol { position: absolute;
    margin: 29px 0px 0px 37px;
    border: 0px; }
    #overlay { position: absolute;
    margin: 14px 0px 0px 534px;
    color: #000;
    text-wrap: nowrap;
    width: 200px; }
    #mailbox { position: absolute;
    margin: 92px 0px 0px 625px; }
    #team { position: absolute;
    margin: 96px 0px 0px 485px;
    border: 0px; }
    #left_column, #center_column, #right_column {
    height: 300px;
    border: 1px solid #e20b0b;
    background-color: #eeeeee;
    background-position: top right;
    background-repeat: no-repeat;
    color: #000;
    padding: 2px 5px 5px 5px;}
    #left_column { float: left;
    margin: 1px 0px 2px 0px;
    width: 194px;
    background-image: url('../images/upwardarrow.gif '); }
    #center_column { float: left;
    margin: 1px 2px 1px 2px;
    width: 407px;
    background-image: url('../images/decoration.gif' );
    background-position: bottom right; }
    #right_column {
    width: 159px;
    margin: 1px 0px 0px 629px;
    background-image: url('../images/accent.gif');}
    #footer { height: 20px;
    width: 800 px;
    clear: left;
    text-align: center;
    margin: 0px 0px 0px 0px;
    background-image: url('../images/bodybottom.jpg' );
    background-repeat: no-repeat;
    background-position: bottom;
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: #e20b0b; }
    #emailform {
    width: 200px;}
    .indent {
    width: auto;
    padding-left: 5px;
    margin-top: 2px; }
    input {
    background: #ffff99;
    widt: 200px;
    text-wrap: none; }[/code]
    Last edited by drhowarddrfine; Jan 3 '08, 04:54 AM. Reason: Please use code tags
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Please use code tags.

      Your html validates but you must validate your CSS also.

        Comment

        • Christopera
          New Member
          • Feb 2007
          • 70
          #3
          All CSS errors are now fixed.

          I am however still scratching my head on the column height.

            Comment

            • Christopera
              New Member
              • Feb 2007
              • 70
              #4
              New CSS is as follows:

              Code:
              body { background-color: #000;
	margin: 10px 0px 0px 0px; }
h1 { font-size: 15px; }
#block_1 { width: 800px;
	height: 125px;
	border-width: 0px;
	color: #FFF;
	margin: 0px auto 0px auto;
	background-image:url('../images/newtopheader.jpg'); }
#navigation_block { width: 760px;
	border-width: 0px;
	color: #e20b0b;
	margin: 0px auto 3px auto;
	padding: 3px 2px 3px 2px;
	height: 14px;
	text-align: center; }	
#block_2 { width: 800px;
	height: auto;
	border-width: 0px;
	margin: 0px auto 0px auto;
	background-color: #000;
	color: #FFF;
	background-image: url('../images/');
	background-repeat: no-repeat;
	background-position: bottom;
	padding: 0px; }
#jwrsymbol { position: absolute;
	margin: 29px 0px 0px 37px;
	border: 0px; }	
#overlay { position: absolute;
	margin: 14px 0px 0px 534px;
	color: #000;
	width: 200px; }
#mailbox { position: absolute;
	margin: 92px 0px 0px 625px; }
#team { position: absolute;
	margin: 96px 0px 0px 485px;
	border: 0px; }
#left_column, #center_column, #right_column { 
	height: 300px;
	border: 1px solid #e20b0b;
	background-color: #eeeeee;
	background-position: top right;
	background-repeat: no-repeat;
	color: #000;
	padding: 2px 5px 5px 5px;}
#left_column { float: left;
	margin: 1px 0px 2px 0px;
	width: 194px;
	background-image: url('../images/upwardarrow.gif'); }
#center_column { float: left;
	margin: 1px 2px 1px 2px;
	width: 407px;
	background-image: url('../images/decoration.gif');
	background-position: bottom right; }
#right_column {
	width: 159px;
	margin: 1px 0px 0px 629px;
	background-image: url('../images/accent.gif');}
#footer { height: 20px;
	width: 800px;
	clear: left;
	text-align: center;
	margin: 0px 0px 0px 0px;
	background-image: url('../images/bodybottom.jpg');
	background-repeat: no-repeat;
	background-position: bottom;
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #e20b0b; }
#emailform {
	width: 200px;}
.indent {
	width: auto;
	padding-left: 5px;
	margin-top: 2px; }
input {
	background: #ffff99;}

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  You are using div.highlight in the other columns but not the right one. The top margin of 1px in those is what makes the difference.

                    Comment

                    • Christopera
                      New Member
                      • Feb 2007
                      • 70
                      #6
                      I added the div .highlight to the third column and found no difference. I also removed them completely again with no change.

                        Comment

                        • Christopera
                          New Member
                          • Feb 2007
                          • 70
                          #7
                          P.S. I have tested on OS X Safari, FF, and Opera. I haven't had the chance to get on my windoze box yet.

                            Comment

                            Previous template Next
                            Working...