Table row/border problem in IE7

[kdubya]

I am attempting to mosaic images together seamlessly using a table. I
can achieve what I want in Firefox (2.0.0.16) but not in IE7.

IE7 appears to put a gap between rows so the background shows through.
I have tried multiple things in both HTML and CSS to get rid of the
gap and I'm stumped now.

You can see an example at:

http://winanstech.com/tableProblem.html

Any suggestions are welcomed.

Ken

 

[dorayme]

I am attempting to mosaic images together seamlessly using a table. I
can achieve what I want in Firefox (2.0.0.16) but not in IE7.

Not on my Firefox 2, the look you get will vary according to the text
size set by the user. The red shows up top right because the text in
bottom right cell outruns the 100px wide image - the browser (rightly)
expands the cell to fit the text, it does not know you want it to be
only 100px wide. So it grows wider. And being wider, it will then affect
the top row cells which match the width of the widest cells so that the
columns are even spaced.

IE7 appears to put a gap between rows so the background shows through.
I have tried multiple things in both HTML and CSS to get rid of the
gap and I'm stumped now.

You can see an example at:

http://winanstech.com/tableProblem.html

Any suggestions are welcomed.

You can tell the cells to be 100px wide, something you have not done.
you might get support in most browsers. For example a quick change of
yours to:

<td style="width:100px;>
<p>Text will go here</p>

got FF to give the look I imagined you wanted.

 

[kdubya]

Silly IE.

Try removing spaces before the </td> end tag, so:

<td>
<img src="./images/yellow.jpg" alt="yellow cell" width="100px"
height="100px">
</td>

becomes:

<td>
<img src="./images/yellow.jpg" alt="yellow cell" width="100px"
height="100px"></td>

Thanks, this seems to have fixed the problem in this example.

Ken

 

[kdubya]

In addition to other comments, an image-per-cell is best rendered -

display:block;

...via css.

Just to clarify for me - do you mean to add "display: block;" to the
style definition for the <img> tag?

Thanks,
Ken

 

[kdubya]

Not on my Firefox 2, the look you get will vary according to the text
size set by the user. The red shows up top right because the text in
bottom right cell outruns the 100px wide image - the browser (rightly)
expands the cell to fit the text, it does not know you want it to be
only 100px wide. So it grows wider. And being wider, it will then affect
the top row cells which match the width of the widest cells so that the
columns are even spaced.





You can tell the cells to be 100px wide, something you have not done.
you might get support in most browsers. For example a quick change of
yours to:

<td style="width:100px;>
<p>Text will go here</p>

got FF to give the look I imagined you wanted.

You are absolutely correct - my example was not very robust in this
respect.

Thanks,
Ken

 

[dorayme]

You are absolutely correct - my example was not very robust in this
respect.

As for any gap that you will see from time to time at the bottom of
pictures, you can "cure" these by putting a CSS style of display: block
on your images. The reason that these gaps will sometimes become
apparent is that an img is an inline object by default (disply: inline).
An inline object is like a character and room is allowed by the browser
for descenders in inline boxes (eg. y, j, p).