White strip showing up between two imagemaps

Discussion in 'ASP .Net Building Controls' started by Nathan Sokalski, Sep 22, 2006.

  1. 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

    http://www.nathansokalski.com/
     
    Nathan Sokalski, Sep 22, 2006
    #1
    1. Advertising

  2. Nathan Sokalski

    Baski Guest

    Remove all the height property and give it a shot.

    "Nathan Sokalski" <> wrote in message
    news:...
    >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
    >
    > http://www.nathansokalski.com/
    >
     
    Baski, Sep 22, 2006
    #2
    1. Advertising

  3. That did not make any difference. Any other ideas? Thanks.
    --
    Nathan Sokalski

    http://www.nathansokalski.com/

    "Baski" <> wrote in message
    news:OdxM5%...
    > Remove all the height property and give it a shot.
    >
    > "Nathan Sokalski" <> wrote in message
    > news:...
    >>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
    >>
    >> http://www.nathansokalski.com/
    >>

    >
    >
     
    Nathan Sokalski, Sep 22, 2006
    #3
  4. Nathan Sokalski

    Baski Guest

    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" <> wrote in message
    news:...
    > That did not make any difference. Any other ideas? Thanks.
    > --
    > Nathan Sokalski
    >
    > http://www.nathansokalski.com/
    >
    > "Baski" <> wrote in message
    > news:OdxM5%...
    >> Remove all the height property and give it a shot.
    >>
    >> "Nathan Sokalski" <> wrote in message
    >> news:...
    >>>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
    >>>
    >>> http://www.nathansokalski.com/
    >>>

    >>
    >>

    >
    >
     
    Baski, Sep 22, 2006
    #4
  5. 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

    http://www.nathansokalski.com/

    "Baski" <> wrote in message
    news:%...
    > 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" <> wrote in message
    > news:...
    >> That did not make any difference. Any other ideas? Thanks.
    >> --
    >> Nathan Sokalski
    >>
    >> http://www.nathansokalski.com/
    >>
    >> "Baski" <> wrote in message
    >> news:OdxM5%...
    >>> Remove all the height property and give it a shot.
    >>>
    >>> "Nathan Sokalski" <> wrote in message
    >>> news:...
    >>>>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
    >>>>
    >>>> http://www.nathansokalski.com/
    >>>>
    >>>
    >>>

    >>
    >>

    >
    >
     
    Nathan Sokalski, Sep 23, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Malcolm Dew-Jones

    Q: strip white space

    Malcolm Dew-Jones, Apr 12, 2005, in forum: XML
    Replies:
    2
    Views:
    545
    Malcolm Dew-Jones
    Apr 13, 2005
  2. Nathan Sokalski

    White strip showing up between two imagemaps

    Nathan Sokalski, Sep 22, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    379
    Nathan Sokalski
    Sep 23, 2006
  3. Nathan Sokalski

    White strip showing up between two imagemaps

    Nathan Sokalski, Sep 22, 2006, in forum: ASP .Net Web Controls
    Replies:
    4
    Views:
    123
    Nathan Sokalski
    Sep 23, 2006
  4. Aquila
    Replies:
    35
    Views:
    492
    Mathieu Bouchard
    Mar 31, 2005
  5. yelipolok
    Replies:
    4
    Views:
    279
    John W. Krahn
    Jan 27, 2010
Loading...

Share This Page