How to remove space between the T-Joins

Question

newbie14 0 Posting Pro

15 Years Ago

Dear All,
I have a page here . My only problem is that all the centre T-join I would like to link them together but there is space appearing between them. Any idea how to remove the space such that they appear as joined.

html-css user-interface web-design

3 Contributors
14 Replies
126 Views
1 Week Discussion Span
Latest Post 15 Years Ago Latest Post by newbie14

Dani AI

Generated 9 Months Ago

Most gaps between adjacent PNG pieces come from three sources: stray transparent pixels in the artwork, HTML whitespace or block elements between inline images, and fractional/subpixel layout caused by scaling. was right to suspect image-side whitespace; trimming the PNG and exporting with true transparency removes many problems that CSS tricks only hide. ’s hint was useful too — combining image cleanup with layout fixes gives the most robust result.

Quick checklist for the image files (Photoshop):

Zoom to 400%+ and inspect edges for any stray pixels.
Use Image > Trim (Transparent Pixels) to remove extra transparent border.
Export with Save for Web (PNG‑24), Transparency on and Matte set to None so no white matte pixels are introduced.
If pieces must be antialiased against a background color, ensure the join edges share the same pixel color or avoid semi-transparent fringe.

HTML/CSS options to eliminate gaps (pick one that fits the drag/drop layout):

Float-based (no inline gaps)

.container img { float: left; display: block; }
.container::after { content:""; display: table; clear: both; }

Inline-block + zero font-size

.container { font-size: 0; }
.container img { display: inline-block; vertical-align: bottom; font-size: initial; }

Flexbox (modern, very predictable)

.container { display: flex; align-items: flex-end; }

Notes about draggable/droppable behavior: avoid extra block wrappers that force line breaks (the extra droppable divs mentioned by can push images apart). Make droppable zones inline-block or float them so they stay on a single line, or use a single parent droppable and calculate drop coordinates relative to that parent. When debugging, toggle visible backgrounds on images and use the browser devtools to inspect computed widths and positions at 100% zoom to reveal stray pixels or subpixel rounding.

All 14 Replies

Skorpio07 0 Newbie Poster

15 Years Ago

your t-join has white space, see this:

<style type=text/css>
.imgpos {
	position: absolute;
	top: 50px;
	left: 150px;
}
</style>
</head>
<body width="auto">
	<span class="imgpos">
		<img src="" width="30" height="56" ><img src="" border="0" ><img src="" width="30" height="56" ></span>
</body>
</html>

Edited 15 Years Ago by Skorpio07 because: n/a

Skorpio07 0 Newbie Poster

15 Years Ago

just make sure that your clipping path (press the C key in photoshop, press Shift C to cycle through the toolset until you see the crop icon) and just make sure there is no white space in the t-join. let me know if you still need help on this.

Skorpio07 0 Newbie Poster

15 Years Ago

just crop the image from there making sure that you don't leave space on the right or left.. i noticed a very small space

or you can use the one that i cropped for you on the other post...

Skorpio07 0 Newbie Poster

15 Years Ago

please review this link:
http://help.adobe.com/en_US/photoshop/cs/using/WSE311D2B1-CA39-4bab-8BEE-25CF899D1486a.html

design in either illustrator or photoshop, then in photoshop with the image loaded, press C and then Shift C until you get the slice tool (as opposed to the crop tool).

divide up your image by right clicking and choose divide. enter horz or vert or both. drag selections to size.

then do a Save for Web, give it a name and it will create the slices for you plus make an html that will load it up intact.

post your finished code so we can see what your working with.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Gabriel HTI 0 Newbie Poster · Answer 1 · 2011-07-08T19:51:18+00:00

Gabriel HTI 0 Newbie Poster

15 Years Ago

Hope this helps.

newbie14 0 Posting Pro · Answer 2 · 2011-07-08T22:49:12+00:00

Dear Gabriel,
What are the changes you did to the images? I have manage it with the vertical-bottom settings vertical-align: bottom; ? Is that ok?

newbie14 0 Posting Pro · Answer 3 · 2011-07-13T11:05:02+00:00

Dear Skorpio,
How to over come the white space I am editing it via photoshop what should I look out for when I am saving or editing the image?

newbie14 0 Posting Pro · Answer 4 · 2011-07-14T03:22:35+00:00

Dear Skorpio,
Ok once I press shift C what am I suppose to view? I can see the crop toolset what should be my next step how examine for the white space?

newbie14 0 Posting Pro · Answer 5 · 2011-07-14T08:37:29+00:00

Dear Skorpio,
I would like to ask your idea. Now what I do is I prepare each of this images via illustrator then import into photoshop. Do you think I should rather build the whole layout and then cut it into pieces. What is your idea?

newbie14 0 Posting Pro · Answer 6 · 2011-07-14T21:26:15+00:00

Dear Skorpio,
Great that is a big help. Anyway can you check what is wrong with my link here . This link has the drag and drop functionality plus the label too. But I will require is something like this . Why I have the problem where the first two tyres are not on same line. I know the problem is due to extra <div class="droppable"> as like below.

<div class="t1">
      <div class="droppable">
    	<span><b>R11</b>
    		
    		<img class="draggable" src="tyre2.png" >
    		<input type=hidden id="positionR12" name="positionR11" value="R11">
    		<input type=hidden name="tyreIDR11" value="1">
    		
    		
    	</span> 
      </div>
    	
    	<span class="mid"><img src="longJoin1.png"></span>
    	
    	<div class="droppable">
    	<span><b>R11</b>
    		<img class="draggable" src="tyre2.png" >
    		<input type=hidden id="positionR11" name="positionR11" value="R11">
    		<input type=hidden name="tyreIDR11" value="1">
    	</span>
      </div>
     
    </div>

Skorpio07 0 Newbie Poster · Answer 7 · 2011-07-14T21:41:52+00:00

ok how about this:

<body>

    <div class="t1">
    	<span>
    		<img src="" ></span><span class="mid"><img src=""></span><span><img class="draggable" src="" ></span><span style="word-spacing: 0"><br>
		<img class="draggable" src="" ></span><span class="mid"><img src="" style="word-spacing: 0; display: block" ></span><span style="word-spacing: 0"><b style="position: absolute; left: -230px; bottom: 27px; width: 30px; word-spacing: 0">R11</b><img class="draggable" src="" ></span></div>
    <div class="t1"><span style="word-spacing: 0"><img class="draggable" src="" ></span><span class="mid"><img width="39" height="36" src="" style="word-spacing: 0; display: block"></span><span style="word-spacing: 0"><img class="draggable" src="" ></span><span class="mid"><img src="" style="word-spacing: 0; display: block" ></span><span style="word-spacing: 0"><b style="position: absolute; left: -1px; bottom: -72px; width: 30px; word-spacing: 0">R11</b><img class="draggable" src="" ></span><span class="mid"><img width="39" height="36" src="" style="word-spacing: 0; display: block"></span><span style="word-spacing: 0"><img class="draggable" src="" ></span></div>
</body>

newbie14 0 Posting Pro · Answer 8 · 2011-07-14T21:58:32+00:00

Dear Skorpio,
I need the droppable too. Because it works together with the draggable.

Skorpio07 0 Newbie Poster · Answer 9 · 2011-07-15T01:20:42+00:00

do you mean to combine the classes?

class="draggable droppable"

if not just re-add the class to the elements needed, if it expands tho then you will have to change the element type (ie block vs inline)

newbie14 0 Posting Pro · Answer 10 · 2011-07-15T08:06:49+00:00

Dear Skorpio,
Yes I want to be able to be dragged and droppable. How about a parent div to take of the drag?

How to remove space between the T-Joins

Dani AI

Recommended Answers Collapse Answers

All 14 Replies

Recommended Answers