White strip showing up between two imagemaps

[Nathan Sokalski]

I have two asp:ImageMaps in a table cell as follows:


<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<td align="center">
<asp:ImageMap ID="mapBanner" runat="server" BorderWidth="0px"
Height="82px" ImageUrl="../images/top_banner.jpg" Width="1000px"
style="margin:0px;padding:0px;">
<asp:RectangleHotSpot Left="125" Top="5" Right="200" Bottom="22"
NavigateUrl="about" AlternateText="About AFBE" />
<asp:RectangleHotSpot Left="206" Top="5" Right="347" Bottom="22"
NavigateUrl="foundation" AlternateText="Foundation Scholarship" />
<asp:RectangleHotSpot Left="353" Top="5" Right="421" Bottom="22"
NavigateUrl="contact.asp" AlternateText="Contact Us" />
<asp:RectangleHotSpot Left="425" Top="5" Right="511" Bottom="22"
NavigateUrl="affiliates" AlternateText="Affiliate Login" />
<asp:RectangleHotSpot Left="857" Top="37" Right="896" Bottom="65"
NavigateUrl="" AlternateText="English Version" />
<asp:RectangleHotSpot Left="902" Top="37" Right="940" Bottom="65"
NavigateUrl="espanol" AlternateText="Spanish Version" />
<asp:RectangleHotSpot Left="946" Top="37" Right="984" Bottom="65"
NavigateUrl="francis" AlternateText="French Version" />
</asp:ImageMap>
<asp:ImageMap ID="mapNavBanner" runat="server" Width="1000" Height="19"
BorderWidth="0" ImageUrl="../images/navigation.jpg"
style="margin:0px;padding:0px;">
<asp:RectangleHotSpot Left="7" Top="1" Right="188" Bottom="16"
NavigateUrl="exposure" AlternateText="National Exposure Service" />
<asp:RectangleHotSpot Left="203" Top="1" Right="323" Bottom="16"
NavigateUrl="athletes" AlternateText="Athlete Database" />
<asp:RectangleHotSpot Left="336" Top="1" Right="428" Bottom="16"
NavigateUrl="tournaments" AlternateText="Tournaments" />
<asp:RectangleHotSpot Left="442" Top="1" Right="555" Bottom="16"
NavigateUrl="summercamps" AlternateText="Summer Camps" />
<asp:RectangleHotSpot Left="569" Top="1" Right="659" Bottom="16"
NavigateUrl="coaches" AlternateText="For Coaches" />
<asp:RectangleHotSpot Left="673" Top="1" Right="858" Bottom="16"
NavigateUrl="opportunities" AlternateText="Employment Opportunities" />
<asp:RectangleHotSpot Left="873" Top="1" Right="917" Bottom="16"
NavigateUrl="" AlternateText="Home" />
</asp:ImageMap>
</td>
</tr>
</table>


I would expect the top/bottom of these to be touching each other, but there
is a white strip of empty space between them. Why is this? Thanks.

 

[Baski]

Remove all the height property and give it a shot.

 

[Nathan Sokalski]

That did not make any difference. Any other ideas? Thanks.

 

[Baski]

Put each images in it's own row instead of one row. Set top rows valign to
bottom and bottom rows valign to top and see what happens.

 

[Nathan Sokalski]

That did not make any difference either. After experimenting with some code
in a *.html file to find something that works, I found that a <br/> needs to
be output between the <img> and <map> tags, so my output needs to be the
following tags to avoid the white strip:


<table>
<tr>
<td>
<img/><br/>
<map>
<area/>
</map>
<img/><br/>
<map>
<area/>
</map>
</td>
</tr>
</table>


However, this presents the problem of how to get ASP.NET to output the <br/>
tag. Because the <br/> tag must be between the <img/> and <map> tags and
<asp:ImageMap> can only contain certain tags, I cannot figure out how to get
the <br/> in the right place. What do I do? Thanks.