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.
--
Nathan Sokalski
[email]njsokalski@hotmail.com[/email]
[url]http://www.nathansokalski.com/[/url]

[Baski]

Remove all the height property and give it a shot.

"Nathan Sokalski" <njsokalski@hotmail.com> wrote in message
news:Okfm92l3GHA.4932@TK2MSFTNGP02.phx.gbl...

>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.
> --
> Nathan Sokalski
> [email]njsokalski@hotmail.com[/email]
> [url]http://www.nathansokalski.com/[/url]
>

[Nathan Sokalski]

That did not make any difference. Any other ideas? Thanks.
--
Nathan Sokalski
[email]njsokalski@hotmail.com[/email]
[url]http://www.nathansokalski.com/[/url]

"Baski" <baski@aldensys.com> wrote in message
news:OdxM5%23m3GHA.4364@TK2MSFTNGP06.phx.gbl...

> Remove all the height property and give it a shot.
>
> "Nathan Sokalski" <njsokalski@hotmail.com> wrote in message
> news:Okfm92l3GHA.4932@TK2MSFTNGP02.phx.gbl...

>>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.
>> --
>> Nathan Sokalski
>> [email]njsokalski@hotmail.com[/email]
>> [url]http://www.nathansokalski.com/[/url]
>>

>
>

[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" <njsokalski@hotmail.com> wrote in message
news:e4SF6xn3GHA.3656@TK2MSFTNGP04.phx.gbl...

> That did not make any difference. Any other ideas? Thanks.
> --
> Nathan Sokalski
> [email]njsokalski@hotmail.com[/email]
> [url]http://www.nathansokalski.com/[/url]
>
> "Baski" <baski@aldensys.com> wrote in message
> news:OdxM5%23m3GHA.4364@TK2MSFTNGP06.phx.gbl...

>> Remove all the height property and give it a shot.
>>
>> "Nathan Sokalski" <njsokalski@hotmail.com> wrote in message
>> news:Okfm92l3GHA.4932@TK2MSFTNGP02.phx.gbl...

>>>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.
>>> --
>>> Nathan Sokalski
>>> [email]njsokalski@hotmail.com[/email]
>>> [url]http://www.nathansokalski.com/[/url]
>>>

>>
>>

>
>

[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.
--
Nathan Sokalski
[email]njsokalski@hotmail.com[/email]
[url]http://www.nathansokalski.com/[/url]

"Baski" <baski@aldensys.com> wrote in message
news:%238G9g6n3GHA.4024@TK2MSFTNGP03.phx.gbl...

> 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" <njsokalski@hotmail.com> wrote in message
> news:e4SF6xn3GHA.3656@TK2MSFTNGP04.phx.gbl...

>> That did not make any difference. Any other ideas? Thanks.
>> --
>> Nathan Sokalski
>> [email]njsokalski@hotmail.com[/email]
>> [url]http://www.nathansokalski.com/[/url]
>>
>> "Baski" <baski@aldensys.com> wrote in message
>> news:OdxM5%23m3GHA.4364@TK2MSFTNGP06.phx.gbl...

>>> Remove all the height property and give it a shot.
>>>
>>> "Nathan Sokalski" <njsokalski@hotmail.com> wrote in message
>>> news:Okfm92l3GHA.4932@TK2MSFTNGP02.phx.gbl...
>>>>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.
>>>> --
>>>> Nathan Sokalski
>>>> [email]njsokalski@hotmail.com[/email]
>>>> [url]http://www.nathansokalski.com/[/url]
>>>>
>>>
>>>

>>
>>

>
>