Hi, I've been having some problems with a design.

http://www.thewarbirdquartet.com/test/ - Webpage
http://www.thewarbirdquartet.com/test/style.css - style.css

So essentially, my problem is the small space....possibly padding, between each of the four table cells on the bottom half of the page. Its inheriting the light background picture from the body, which I need for the leftmost table cell.

My prototype, what it SHOULD look like, is http://www.thewarbirdquartet.com/tes...irdwebsite.jpg

I keep setting all my paddings and margins to 0px (as you can see in the .css file), but its not doing anyhting about that space. I tried making a div for that bottom half, with a background of the blue color, and then just setting the leftmost table cell/div to have the light checkered border, but then I got an ugly blue border, and it was misaligned with the other checkered borders on the page.

Thus, I think my best option, if its possible, is to find some way to get rid of that small space between those table cells. Does anyone have any idea how to do that?

First of all you should clean up your source code, run it through a validator and fix the problems. http://w3c.validator.org/

Next you should not display/write code like this:

<td>
  I've done a newline and a tab.
</td>

It's poor and bad programming and not recommended by W3C and has weird browser effects.

You should do

<td>This has no white-spacing apart from the spaces it requires</td>

Writing your code like that can sometimes fix those problems you're experiencing. If you want to know why it causes problems and why you can't do it this way for readability, then the answer is how browsers handle space collapsing. This only applies to inline and table cell elements (possibly more), does not affect block level as they have a different way of handling white spacing and space collapsing, which probably started the bad programming for inline and table cell elements.

If you need an example of space collapsing then this is it (remember all newlines and tabs etc, get converted into single spaces based on rules):

<p><span style="text-decoration: underline">This has a space at the end </span> There's a space before this.</p>

So which space is going to be collapsed? It's the one outside the span, it will be collapsed with the one inside the span, in which that space will now take on the underlining styling, which makes it look wrong.

So just make sure you write your code properly, only block-level elements can you present it like that, but not inline, or table cells.

Cheers,

MC

It is now XHTML 1.0 Transitional validated.

Wow, thanks, I didn't know that those spaces affected it in any way.

I think I gathered it from your post, but would it be fine for elements higher on the hierarchy, such as inbetween a <div> and a <table> (or a <table> and a <tr>, or a <tr> and a <td>)? If you look, right now I've taken out all of the unnecessary spaces within the <td></td>, I'm not sure if I have to go any further than that. At least so far, that hasn't fixed the spacing problem. I'm not sure if I have to condense anything else, or if the spaces are caused by soemthing else entirely.

Go after XHTML 1.0 Strict validation instead. XHTML 1.0 Transitional is quite often too loose and causes more browser errors.

I'm seeing coding errors (no width and height tags on your image, for example) that the W3 checker would have caught under XHTML 1.0 Strict.

If you can code to that standard, you won't have it perfect but you'll be a lot closer.

Hey thcsquad,

Sorry for not replying back, well now that you've validated it, it's far better than what I was looking at before.

You do have some priopertary tags in there the <font> tag. Which you should learn the standards way of doing that, also remove the XHTML processing line <?xml version="1.0" encoding="utf-8"?> because this line throws IE into quirks mode (non-standard/compatible mode), it's not really needed as browsers default to that, just because of IE, it's not a good idea to have any comments, or processing lines above the doctype or else you'll get quirks.

Other things I would consider is removing the non-breaking spaces and doing it another way, maybe using an unordered list for those links, then displaying it inline and removing the list-style, and using padding left/right to space them out.

Now I was unable to see your image you supplied of what it should look like, so I'm not sure where to start for that, you haven't said what browser you were using either so again I'm stumped.

I should probably look at your CSS file now, since I've only looked at your HTML.

OK just been looking at your CSS, there's no need to use non-breaking spaces in empty block elements (div's in your HTML), especially if you're styling them for height/width. I think it's still needed for any <td> tags though. Also I noticed a <p> element in your HTML holding a non-breaking space, <p> elements have padding around it by browser defaults, which you might want to remove or use a <div> instead of it.

Cheers,

MC

Well I updated the link to the prototype design, it should work now.

Do you see the lines I'm talking about now?

As for a browser, I'm mainly programming it on Mozilla (in Linux), and it shows up the same way in Konqueror and Opera. I've also viewed it in IE on a Windows machine, and it looks the exact same.

I'll try the things you mentioned to see if they help, thanks.

I still can't view your image, there's EXIF errors, about 263 bytes corrupted and other errors with it. I even tried saving it to my computer and using graphic programs to open it, none were successful.

Well, I'm not sure what your problem maybe, but if you're talking about those bordered like lines around the cells, then all you have to do is:

.contenttable
{
    border-collapse: collapse;
}

Cheers,

MC

Wow, that worked! I didn't know what the border-collapse property meant, so I wouldn't have suspected that would've been it. Thank you!

OK, well I told you what space-collapsing was in the above with the example, it's similar, imagine you've got two elements together with borders, even though you've set borders to 0 it does remove them but still leaves the spacing the border would have taken up, got two border's side by side, border-collapsing basically combines them into one. It's really a strange thing indeed, but more understandable if you're using borders with colour and size, that way you'll see that both borders overlap each other causing the side to look darker. You collapse the border into just 1 border it will appear normal.

Cheers,

MC