PDA

View Full Version : go away cellspacing



Blaher
Apr 5th, 2007, 07:57 PM
I feel dumb asking this, but it's just one of those little simple things you can't find.

I'm rewriting a template I made a while ago and using tables instead of placing things with coordinates.
I only have a little bit done, but I've already ran into problems.

http://blahertech.dnsalias.net/_dev/index.php

The outside boarder images are having somewhat of a cell spacing but I made sure to turn the boarders, margins, and cell spacings off in my CSS file: http://blahertech.dnsalias.net/_dev/templates/index.css

I just can't figure out why it's still spacing the images apart, I'm getting frustrated over something that should be so simple to find. I've check it in Firefox, I don't know if it does the same in other browsers.

I would be very thankful if anyone can tell me what to do, or if there's a reason for this.

koyama
Apr 5th, 2007, 09:27 PM
I'm rewriting a template I made a while ago and using tables instead of placing things with coordinates.

First of all, I wouldn't recommend using tables for layout. I would say a better option is to use floated divs for layout. Take a look at some of the tutorials in the sticky section.

I just can't figure out why it's still spacing the images apart, I'm getting frustrated over something that should be so simple to find.
If you still want to proceed with table layout, there are 2 reasons why you are seing white gaps.

(1)
You should eliminate spacing between cells. You can easily do this for all browsers using <table cellspacing="0">. The CSS way of doing it is using table {border-spacing: 0}, but IE7 still does not support this property. Instead you can use table {border-collapse: collapse} which would be equivalent in your case.

(2)
Even after doing 1, you will still see white gaps coming from descenders. Read more about this here: Images, Tables, and Mysterious Gaps (http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps). The article explains the correct method to deal with this, which is to use img {display: block} for your slices, or alternatively img {vertical-align: bottom}.

Actually, in Firefox you won't be affected by these problem as long as you don't use a strict doctype. Since you are using a transitional doctype, Firefox renders your page in Almost Standards Mode and will deliberately not show the gaps.

For IE not to show gaps, you can remove whitespace around your img tags in source.
Instead of this,


<td style="width:992px;">
<img width='992px' height='62px' src="./images/bottom.gif" alt="Bottom bar of the background" />
</td>

do like this:


<td style="width:992px;"><img width='992px' height='62px' src="./images/bottom.gif" alt="Bottom bar of the background" /></td>

Anyway, I recommed using one of the correct methods that I mentioned above.

nexosis
Apr 5th, 2007, 11:40 PM
use the top:,right:,left:,or bottom: properties.
I suggest using Bluevoda (http://bluevoda.com) as your HTML editor when doing those. They support it.