4 pixels below my picture 1

[mhertzler]

I have created a banner for my website by placing a picture in a cell in a table that has a blue background. That seems simple enough, but for some reason, I see 4 additional pixels of blue down below the picture. How do I get rid of that? I set CELLSPACING=0 and CELLPADDING=0. Is there something else I need to do to make the cell height equal to the GIF height? (see

http://www.geocities.com/questioningpage/)

Thanks in advance.

 

[vongrunt]

I have this deja-vu feeling...
Yep, extra space between <IMG> map and </TD>

 

[vongrunt]

Mea culpa... actually, extra space doesn't affect layout. Cell that contains menu table should have vAlign="bottom".

 

[mhertzler]

Thanks for the suggestion. I was sure you had solved the problem. But it didn't work. I still have those 4 blue pixels down below my picture. Any other suggestions?

 

[vongrunt]

I checked it again - it worked. Table is first one after BODY tag, changes are in bold:

<TABLE cellSpacing=0 cellPadding=0 width="100%" border="0">
  <TBODY>
  <TR>
    <TD vAlign=[b]bottom[/b] bgColor=#0000ff colSpan=2>

IMO only ancient/buggy browsers (netscape 4.x, IE3) could have problem with that.

 

[Vragabond]

Well, looks like IE6 qualifies as ancient and buggy (). The problem is whitespace between tags that IE just can't handle. Change:

     <TD VALIGN="bottom" BGCOLOR="#0000ff" COLSPAN=2 CELLSPACING=0 CELLPADDING=0 border=0> 
       <IMG SRC="center.GIF" usemap="#header" border =0 valign="bottom">
     </TD>
     <TD VALIGN="bottom" BGCOLOR="#0000ff" CELLSPACING=0 CELLPADDING=0 border=0 > 
          <IMG SRC="rightpic.GIF" border =0 valign="bottom" >
     </TD>

to

     <TD VALIGN="bottom" BGCOLOR="#0000ff" COLSPAN=2 CELLSPACING=0 CELLPADDING=0 border=0><IMG SRC="[URL unfurl="true"]http://www.geocities.com/questioningpage/center.GIF"[/URL] usemap="#header" border =0 valign="bottom"></TD>
     <TD VALIGN="bottom" BGCOLOR="#0000ff" CELLSPACING=0 CELLPADDING=0 border=0><IMG SRC="[URL unfurl="true"]http://www.geocities.com/questioningpage/rightpic.GIF"[/URL] border =0 valign="bottom"></TD>

As for the <map>, you can move it anywhere in the document, I just put it at the end, just before the </body> tag. This makes it look ok in IE.

 

[vongrunt]

I saw whitespace, removed it automatically, then thought exclusively about valign... typical shotgun explaining/debugging.

3 monkeys rule

 

[mhertzler]

Yes! It works!

Eliminate the white space? I never would have guessed it. Thank you very much.