Help getting images to display w/out gap

[josel]

Howdy!

I am putting together a page where a large image is displayed by displaying a number of smaller images.

I am having a problem - IE shows a gap between rows thus causing image to break apart. Firefox, however, looks OK.

Here is the snipet of code

			<td valign="top"> 
				<table width="780" border="0" cellspacing="0" cellpadding="0">
					<tr bgcolor="#FF0000">
						<td valign="bottom">
							<img src="images/main01.jpg" width="221" height="86"><img src="images/main_logo.jpg" width="286" height="86"><img src="images/main02.jpg" width="274" height="86">
						</td>
					</tr>
					<tr bgcolor="#FFFF00">
						<td>
							<img src="images/main03.jpg" width="221" height="111"><img src="images/main04.jpg" width="286" height="111"><img src="images/main05.jpg" width="274" height="111">
						</td>
					</tr>

What am I doing wrong? If you want to see what I am talking about, visit

http://www.casabellagallery.com

Thank you all in advance!


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours

 

[manarth]

before you start addressing that particular problem, you should address your code: it's not valid.

invalid code may or may not be the cause of your problem, but it's an element of unpredictability.

<marc>
New to Tek-Tips? Get better answers - faq581-3339

 

[cLFlaVA]

something else you might want to try is removing whitespace between <td> and <img> tags.

            <td valign="top"> 
                <table width="780" border="0" cellspacing="0" cellpadding="0">
                    <tr bgcolor="#FF0000">
                        <td valign="bottom"><img src="images/main01.jpg" width="221" height="86"><img src="images/main_logo.jpg" width="286" height="86"><img src="images/main02.jpg" width="274" height="86"></td>
                    </tr>
                    <tr bgcolor="#FFFF00">
                        <td><img src="images/main03.jpg" width="221" height="111"><img src="images/main04.jpg" width="286" height="111"><img src="images/main05.jpg" width="274" height="111"></td>
                    </tr>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[manarth]

I always find removing whitespace a PITA...I've found setting the image display to block will also fix the problem.

img {display: block;}

<marc>
New to Tek-Tips? Get better answers - faq581-3339

 

[josel]

Hello all ...

Removing the blank spaces fixed it ...

Do you mind pointing out where is the code not valid? I have looked at it over and over and can't find what makes it invalid. Unless, of course, the blank spaces is what you were referring to

Thanks;


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours

 

[manarth]

Validate the code using the W3C's HTML Validator.
Examples:

This page is not Valid HTML 4.0 Transitional!

Below are the results of attempting to parse this document with an SGML parser.

1. Error Line 33 column 35: there is no attribute "LEFTMARGIN"

2. Error Line 33 column 49: there is no attribute "TOPMARGIN".

3. Error Line 33 column 65: there is no attribute "MARGINWIDTH".
(...)
34. Error Line 308 column 138: value of attribute "ALIGN" cannot be "ABSMIDDLE"; must be one of "TOP", "MIDDLE", "BOTTOM", "LEFT", "RIGHT".

<marc>
New to Tek-Tips? Get better answers - faq581-3339

 

[josel]

manarth,

Thanks so much for your suggestion and advise.

I have taken care of all error and my page is now "valid".

Regards;


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours

 

[manarth]

no prob, nice work!

<marc>
New to Tek-Tips? Get better answers - faq581-3339