Remove white line between images

Hi! as shown in the image below, how can you remove the image below.

In visual studio designer it is the image is ok but when preview in web browser IE, it has white line between images...
<div id="main" style="border: 1px solid #000000;width:570px; height:800px;">
        <div id="banner" style="border:0px solid;">
            <div id="divTopBanner">
                <asp:Image ID="ImageTopBanner" runat="server" ImageUrl="~/images/topHeader.jpg" />
            </div>
            <div id="DivGenderBanner.png">
                <asp:Image ID="ImageGenderBanner" runat="server" ImageUrl="~/images/top_male.png" />
            </div>
            <div id="DivRightBanner" style="position:absolute;left:430px;">
                <asp:Image ID="ImageRightBanner" runat="server" 
                    ImageUrl="~/images/rightHeader.jpg" ImageAlign="Right" />
            </div>
        </div>
        <div id="contents" style="width:400px;">
         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
        </div>
</div>

Open in new window

white-space-image.png
LVL 8
PagodNaUtakAsked:
Who is Participating?
 
Shinesh PremrajanConnect With a Mentor Engineering ManagerCommented:
Just paste this code, Then its a problem with the white spaces within your code..

Hope this helps..
<div id="main" style="border: 1px solid #000000;width:570px; height:800px;">
        <div id="banner" style="border:0px solid;margin:0px;padding:0px;">
            <div id="divTopBanner"><asp:Image ID="ImageTopBanner" runat="server" ImageUrl="~/images/topHeader.jpg" /></div><div id="DivGenderBanner.png"><asp:Image ID="ImageGenderBanner" runat="server" ImageUrl="~/images/top_male.png" /></div><div id="DivRightBanner" style="position:absolute;left:430px;"><asp:Image ID="ImageRightBanner" runat="server"  ImageUrl="~/images/rightHeader.jpg" ImageAlign="Right" /></div></div>
        <div id="contents" style="width:400px;">
         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
        </div>
       
    </div>

Open in new window

0
 
Shinesh PremrajanEngineering ManagerCommented:
<div id="banner" style="border:0px solid;">

Replace with this

<div id="banner" style="border:0px solid;margin:0px;padding:0px;">

Hope this helps..
0
 
Amandeep Singh BhullarCommented:
Check for any white spaces or &nbsp; in the code.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
PagodNaUtakAuthor Commented:
Still the same:

<div id="main" style="border: 1px solid #000000;width:570px; height:800px;">
        <div id="banner" style="border:0px solid;margin:0px;padding:0px;">
            <div id="divTopBanner">
                <asp:Image ID="ImageTopBanner" runat="server" ImageUrl="~/images/topHeader.jpg" />
            </div>
            <div id="DivGenderBanner.png">
                <asp:Image ID="ImageGenderBanner" runat="server" ImageUrl="~/images/top_male.png" />
            </div>
            <div id="DivRightBanner" style="position:absolute;left:430px;">
                <asp:Image ID="ImageRightBanner" runat="server" 
                    ImageUrl="~/images/rightHeader.jpg" ImageAlign="Right" />
            </div>
        </div>
        <div id="contents" style="width:400px;">
         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
        </div>
       
    </div>

Open in new window

0
 
PagodNaUtakAuthor Commented:
The code above is my latest code, but I still have the same error:
In the code above I do not see any white space.
Any more ideas?
0
 
EspavoCommented:
You could also put three images into a single <div> with <br />'s between them...
Espavo

<div id="main" style="border: 1px solid #000000;width:570px; height:800px;">
        <div id="banner" style="border:0px solid;">
            <div id="divTopBanner">
                <asp:Image ID="ImageTopBanner" runat="server" ImageUrl="~/images/topHeader.jpg" />
<br />
                <asp:Image ID="ImageGenderBanner" runat="server" ImageUrl="~/images/top_male.png" />
<br />
                <asp:Image ID="ImageRightBanner" runat="server" 
                    ImageUrl="~/images/rightHeader.jpg" ImageAlign="Right" />
            </div>
        </div>
        <div id="contents" style="width:400px;">
         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
        </div>
</div>

Open in new window

0
 
PagodNaUtakAuthor Commented:
Hi Espavo,
Thanks for the input but the code that you provide produces the same problem with bigger gap.
Anyone knows why this behavior?
0
 
PagodNaUtakAuthor Commented:
Shinug,
Your code works, but whats the difference?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.