473,320 Members | 2,147 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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:

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
6 1853
drhowarddrfine
7,435 Expert 4TB
Please use code tags.

Your html validates but you must validate your CSS also.
Jan 3 '08 #2
All CSS errors are now fixed.

I am however still scratching my head on the column height.
Jan 3 '08 #3
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
7,435 Expert 4TB
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
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.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

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

Similar topics

2
by: zing | last post by:
Hello, I want to define n columns that appear with specific background colors, different to the body background (i.e. so you can see the area they occupy). I want the columns to be of the same...
2
by: patrick h. | last post by:
Greetings, I am encountering some issues regarding using float while desiring to set the height to 100%. This is likely due to my own misunderstanding of the way things actually function -- any...
3
by: Lamberti Fabrizio | last post by:
I've got the problem described in the table above. I've put a div red with some text inside a TD, but its height is less than 100% of TD height as you can see. I've defined the following...
1
by: Steve Richter | last post by:
I have a simple table with two columns. The first column contains 5 lines of text. The second column contains an iFrame. The iFrame in turn contains a web page. The problem is it does not...
0
by: gferris | last post by:
Hello, I am having an issue with a table that I cannot quite figure out. I have a two-column table with the left column comprising of 4 cells and the right column comprising of one cell with a...
0
by: Nik Coughlin | last post by:
Something that I've been trying to do for a long time is a 3 column layout where all three columns have equal height, and have rounded corners implemented using PNGs with alpha. One of my early...
6
by: Jeff | last post by:
Nearly identical post in alt.www.webmaster, where it is languishing. I'd like a column that flows the full height of a page, even if you scroll down. If I did this: <div style="width:...
2
by: rhino | last post by:
I'm working on a layout that has a variable-height middle section and need some suggestions on how I can make the bottom section adapt to that situation. Basically, I have: - a fixed-length,...
3
by: Gord | last post by:
If possible, how can the user be prevented from adjusting the column width and/or the row height in datasheet view (in VB code if necessary)? (I still want them to be able edit the contents of the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.