Buggy CSS for an HTML table

I'm new to HTML and CSS, I thought that I could ask you to help me figure out a problem that I'm having.

OK, now for the specifics.

I'm using the following code: http://snipplr.com/view/50733/buggy-css-for-an-html-table-example/.

Basically, it's an HTML table styled with with some CSS. I'm using the collapse thingy to make the borders 1 px, BTW.

However, 5 weird problems pop up when I view the end result in Firefox and Chrome:

I can't seem to make the table the size that I want. The overall size should be 688x27 px (with the padding and borders), but in Firefox and Chrome the size isn't as intended (I suspect that my code is wrong...). It's displayed as 688x29px!
For some weird reason I also can't limit the overall size of some cells to what I want. This refers to 3 cells which only contain an image inside of them (the ones with the following classes: .td-bluebg, .td-description, .td-collapse). The images' sizes are 25x25, 26x25 and 25x25px respectively. I just want them to stay in their table cells, without any padding, and be surrounded by the 1px table border. For the .td-bluebg cell and the entire table there are extra 2px at the bottom (see problem 1.), which can easily be spotted in Chrome (I'm trying to find a way to get rid of them).
I've managed to put together a simple "image on mouse hover" effect on the "?" icon (in the cell with the .td-bluebg class). However, the hover image shows 2px apart from the table border. Is it possible to place the hover image just 1px apart from the table border? I've tried to do that, but alas, with no luck. My attempts at finding a solution almost broke the entire styling at one point, but I restored an older version of the CSS code for the hover effect and placed some unnecessary CSS declarations in /* */ comment brackets at random, and that helped me revert that mistake. So, how will you go about making the on-hover shown image just 1px apart from the table border?
I can't seem to set the cell size of .td-collapse to what I want... it just stretches to the end of the table, instead of staying at its end and with the size that is intended... fix?
In the current code I've declared:
```
table.gridtable1 td {
border-color: #219DEC; /* AnimeRulezzz blue */
border-style: solid;
border-width: 0px;
```
If I want to go back to the 1px border for individual cells (td's), is there a way to hide either the left and/or right borders of some individual cells if that option is declared as (i.e. if I set table.gridtable1 td {border-width: 1px;})?

P.S. Sorry for the spaghetti code, as I said, I'm a total newbie. ^_^;

Solution

Let's see.

Remember that margin, padding, border and several other CSS properties will increase your physical width and height. So they will add to your width and height properties, if you have specified them.

To limit the size of cells, I recommend you use CSS to make sure your browser isn't using it's own default CSS properties. Assign margin, padding, etc properties for your cells to make sure there isn't any extra styling.

Use background-position and related background properties to fine tune your style. w3 schools has great tutorials for CSS and the background properties.

For the collapsing cell, check if you have correctly set the height CSS property. The <table> and <td> elements may require you to specify a height property in the HTML. I dropped tables for divs, I recommend you do the same.

You can specify specific border properties for each side of the element with border-left, border-right, etc. The shorthand property goes like border:1px 2px 3px 2px which means border:top right bottom left. Check the w3 schools website for more info about it.

Feel free to comment if I've missed something out :)

Edit: Personally I didn't like the example you linked to, since it was really long :\ it is easier if you give us your HTML page (with CSS) without all of the large blocks of comments and content. Just the simple HTML and CSS.