html question-jpg pictures and vertical space below them

[Eric J in MN]

I have 12 jpgs in the upper-right corner of the "MoveLeft Media" webpage at:
www.moveleft.com

In Netscape Navigator 6, they display all together with no spaces below each row of pictures. That is how I like it.

However, in Internet Explorer 6, there is vertical space after each row.

How can I make the pictures display bunched together in Internet Explorer 6 like they do in Netscape Navigator 6?

[arcos]

1. put them into a table...

3 rows and 1 column, be sure to specify the height of each row at 32px and remove padding and margins.

[Eric J in MN]

2. I put them in a table and now there is a drop of vertical

I put them in a table and now there is a drop of vertical space and a drop of horizontal space both in Netscape 6 and IE 6.

Is there anything more I can do to get rid of all verical and horizontal space?

[DS1]

3. a different solution would be an imagemap approach

put them all together in your graphics editor of choice and use the <map> tag.

<- doesn't feel like scouring through someone else's html tonight :shrug:

[Eric J in MN]

6. that might be necessary, but I've never used an imagemap before (nt)

nt

[arcos]

4. try to change the table to this:

<table width="98" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://www.dirac.org/p/politics/?filter=arnold"><img src="moveleft/images/arnold.jpg" width=32 height=32
alt="Arnold Schwarzenegger" title="Arnold Schwarzenegger" border=0></a></td>
<td><a href="http://www.dirac.org/p/politics/?filter=bush"><img src="moveleft/images/bush.jpg" width=32 height=32
alt="Bush Administration" title="Bush Administration" border=0></a></td>
<td><a href="http://www.dirac.org/p/politics/?filter=corr"><img src="moveleft/images/corr.jpg" width=32 height=32
alt="Political Corruption" title="Political Corruption" border=0></a></td>
</tr>
<tr>
<td><a href="http://www.dirac.org/p/politics/?filter=edu"><img src="moveleft/images/edu.jpg" width=32 height=32
alt="Education" title="Education" border=0></a></td>
<td><a href="http://www.dirac.org/p/politics/?filter=env"><img src="moveleft/images/env.jpg" width=32 height=32
alt="Environment" title="Environment" border=0></a></td>
<td><a href="http://www.dirac.org/p/politics/?filter=gayrights"><img src="moveleft/images/gayrights.jpg" width=32 height=32
alt="Gay / Lesbian Rights" title="Gay / Lesbian Rights" border=0></a></td>
</tr>
<tr>
<td><a href="http://www.dirac.org/p/politics/?filter=justice"><img src="moveleft/images/justice.jpg" width=32 height=32
alt="Justice" title="Justice" border=0></a></td>
<td><a href="http://www.dirac.org/p/politics/?filter=mpaa"><img src="moveleft/images/mpaa.jpg" width=32 height=32
alt="MPAA" title="MPAA" border=0></a></td>
<td><a href="http://www.dirac.org/p/politics/?filter=quotes"><img src="moveleft/images/quotes.jpg" width=32 height=32
alt="Quotes To Remember" title="Quotes To Remember" border=0></a></td>
</tr>
<tr>
<td><a href="http://www.dirac.org/p/politics/?filter=riaa"><img src="moveleft/images/riaa.jpg" width=32 height=32
alt="RIAA" title="RIAA" border=0></a></td>
<td><a href="http://www.dirac.org/p/politics/?filter=women"><img src="moveleft/images/women.jpg" width=32 height=32
alt="Women's Issues" title="Women's Issues" border=0></a></td>
<td><a href="http://www.dirac.org/p/politics/?filter=wow"><img src="moveleft/images/wow.jpg" width=32 height=32
alt="Jumpin Jehosephat!" title="Jumpin Jehosephat!" border=0></a></td>
</tr>
</table>

[Eric J in MN]

5. That approach worked in Netscape 6 but not IE 6

That approach worked in Netscape 6 but not IE 6.

IE6 kept the vertical and horizontal space, and also made the pictures alternate 2 and 1 to a row.


You can see what happened here, if you have both browsers:
http://www.moveleft.com/index2.html

[Elidor]

7. IE and Nutscrape use different tags for cell padding

I used to know the other tag off the top of my head, but I haven't done any hand coding in several years and I'm extremely rusty. You need to do some googling, but it is do-able.

[arcos]

10. I don't see any spaces in my IE6...

and it looks fine in Mozilla too.

[Deja Q]

8. No </tr> before adding <tr>

(edit: See post #4 for corrections -> ) There are no </tr> statements before the new <tr> statements. Try adding those in. That could be why the problem is happening...

Also a thought but probably not related, the <td> statements don't need "height=32" info and the image files, if 32x32 pixels natively, do not need the width and height information included.

[Eric J in MN]

9. post #4 does have </tr> (nt)

nt