Layout problem

Dear All,
I have page here http://183.78.169.53/tyre2/page4.html. I have manage put label into the first two tyre images as RI11. But the problem now I cant make both of them to be align together on one line with the blue image of the T-join? How can I make it look like the rest below?

Actually I’m getting an error on all pages now that I checked so it’s probably my Firefox that’s at fault - sorry.

Error: [Exception… “‘JavaScript component does not have a method named: “handleEvent”’ when calling method: [nsIDOMEventListener::handleEvent]” nsresult: “0x80570030 (NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED)” location: “<unknown>” data: no]

Seems more like a JS problem to me so you should ask in the JS forum. The error console in Firefox is showing an error for “handleEvent”.

I can move the thread to js if you want but as it is a different question to this thread you may want to start a new post in the JS forum.

Dear Paul,
I have two pages with the similar codes. One is here Untitled Document in this page you have select the vehicle via the drop down list then a number of tyre will appear via the ajax call. The problem is that both the draggable and droppable is attached to it but is not working. On the other hand I have another page [url=http://183.78.169.53/tm/getTyreLayoutDetails1.php?l=3]Untitled Document here which directly generate the tyre layout and both drag n drop works perfects fine. Both are using the same codes. Only one is via ajax. Any idea why it fails in ajax or must I do some html tweaking further?

Dear PAul,
Thank you very surprising cause my firefox is not showing me any error at all that is what puzzle me where is the error. Which line is the error being pointed on your side?

Hi,

You’ll need to explain the dynamics of this first and what you are trying to achieve.

It looks to me as the whole thing could be a background image with the labels just absolutely placed over the tyres as required.

I can’t quite grasp where you are going with this and you certainly wouldn’t want all those images in the html.

Dear Paul,
They dynamics is that the image will build based on the values in the db. For eg. if there is 10 tyres with specific layout then it will build accordingly. NExt thing I have drag and drop operation the tyre that is why I cant use a single background image. Hope I am clearer now? Here is my latest link over here I did not manage to put the text over the image but the images are slighty out http://183.78.169.53/tyre2/swap2.html

Hi,

I’m still not getting the functionality but perhaps you can work backwards from a display that is working as follows.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tyres{
    width:400px;
    float:left;
}
.tyres span{
    display:inline-block;
    position:relative;
}
.tyres b{
    position:absolute;
    bottom:0px;
    left:2px;
    width:30px;
    color:#fff;
}
.t1 img{vertical-align:bottom;display:block;margin:0}
.t1 .mid{margin-top:-25px}
.t1{clear:both;overflow:hidden;margin-bottom:-5px}
</style>
</head>

<body>
<div class="tyres">
    <div class="t1">
         <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
         <span class="mid"><img src="http://183.78.169.53/tyre2/longJoinAxle.png"></span>
         <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
    </div>
    <div class="t1">
         <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
         <span class="mid"><img src="http://183.78.169.53/tyre2/centerLongJoinFirstAxle.png" ></span>
         <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
    </div>
    <div class="t1">
         <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
         <span class="mid"><img src="http://183.78.169.53/tyre2/shortJoin.png"></span>
         <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
         <span class="mid"><img src="http://183.78.169.53/tyre2/centerJoinLastAxle.png" ></span>
        <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
         <span class="mid"><img src="http://183.78.169.53/tyre2/shortJoin.png"></span>
         <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
    </div>
</div>
</body>
</html>


You must have a full doctype as your example is rendering completely different in every browser. My example above renders the same.

You can’t nest divs inside spans as spans can only hold inline content.

Dear Paul,
Ok let me re-explain the functionality. Is basically to represent a vehicle tyre layouts. As you different vehicles got different number of tyres and how they are spread out. Based on selected vehicle it should show its relevant layout. What is the job of the full doctype and how it will be use full? I tried your example even it renders different IE and firefox though. Looks better in firefox but not good in IE. Why before this I did all way ok like how in this link http://183.78.169.53/tyre2/page3.html and if you test this works fine in all browser. Then your version is here Untitled Document. The problem now in this example I have even the droppable and draggable functionality.

Have you got all day:)

No web page in this day and age should be without a doctype. If you have no doctype on the page then all versions of IE from ie9 downwards will forget all the enhancements made in the last 10 years and render much the same as IE5. You will lose the ability to hover on elements other than anchors and all the new css selectors will be void.

Without a doctype IE renders in quirks mode and uses the broken box model where borders and padding are added inside the element rather than being added to it resulting in vast differences between browsers. there are many many other differences and other browers have various differences where no doctype is present and different rendering modes.

You just do not build pages without a doctype these days.

Eric Meyer on CSS: Picking a Rendering Mode
Activating Browser Modes with Doctype

I tried your example even it renders different IE and firefox though. Looks better in firefox but not good in IE.

You removed the white space from the html and it affected the rendering in IE. If you copy and paste my original it works fine from IE7+.

I’ve adjusted the code to allow for the whitespace collapse but it seems your small joining elements are the wrong size to fit which is why I added the white space in before. Therefore I’ve changed the image size attributes in the html for those 2 smaller elements.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tyres {
    width:400px;
    float:left;
}
.tyres span {
    display:inline-block;
    position:relative;
    vertical-align:bottom
}
.tyres b {
    position:absolute;
    bottom:3px;
    left:2px;
    width:30px;
    color:#fff;
}
.t1 img {display:block;}
.t1 .mid {vertical-align:bottom}
.t1 {
    clear:both;
    overflow:hidden;
  word-spacing:-.25em; /* hide whitespace nodes*/
    display:table;
    width:100%;
}
.t1 *{word-spacing:0;}
</style>
</head>
<body>
<div class="tyres">
    <div class="t1"><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span> <span class="mid"><img src="http://183.78.169.53/tyre2/longJoinAxle.png"></span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span></div>
    <div class="t1"><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img src="http://183.78.169.53/tyre2/centerLongJoinFirstAxle.png" ></span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span></div>
    <div class="t1"><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/shortJoin.png"></span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img src="http://183.78.169.53/tyre2/centerJoinLastAxle.png" ></span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/shortJoin.png"></span><span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span></div>
</div>
</body>
</html>


the above looks the same from ie6+ and firefox/safari etc.

Each span is defined as inline-block so it behaves much the same as an image stacked side by side (as in your original example). You should be able to move each block as required with this structure.

Dear Paul,
So I have to discipline myself to put doctype in all my pages from now onwards. Thank you for that. Then another thing what do you mean by this “You removed the white space from the html”. Which part is it? So drag and drop now can work properly right?

When you have inline elements or inline block elements then the space between them is just like the space between words.

You wouldn’t expect to write something like this:

“Hello there”

and then have the browser strip the white space and say:

“hellothere”

Its the same with images and inline (and inline-block) elements and any space between the elements is treated as white space just like it is with words.

Hopefully the last code I gave you is white space agnostic and doesn’t matter how you format it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tyres {
    width:400px;
    float:left;
}
.tyres span {
    display:inline-block;
    position:relative;
    vertical-align:bottom
}
.tyres b {
    position:absolute;
    bottom:3px;
    left:2px;
    width:30px;
    color:#fff;
}
.t1 img {display:block;}
.t1 .mid {vertical-align:bottom}
.t1 {
  clear:both;
  overflow:hidden;
  word-spacing:-.25em; /* hide whitespace nodes*/
  display:table;
  width:100%;
}
.t1 *{word-spacing:0;}
</style>
</head>
<body>
<div class="tyres">
    <div class="t1">
            <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>         
            <span class="mid"><img src="http://183.78.169.53/tyre2/longJoinAxle.png"></span>
            <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
        </div>
        <div class="t1">
            <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
            <span class="mid"><img src="http://183.78.169.53/tyre2/centerLongJoinFirstAxle.png" ></span>
            <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
        </div>
    <div class="t1">
            <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
            <span class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/shortJoin.png"></span>
            <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
            <span class="mid"><img src="http://183.78.169.53/tyre2/centerJoinLastAxle.png" ></span>
            <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
            <span class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/shortJoin.png"></span>
            <span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
        </div>
</div>
</body>
</html>

I think you should be able to work with that bud I don’t know anything about drag and drop js though.

Dear Paul,
I am learning out your codes. This part dont quite get it. Another thing here is my latest link http://183.78.169.53/tyre2/page5.html. If you notice the first row the left tyre has a bit of space and the the second the right tyre and the axle got a little space. Is it possible to remove them too?

clear:both;
overflow:hidden;
word-spacing:-.25em; /* hide whitespace nodes*/
display:table;
width:100%;

That link isn’t working for me - seems to be corrupt.

Never mind I looked at my original and I can see the white space you mention but this is nothing to do with the css or html as the space is included on your images.

If you load those images into your editor you will see that there is white space on the image itself so you will need to redraw them more accurately.:slight_smile:

http://183.78.169.53/tyre2/centerLongJoinFirstAxle.png
http://183.78.169.53/tyre2/longJoinAxle.png

Dear Paul,
I would like to ask your opinion. Currently I draw them separately and then try to linke them together. So in that process while adjusting I notice cause this white space problem. So what is your opinion do it this way or draw a whole big picture and slice it later?

Dear Paul,
I just tried the mid with a new image and the link is here http://183.78.169.53/tyre2/newSet/page5.html. The problem again all my tyres have gone to the left. What is my mistake ya? I just replace the image names only.

Dear Paul,
Another thing. I have now tried to further add my drag and drop scripts. Then I need separate div some thing like this. So when I add the extra div all my tyres images gone to left and not anymore on a single line just like I change my mid image in my previous post. What tweaking need to be done here?

<div class=“t1”>
<div class=“droppable”>
<span><b>R11</b><img class=“draggable” src=“tyre2.png” ></span>
</div>

	&lt;span class="mid"&gt;&lt;img src="longJoin1.png"&gt;&lt;/span&gt;
	
	&lt;div class="droppable"&gt;
	&lt;span&gt;&lt;b&gt;R11&lt;/b&gt;&lt;img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" &gt;
	&lt;/span&gt;
  &lt;/div&gt;
 
&lt;/div&gt;

Dear Paul,
Any idea? Thank you.

As far as I can see there is no need for the extra div. You can use the span wrapper that is already in place. That’s why I wrapped them in spans so that you had individual units to use.

e.g.


 <div class="t1">
           [B] <span class="droppable"[/B]><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>         
            <span class="mid"><img src="http://183.78.169.53/tyre2/longJoinAxle.png"></span>
            [B]<span class="droppable"[/B]></span><b>R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span>
        </div>

There’s no point in adding the extra div as well because the span is already a container.

Of course I haven’t seen an example of the drag and drop behaviour so I’m working blind here a bit.:slight_smile:

Dear Paul,
Ok I have just used the spand it works quite fine. I got one problem can you visit this link http://183.78.169.53/tyre2/newSet/page5.html. I just purposely change the image in this mid span <span class=“mid”><img src=“longJoin.png”></span> and both tyres again become vertical. Why this problem ya?