www.webdeveloper.com
Results 1 to 11 of 11

Thread: Urgent: Space between images

  1. #1
    Join Date
    Nov 2005
    Posts
    22

    Question Urgent: Space between images

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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    img {float:left;}

  3. #3
    Join Date
    Nov 2005
    Posts
    22
    thanx Fang 4 d reply but this didn't help!!! Wat to do??

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Post the full code or link as we can not see what the css is doing

  5. #5
    Join Date
    Nov 2005
    Posts
    22

    I m sending the code

    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;
    }

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The code in green must beon one line
    Code:
    <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>

  7. #7
    Join Date
    Nov 2005
    Posts
    22
    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....

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It can; a carriage return can leave a gap between elements. This annomily is usually seen with images and is visible in all browsers.

  9. #9
    Join Date
    Nov 2005
    Posts
    22
    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

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.

  11. #11
    Join Date
    Nov 2005
    Posts
    22
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles