Critique and a Mysterious 4px gap

[memco]

I've been working on a new design of ktlw.org, which can be seen at http://www.ktlw.org/revamp.html. I would like help figuring out why the table on the right sidebar to "Write your legislators" has two 4px gaps in there. I think it's coming from the fact that the table cells the top and bottom image are in are 4px taller than they need to be, but I've given an explicit height and there should be no margins, padding or border. I tried to crunch it down into a background image on a form just below the table version, but I haven't gotten that to display right either.

In addition, I'd just like to get some feedback on the design; do the colors work, layout, what possible improvements, etc.

Thanks.

 

[angelwatt]

There seem to be 2 forms with the id of state_promo. Both forms have the same action, but different contents. I would go through there and make it one form. Also, in case you didn't know, you can only use a id value once per page.

 

[memco]

I mentioned I made a duplicate in my first post. I changed the IDs, which will hopefully clear up the confusion. The version on top is one that came directly from the promoter in a horrid 90s style table layout (unnecessarily nested in another table when I got it). This version has two unnecessary black bars around the middle section that I cannot eliminate.

The one on bottom is marked up more correctly, but gives me different problems. I can't find a reliable way to get the textfield and button to sit 20px from the top and to the right of the building (82px). Margins are ineffective. Firefox adds an extra 20px, IE won't put them on the same line.

 

[angelwatt]

That duplicate part didn't read very clear, but that's fine. I took the form and isolated it to work with. Here's the necessary pieces of CSS that you need. You'll need to work with the selectors so it only applies to the parts you want it to.

td {
 padding: 0; /* you already have this part */
}
img, input {
 display: block; /* this */
 vertical-align: middle; /* or this */
}

 

[memco]

Thanks so much Angelwatt, the display:block worked out nicely. All of my major problems are solved now and I can move on to cleaning up font tags...