table different widths in nn4.7 and ie5.5

[davaddavad]

I am using a template made in photoshop. It has been sliced up and put into a table. When viewed in ie the header and data sections are the correct width. When viewed in nn4.7 the data section is smaller than the header as I am using a background img and color this creates a problem. I am wondering how to correct this problem? Is there a browser detector or a hack to fix this or am i making a code error. Thanx Dave <snip>

[edited by: korkus2000 at 7:15 pm (utc) on Jan. 14, 2003]
[edit reason] TOS 21 no specifics please [/edit]

[tedster]

When you talk about the "data" section, do you mean text? If so, that could be the problem. You can't count on browsers to render text at the exact same size, not even if you declare the size in exact pixels.

[davaddavad]

Yes the text area in the table. I havent set any sizes yet. The table is set at a certain width and that is supposed to be the same width as the header image but in nn4.7 the width is less than the header and now the table is smaller than the header? oops not right:)

[tedster]

Yes, Netscape 4 takes some liberties with tables and cell sizes. One trick I've used to force NN4 to keep a minimum width for a table cell is to include a transparent gif, and write the dimensions as 1 pixel high and the exact width I want. That adds a small space, but it forces NN4 to behave.

I can usually make the little bit of extra space look good in a design (I like white space anyway!)

[davaddavad]

I like white space too but I have a bkg image and a background color which now intrude on the white space area.
Where do you add the gif? i tried to use one 1px x 700px to force the interior area larger except it pushed its way to the right instead of going both ways.

[tedster]

pushed its way to the right instead of going both ways

Sounds like something else (a previous <td> most likely) is forcing the start of the cell to be further to the right.

In trying to sort this kind of problem, it can be very helpful to set border="1" temporarily, to see where the browser is putting the cells. That way you can zero in better on why things aren't happening the way you visualize.

Can you use one table to contain the header and the text on different <tr>'s? That might force the two to be the same width. Another idea would be to give the text cell it's own background, so the table backgrounds don't show through.

Tables can be tricky. It can be very helpful to set aside an hour or two and just play with a "generic" table setup. plugging in various contents and attributes just to get the feel for how different browsers deal with various situations.

I spent an afternoon doing this a while back, and it's made every table layout since then much easier.

[davaddavad]

Ok I will run down this list and see if i can find the problem. :)

[davaddavad]

tedster when i set the border=1 the border displayed the correct location for the the text yet the background color and image pushed into the text area the same amount of pixels on the top bottom and sides more info no solution yet.

[tedster]

How about a short snippet of HTML - just the relevant tags and attributes, but change the content to be generic.

[davaddavad]

ok i will make one up later today. thanks dave

[g1smd]

Make sure that your table data is on the same line as the tags, like this:

<td> Your stuff here </td>

Run the code through [validator.w3.org...] just as a quick sanity check that there are no missing or wrongly nested tags in there.

[davaddavad]

Thank both of you for your time. I already validated the code. I resliced the image again (i think i messed up the size of an image in the slice) and everything is working fine. thanks again dave :)