473,796 Members | 2,664 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

A one px height difference on one column?

70 New Member
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 1888
drhowarddrfine
7,435 Recognized Expert Expert
Please use code tags.

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

I am however still scratching my head on the column height.
Jan 3 '08 #3
Christopera
70 New Member
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 Recognized Expert Expert
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
Christopera
70 New Member
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
Christopera
70 New Member
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
6360
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 height but I don't want to use absolute positioning. I want the height to be determined by the height of the longest column. I've defined the columns using inline <span> elements surrounding the column content. All works fine except the height.
2
23008
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 guidance would be appreciated. To summarize, I would like to have a variable-width, 100% height, left-floating column. However, it seems as though with Mozilla/Netscape that height: 100% is not interpreted as I would
3
6626
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 styles: div.test { background-color:red; height:100%; width: 100%; } table.test { border: 1px solid #CCCCCC; background-color:yellow; } td.test { border: 1px solid #CCCCCC; }
1
1724
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 display at all like I would like it to. I want the column height to expand to the contents of either column. Instead, since I guess the browser does not know the height of the IFrame column, it is the height of column 1 that determines the height. ...
0
2007
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 rowspan of 4 (see http://72.3.212.120/Example1.html). The first three cells in the left column will contain content, as will the one cell in the right column. The fourth cell in the left column is only there to take up the slack in case the content...
0
3592
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 attempts is here: http://www.nrkn.com/3ColRoundAlpha/ It shows a bunch of different methods that I tried. You'll see that not only is there a hell of a lot of nesting of divs, but the page is very slow to load because there are a lot of image...
6
4780
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: 100px;height=100%;background-color: red">
2
3489
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, fixed-width top section which is just a graphic - a fixed-width _variable_height middle section which contains two columns, an index on the left and main content on the right - a fixed-length, fixed-width bottom section which is mostly a graphic...
3
6221
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 field though). I've got a subform set up the way I like in datasheet view and I don't want to allow the user to adjust either parameter. Along the same lines, is it possible to eliminate the appearance of the little drop down arrow next to...
0
9685
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9533
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10239
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10019
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7555
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6796
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5447
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
3736
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2928
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.