By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,807 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

A one px height difference on one column?

P: 70
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:

Expand|Select|Wrap|Line Numbers
  1. body { background-color: #000;
  2.     margin: 10px 0px 0px 0px; }
  3. h1 { font-size: 15px; }
  4. #block_1 { width: 800px;
  5.     height: 125px;
  6.     border-width: 0px;
  7.     color: #FFF;
  8.     margin: 0px auto 0px auto;
  9.     background-image:url('../images/newtopheader.jpg'); }
  10. #navigation_block { width: 760px;
  11.     border-width: 0px;
  12.     color: #e20b0b;
  13.     margin: 0px auto 3px auto;
  14.     padding: 3px 2px 3px 2px;
  15.     height: 14px;
  16.     text-align: center; }    
  17. #block_2 { width: 800px;
  18.     height: auto;
  19.     border-width: 0px;
  20.     margin: 0px auto 0px auto;
  21.     background-color: #000;
  22.     color: #FFF;
  23.     background-image: url('../images/');
  24.     background-repeat: no-repeat;
  25.     background-position: bottom;
  26.     padding: 0px; }
  27. #jwrsymbol { position: absolute;
  28.     margin: 29px 0px 0px 37px;
  29.     border: 0px; }    
  30. #overlay { position: absolute;
  31.     margin: 14px 0px 0px 534px;
  32.     color: #000;
  33.     text-wrap: nowrap;
  34.     width: 200px; }
  35. #mailbox { position: absolute;
  36.     margin: 92px 0px 0px 625px; }
  37. #team { position: absolute;
  38.     margin: 96px 0px 0px 485px;
  39.     border: 0px; }
  40. #left_column, #center_column, #right_column { 
  41.     height: 300px;
  42.     border: 1px solid #e20b0b;
  43.     background-color: #eeeeee;
  44.     background-position: top right;
  45.     background-repeat: no-repeat;
  46.     color: #000;
  47.     padding: 2px 5px 5px 5px;}
  48. #left_column { float: left;
  49.     margin: 1px 0px 2px 0px;
  50.     width: 194px;
  51.     background-image: url('../images/upwardarrow.gif'); }
  52. #center_column { float: left;
  53.     margin: 1px 2px 1px 2px;
  54.     width: 407px;
  55.     background-image: url('../images/decoration.gif');
  56.     background-position: bottom right; }
  57. #right_column {
  58.     width: 159px;
  59.     margin: 1px 0px 0px 629px;
  60.     background-image: url('../images/accent.gif');}
  61. #footer { height: 20px;
  62.     width: 800 px;
  63.     clear: left;
  64.     text-align: center;
  65.     margin: 0px 0px 0px 0px;
  66.     background-image: url('../images/bodybottom.jpg');
  67.     background-repeat: no-repeat;
  68.     background-position: bottom;
  69.     border-width: 1px 0px 0px 0px;
  70.     border-style: solid;
  71.     border-color: #e20b0b; }
  72. #emailform {
  73.     width: 200px;}
  74. .indent {
  75.     width: auto;
  76.     padding-left: 5px;
  77.     margin-top: 2px; }
  78. input {
  79.     background: #ffff99;
  80.     widt: 200px;
  81.     text-wrap: none; }
Jan 3 '08 #1
Share this Question
Share on Google+
6 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Please use code tags.

Your html validates but you must validate your CSS also.
Jan 3 '08 #2

P: 70
All CSS errors are now fixed.

I am however still scratching my head on the column height.
Jan 3 '08 #3

P: 70
New CSS is as follows:

Expand|Select|Wrap|Line Numbers
  1.  
  2. body { background-color: #000;
  3.     margin: 10px 0px 0px 0px; }
  4. h1 { font-size: 15px; }
  5. #block_1 { width: 800px;
  6.     height: 125px;
  7.     border-width: 0px;
  8.     color: #FFF;
  9.     margin: 0px auto 0px auto;
  10.     background-image:url('../images/newtopheader.jpg'); }
  11. #navigation_block { width: 760px;
  12.     border-width: 0px;
  13.     color: #e20b0b;
  14.     margin: 0px auto 3px auto;
  15.     padding: 3px 2px 3px 2px;
  16.     height: 14px;
  17.     text-align: center; }    
  18. #block_2 { width: 800px;
  19.     height: auto;
  20.     border-width: 0px;
  21.     margin: 0px auto 0px auto;
  22.     background-color: #000;
  23.     color: #FFF;
  24.     background-image: url('../images/');
  25.     background-repeat: no-repeat;
  26.     background-position: bottom;
  27.     padding: 0px; }
  28. #jwrsymbol { position: absolute;
  29.     margin: 29px 0px 0px 37px;
  30.     border: 0px; }    
  31. #overlay { position: absolute;
  32.     margin: 14px 0px 0px 534px;
  33.     color: #000;
  34.     width: 200px; }
  35. #mailbox { position: absolute;
  36.     margin: 92px 0px 0px 625px; }
  37. #team { position: absolute;
  38.     margin: 96px 0px 0px 485px;
  39.     border: 0px; }
  40. #left_column, #center_column, #right_column { 
  41.     height: 300px;
  42.     border: 1px solid #e20b0b;
  43.     background-color: #eeeeee;
  44.     background-position: top right;
  45.     background-repeat: no-repeat;
  46.     color: #000;
  47.     padding: 2px 5px 5px 5px;}
  48. #left_column { float: left;
  49.     margin: 1px 0px 2px 0px;
  50.     width: 194px;
  51.     background-image: url('../images/upwardarrow.gif'); }
  52. #center_column { float: left;
  53.     margin: 1px 2px 1px 2px;
  54.     width: 407px;
  55.     background-image: url('../images/decoration.gif');
  56.     background-position: bottom right; }
  57. #right_column {
  58.     width: 159px;
  59.     margin: 1px 0px 0px 629px;
  60.     background-image: url('../images/accent.gif');}
  61. #footer { height: 20px;
  62.     width: 800px;
  63.     clear: left;
  64.     text-align: center;
  65.     margin: 0px 0px 0px 0px;
  66.     background-image: url('../images/bodybottom.jpg');
  67.     background-repeat: no-repeat;
  68.     background-position: bottom;
  69.     border-width: 1px 0px 0px 0px;
  70.     border-style: solid;
  71.     border-color: #e20b0b; }
  72. #emailform {
  73.     width: 200px;}
  74. .indent {
  75.     width: auto;
  76.     padding-left: 5px;
  77.     margin-top: 2px; }
  78. input {
  79.     background: #ffff99;}
  80.  
Jan 3 '08 #4

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jan 3 '08 #5

P: 70
I added the div .highlight to the third column and found no difference. I also removed them completely again with no change.
Jan 3 '08 #6

P: 70
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.
Jan 3 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.