Table Troubles

[alfredo]

I have one column of cells acting up on this site.

http://home.infionline.net/%7Earm3/wheatpasteindex.html

Only one thumbnail is acting up.

I have played around with it for a while but that first column wants to be wider than the ones to the right.

I am using NVU.

[Xithras]

1. I didn't notice a rendering problem in IE6

I did notice, looking at your code, that your application of styles is inconsistent. Some cells have widths applied, others don't. I can see where that could make it render differently in different browsers. If you want to fix the site, start with that.

Of course, my suggestion would be to use CSS and scrap the tables entirely. You could wrap all of your images in a single DIV tag, set a single margin on the img tag at the head of your file, and get the same look with a third of the code and none of the cellspacing hassles.

[Xithras]

2. Follow-up, example code

Here's a demo of what I'm talking about. In the head of your document, you would place this code:

<style type="text/css">
<!--
.imageholder { width: 768px; text-align: center; margin: 0 auto; }
img { margin: 15px 10px 15px 10px; }
-->
</style>

In the body, you'd do something like this:

<div class="imageholder">
<a href="http://home.infionline.net/%7Earm3/images/ArrogantX4.gi f"><img border=0 alt="Arrogant.gif" src="http://home.infionline.net/%7Earm3/images/Arrogantx4tn.gi f"></a>
<a href="http://home.infionline.net/%7Earm3/images/ArrogantX4.gi f"><img border=0 alt="Arrogant.gif" src="http://home.infionline.net/%7Earm3/images/Arrogantx4tn.gi f"></a>
<a href="http://home.infionline.net/%7Earm3/images/ArrogantX4.gi f"><img border=0 alt="Arrogant.gif" src="http://home.infionline.net/%7Earm3/images/Arrogantx4tn.gi f"></a>
<a href="http://home.infionline.net/%7Earm3/images/ArrogantX4.gi f"><img border=0 alt="Arrogant.gif" src="http://home.infionline.net/%7Earm3/images/Arrogantx4tn.gi f"></a>
<Br>
<a href="http://home.infionline.net/%7Earm3/images/ArrogantX4.gi f"><img border=0 alt="Arrogant.gif" src="http://home.infionline.net/%7Earm3/images/Arrogantx4tn.gi f"></a>
<a href="http://home.infionline.net/%7Earm3/images/ArrogantX4.gi f"><img border=0 alt="Arrogant.gif" src="http://home.infionline.net/%7Earm3/images/Arrogantx4tn.gi f"></a>
<a href="http://home.infionline.net/%7Earm3/images/ArrogantX4.gi f"><img border=0 alt="Arrogant.gif" src="http://home.infionline.net/%7Earm3/images/Arrogantx4tn.gi f"></a>
<a href="http://home.infionline.net/%7Earm3/images/ArrogantX4.gi f"><img border=0 alt="Arrogant.gif" src="http://home.infionline.net/%7Earm3/images/Arrogantx4tn.gi f"></a>
</div>

Basically just the image and link, no CSS required. In fact, the only positioning code required at ALL is the <BR> tag to tell the browser where to start the next row. No tables, no catches, and it should work equally well in all browsers. To adjust the spacing between the images, just play with the margin values for the IMG tag.

[alfredo]

3. I have never worked with CSS before.

I guess I could start soon.

The problem I am having is that the tables will not be the same. The rendering is OK as is, but the left column is 170, the next 165, then 164,163. Going percentage didn't help.

I guess it is time to learn how to use CSS.

I guess it will be a weekend of tinkering.


Thanks

[Xithras]

4. That's why CSS is so useful

Rather than creating tables of a certain width, dropping your links in, and hoping that it renders right, CSS allows you to simply specify the exact distance you want between the images. It's a greater level of control.

As for tinkering, you shouldn't have to do much to the code I wrote to use it. You just need to paste in the header code as-is, and wrap your images in the DIV tags. No other CSS knowledge required :)

[alfredo]

5. I have made a copy of my page to play with.

I will give it a try.


OK, now I see it. I will transfer the links over to the new code.

Thanks.