Urgent: Space between images

[swatisharma]

Hi!
I have to join three images to form one combined image but my problem is that space is coming between all the 3 images and is appearing quite bad.
the code is in the folowing form.
<div id="tabl"> <!--Outer Div for the table-->
<span id="img1"> <!--first Image-->
<img src="{$img_path}jump_top.gif" width="305" height="5"/>
</span>
<span class="jumpIcons"> <!--2nd Image-->
<a href="javascript:fnNPGQuickOrderEntry()">
<img src="{$img_path}icon_quickorder.gif" alt="Quick Order" width="65" height="65" border="0"/>
</a>
</span>
<span id="img2"> <!--Last Image-->
<img src="{$img_path}jump_bot.gif" width="305" height="5"/>
</span>

How should i write these ids in spans so that no space comes in b/w n a single image? I need the answer v badly becoz I hv been trying since a long time and no time is left....
I will be grateful 4 any answer..

[Fang]

img {float:left;}

[swatisharma]

thanx Fang 4 d reply but this didn't help!!! Wat to do??

[Fang]

Post the full code or link as we can not see what the css is doing

[swatisharma]

Hi I m sending the code with CSS tags. Plz help!!!!


The code is

<xsl:template name="workarea">
<xsl:choose>
<xsl:when test="/view/work/welcome = ''">
<xsl:if test="not(/view/work/syndicated-catalog-cust='Y')">
<div id="content">
<span id="uiRight">
<div id="welcomeJump">
<xsl:choose>
<xsl:when test="not(/view/work/edp-view-only='Y') and((/view/work/hide-quickorder != 'Y' or /view/work/hide-inventory != 'Y' or /view/work/hide-order-history !='1') or (/view/work/hide-quickorder != 'Y' or /view/work/hide-inventory != 'Y' or /view/work/hide-order-history !='0'))"> <div id="tbl3">
<img src="{$img_path}jump_top.gif" width="305" height="5"/> <xsl:if test="/view/work/hide-quickorder != 'Y' ">
<span class="jumpIcons">
<a href="javascript:fnNPGQuickOrderEntry()">
<img src="{$img_path}icon_quickorder.gif" alt="Quick Order" width="65" height="65" border="0"/>
</a>

</span>
<span class="jumpContent">
<a href="javascript:fnNPGQuickOrderEntry()">
<img src="{$img_path}jump_quickorder.gif" alt="Quick Order" width="44" height="26" border="0"/>
</a>
<ul>
<li>
<a href="javascript:fnNPGQuickOrderEntry()">Create Order</a>
</li>

<xsl:if test="/view/work/hide-order-upload-flag != 'Y'">
<li>
<a href="javascript:fnNPGOrderUpload()">Upload Order</a>
</li>

</xsl:if>
</ul>
</span>
</xsl:if>
<xsl:if test=" /view/work/hide-order-history !='1' and /view/work/hide-quickorder != 'Y'">
<span id="img1">
<img src="{$img_path}jump_mid.gif" width="305" height="4"/>
</span>
</xsl:if>
<xsl:if test="/view/work/hide-order-history !='1' or /view/work/hide-order-history !='0' ">
<span class="jumpIcons">
<a href="javascript:fnNPGOrderHistory()">
<img src="{$img_path}icon_orderstatus.gif" alt="Check Order Status" width="65" height="65" border="0"/>
</a>
</span>
<span class="jumpContent">
<a href="javascript:fnNPGOrderHistory()">
<img src="{$img_path}jump_orderstatus.gif" alt="Check Order Status" width="96" height="26" border="0"/>
</a>
<p>
<a href="javascript:fnNPGOrderHistory()">Check realtime status of open orders and review shipped order history</a>
</p>
</span>
</xsl:if>
<xsl:if test=" (/view/work/hide-inventory != 'Y') or (/view/work/hide-inventory != 'Y' and /view/work/hide-quickorder != 'Y') ">
<span id="img1">
<img src="{$img_path}jump_mid.gif" width="305" height="4"/>
</span>
</xsl:if>
<xsl:if test="/view/work/hide-inventory != 'Y' ">
<span class="jumpIconsLast">
<a href="javascript:fnNPGInventoryLookup()">
<img src="{$img_path}icon_inventory.gif" alt="Check Inventory" width="65" height="65" border="0"/>
</a>
</span>
<span class="jumpContent">
<a href="javascript:fnNPGInventoryLookup()">
<img src="{$img_path}jump_inventory.gif" alt="Check Inventory" width="74" height="26" border="0"/>
</a>
<p>
<a href="javascript:fnNPGInventoryLookup()">View inventory levels in realtime</a>
</p>
</span>
</xsl:if>
<span id="img1">
<img src="{$img_path}jump_bot.gif" width="305" height="5"/>
</span>
</div>

</xsl:when>

<xsltherwise>
<span id="td7">&#160;</span>
</xsltherwise>
</xsl:choose>
</div>
<div id="welcomeContent"> <xsl:choose>
<xsl:when test="$edp_name!=''">
<h5>Welcome &#160;<xsl:value-of select="$edp_name"/>!</h5>
</xsl:when>
<xsltherwise>
<h5>Welcome</h5>
</xsltherwise>
</xsl:choose>
<div class="welcomeLinks">
<div class="titleImg">
<img src="{$img_path}home_managetitle.gif" alt="Manage Your Account" width="67" height="23"/>
</div>
<ul>
<xsl:if test="/view/work/change-pass = '0'">
<xsl:if test="/view/work/user-type = 'E'">
<li>
<a href="javascript:loadCreateUser();">Create User</a>
</li>
</xsl:if>
<li>
<a href="javascript:loadChangePassword();">Change Password </a>
</li>
<li>
<a href="javascript:loadEditProfile()">Update Your Profile</a>
</li>
<xsl:if test="/view/work/user-type = 'E' and /view/work/ar-user='0'">
<li>
<a href="javascript:loadEditDeleteUser();">Edit / Delete User IDs</a>
</li>
</xsl:if>
</xsl:if>
<xsl:if test="/view/work/unsent-orders-count &gt; 0 and not(/view/work/edp-view-only='Y') ">
<li>
<a href="javascript:fnViewUnsentOrders();">View Unsent Orders</a>
</li>
</xsl:if>
</ul>
</div>
<div class="welcomeLinks> <div class="titleImg"> <img src="{$img_path}home_helptitle.gif" alt="Need Some Help?" width="58" height="26"/>
</div>
<ul>
<li>
<a href="javascript:fnNPGUsefulInfo()">Frequent Questions</a>
</li>
<li>
<a href="javascript:fnNPGContactUs()">Contact Us </a>
</li>
<xsl:if test="/view/work/comment-card != ''">
<li>
<a href="javascript:fnNPGCommentCard()">Provide Feedback</a>
</li>
</xsl:if>
</ul>
</div>
</span>
</div>
</div>
</xsl:if>
</xsl:when>
<xsltherwise>
<xsl:value-of select="/view/work/welcome/content-desc" disable-output-escaping="yes"/>
</xsltherwise>
</xsl:choose>
</xsl:template>






And the css is

#tbl3
{
width: 305;
border: 0;
padding: 0;
word-spacing: 0;
background-color: #F7F7F7;
text-align: left;
}

div#welcomeContent {
float: left;
margin: 0px;
padding: 0px;
}
div#welcomeContent div.titleImg {
float: left;
margin: 0px;
padding: 0px;
width: 75px;
}
div#welcomeJump .jumpIcons {
margin: 0px;
padding: 0px 0px 16px 0px;
background: #1B3060 url(C:\workspace_swati\RedKap\Web Content\coms\img\jump_iconbg.gif) top left no-repeat;
text-align: center;
vertical-align: top;
width: 75px;
}
div#welcomeJump .jumpIconsLast {
margin: 0px;
padding: 3px 0px 12px 0px;
background: #1B3060 url(C:\workspace_swati\RedKap\Web Content\coms\img\jump_iconbg.gif) top left no-repeat;
text-align: center;
vertical-align: top;
width: 75px;
}

div#welcomeJump .jumpContent {
margin: 0px;
padding: 5px 0px 0px 6px;
background: #EAEAEA url(C:\workspace_swati\RedKap\Web Content\coms\img\jump_contentbg.gif) top left no-repeat;
width: 230px;
font-size: 12px;
font-weight: bold;

}
div#welcomeJump .jumpContent li a {
margin: 0px;
padding: 0px 0px 0px 10px;
background: transparent url(C:\workspace_swati\RedKap\Web Content\coms\img\icon_redarrow.gif) left center no-repeat;
font-size: 12px;
font-weight: bold;
}

[Fang]

The code in green must beon one line

<div id="tabl"> <!--Outer Div for the table-->
<span id="img1"> <!--first Image-->
<img src="{$img_path}jump_top.gif" width="305" height="5"/></span><span class="jumpIcons"> <!--2nd Image-->
<a href="javascript:fnNPGQuickOrderEntry()">
<img src="{$img_path}icon_quickorder.gif" alt="Quick Order" width="65" height="65" border="0"/>
</a>
</span>
<span id="img2"> <!--Last Image-->
<img src="{$img_path}jump_bot.gif" width="305" height="5"/>
</span>

[swatisharma]

Can putting the code on the same line help???? As far as I know indentation is only for making the appearence of the code readable and has no other function. Plz elaborate....

[Fang]

It can; a carriage return can leave a gap between elements. This annomily is usually seen with images and is visible in all browsers.

[swatisharma]

I have done what u told and removed the spaces and newline from my code but it has been of no help to me. The images don't budge. The spaces are still coming between my images! Could ne1 suggest some remedy to it? Giving absolute positioning to join two things or just get the desired appearance I feel is a bad idea. Also I m not able to solve the problem by using it too by specifying 'top' and 'left' of the images!
What do I do?
Thanx in advance

[Fang]

From the code you gave it will remove the gap.
The <span> element appears to be unnecessary, remove it and place the id in the <img> and /or <a> tags.
Place all 3 image codes on 1 line.
If this does not help give a link to the page; there is probably something elsewhere on the page causing the problem.

[swatisharma]

thanx Fang! yes putting in one line did help while I was testing in frontpage but not in my XSL. But Now my problem is solved.It was something becoz of vertical-align: top
which I had given in one of my tags that was causing all the problem.