# Solved: images in tables in IE vs Firefox



## scroff (Oct 9, 2001)

This is more of a cosmetic issue than functional. I used a table so I could put images next to text and have them be on about the same line. I don't know enough about css to go that way. I made the table 2 columns by 6 rows, with a 'width=320' attribute on the [TD]. In one cell (highlighted here in red) I put three images expecting them to line up one above the other. If you look at that cell you'll see my feeble attempt at css when I added .storyt {border:solid 0px #000000; width:350px} to my stle sheet in an attempt to force the column width through css. In Firefox everything is fine, but in IE6 the images in that cell are in a staggered line across the page.

Here's the source for the story...


```
<td class="story-box" colspan="2">
            <table border="0" cellpadding="3" cellspacing="0" width="100%">
                <tr><td class="story-information" width="100%">
                        Sunday, December 03 2006 @ 06:10 AM EST<br>
                        Contributed by: <a class="storybyline" href="http://www.anywhichway.net/usersid=67">Scroff</a><br>
                        Views: 13
                </td></tr>
                <tr><td><table align="left" border="0" cellpadding="1" cellspacing="1" width="100%">
    <tbody align="left">
        <tr>
            <td colspan="2">Here's our pets, and a shot of Ruthie doing her homework. She's in kollig!<br></td>
        </tr>
        <tr>
            <td align="left" width="320"><a href="http://www.anywhichway.net/images/articles/2006120303104223_1_original.jpg" title="View unscaled image"><img width="225" height="300" align="left" src="http://www.anywhichway.net/images/articles/2006120303104223_1.jpg" alt=""></a> </td>
            <td align="left">This here's Petey. I'm told we don't spell that right. He was adopted when his owner had a little melt down and went after his friends with a knife one night.... (no, not Petey's friends, ya idjit!)</td>
        </tr>
        <tr>
            <td align="left" width="320"><a href="http://www.anywhichway.net/images/articles/2006120303104223_2_original.jpg" title="View unscaled image"><img width="300" height="225" align="left" src="http://www.anywhichway.net/images/articles/2006120303104223_2.jpg" alt=""></a> </td>
            <td align="left">This is Adji. I don't know how old she is, she was here when I moved into this cottage. She wouldn't let me near her when I moved in for about two years. Then my other cat, Shucks, who has now gone to the great hunting ground in the sky, took her eye out in a fight. I took her to the vet and she's been a mush ever since.</td>
        </tr>
        <tr>
            [COLOR="Red"]<td class="storyt" width="320"><a href="http://www.anywhichway.net/images/articles/2006120303104223_3_original.jpg" title="View unscaled image"><img width="300" height="225" align="left" src="http://www.anywhichway.net/images/articles/2006120303104223_3.jpg" alt=""></a><br><a href="http://www.anywhichway.net/images/articles/2006120303104223_4_original.jpg" title="View unscaled image"><img width="300" height="225" align="left" src="http://www.anywhichway.net/images/articles/2006120303104223_4.jpg" alt=""></a><br><a href="http://www.anywhichway.net/images/articles/2006120303104223_5_original.jpg" title="View unscaled image"><img width="300" height="225" align="left" src="http://www.anywhichway.net/images/articles/2006120303104223_5.jpg" alt=""></a> </td>[/COLOR]
            <td align="left">These are me and daBoo, the latest addition to our fambly. She has a few more pictures from her kitten days in the gallery. The fuzzy face is none other than yours truley (the one behind the cat). The face fuzz is going real soon.</td>
        </tr>
        <tr>
            <td align="left" width="320"><a href="http://www.anywhichway.net/images/articles/2006120303104223_6_original.jpg" title="View unscaled image"><img width="300" height="225" align="left" src="http://www.anywhichway.net/images/articles/2006120303104223_6.jpg" alt=""></a> </td>
            <td align="left">And last, but not least, Ruthie, studiously studying a paper she wrote for kolig... pretty smart chick , she is... therefore, I have no idear what she's doing here with me!<br></td>
        </tr>
        <tr>
            <td align="left"><br></td>
            <td align="left"><br></td>
        </tr>
        <tr>
            <td colspan="2">So that's the AWW fambly. Some ****, eh?<br><br>So it has come to my attention that this table breaks in IE. My first reaction is tough tooties, go get FireFox... but I'll fix it... Some of my best friends still use IE...<br></td>
        </tr>
    </tbody>
</table>
```
and here's two screen shots... one in Firefox :up: and one in IE6:down:

What stops IE from falling in line like Firefox? I read that there are issues with how IE6 handles tables, but how do I get this stuff to line up and behave in IE?

Thanks for any clues as to what's going on.

*edit* this is from a posting on the Geeklog CMS..


----------



## thecoalman (Mar 6, 2006)

Remove the align=left from your images, put it in the [TD] if you want them to align left.


----------



## scroff (Oct 9, 2001)

Thanks for the quick reply, thecoalman. It was so simple, but I would have never thought of it. Thank you very much!


----------



## CorumMc (Feb 26, 2008)

I know this is an ancient post but finding it helped me so I thought I'd add to it for the next person to 'Google' the issue...

For a non-table based site placing the align in a wrapped Div will also work. But the better solution for me was when I found that simply adding STYLE="position:relative;" to the img tag itself worked as well.

Both ways will work, but for me this one was easier to document for my content owners, vs. having them wrap the img in more code.
Thanks,


----------

