Home All Groups Group Topic Archive Search About

White strip showing up between two imagemaps

microsoft.public.dotnet.framework.aspnet.webcontrols
Author
22 Sep 2006 3:42 PM
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
njsokal***@hotmail.com
http://www.nathansokalski.com/

Author
22 Sep 2006 5:51 PM
Baski
Remove all the height property and give it a shot.

Show quoteHide quote
"Nathan Sokalski" <njsokal***@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
> njsokal***@hotmail.com
> http://www.nathansokalski.com/
>
Author
22 Sep 2006 7:22 PM
Nathan Sokalski
That did not make any difference. Any other ideas? Thanks.
--
Nathan Sokalski
njsokal***@hotmail.com
http://www.nathansokalski.com/

Show quoteHide quote
"Baski" <ba***@aldensys.com> wrote in message
news:OdxM5%23m3GHA.4364@TK2MSFTNGP06.phx.gbl...
> Remove all the height property and give it a shot.
>
> "Nathan Sokalski" <njsokal***@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
>> njsokal***@hotmail.com
>> http://www.nathansokalski.com/
>>
>
>
Author
22 Sep 2006 7:38 PM
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.

Show quoteHide quote
"Nathan Sokalski" <njsokal***@hotmail.com> wrote in message
news:e4SF6xn3GHA.3656@TK2MSFTNGP04.phx.gbl...
> That did not make any difference. Any other ideas? Thanks.
> --
> Nathan Sokalski
> njsokal***@hotmail.com
> http://www.nathansokalski.com/
>
> "Baski" <ba***@aldensys.com> wrote in message
> news:OdxM5%23m3GHA.4364@TK2MSFTNGP06.phx.gbl...
>> Remove all the height property and give it a shot.
>>
>> "Nathan Sokalski" <njsokal***@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
>>> njsokal***@hotmail.com
>>> http://www.nathansokalski.com/
>>>
>>
>>
>
>
Author
22 Sep 2006 11:53 PM
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
njsokal***@hotmail.com
http://www.nathansokalski.com/

Show quoteHide quote
"Baski" <ba***@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" <njsokal***@hotmail.com> wrote in message
> news:e4SF6xn3GHA.3656@TK2MSFTNGP04.phx.gbl...
>> That did not make any difference. Any other ideas? Thanks.
>> --
>> Nathan Sokalski
>> njsokal***@hotmail.com
>> http://www.nathansokalski.com/
>>
>> "Baski" <ba***@aldensys.com> wrote in message
>> news:OdxM5%23m3GHA.4364@TK2MSFTNGP06.phx.gbl...
>>> Remove all the height property and give it a shot.
>>>
>>> "Nathan Sokalski" <njsokal***@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
>>>> njsokal***@hotmail.com
>>>> http://www.nathansokalski.com/
>>>>
>>>
>>>
>>
>>
>
>



Post Other interesting topics
Control events - page life-cycle
ASP.NET 2.0 / GridView / ObjectDataSource / Update / Missing Columns
The parameter is not correct from SqlDataAdapter control
ASP code
Controls calling other controls problem - ASP.NET 2.0
create webcontrols in aspx or aspx.cs
DropDownList SelectedIndexChanged
How to keep state of treeview control
ASP.Net 2.0 DropDownList Selected Not Working...
Dynamic menu - clicking to right of text