unwanted cracks display in "fake imagemap"

liunx

Guest
(Edit: Problem explained underneath is now solved)<br />
<br />
<br />
Check it out and you'll see what I mean.<br />
<br />
The "image map" table (<!-- m --><a class="postlink" href="http://www.student.uib.no/~st08094/loshunder2.html">http://www.student.uib.no/~st08094/loshunder2.html</a><!-- m -->) (*-note at bottom)<br />
<br />
I created it in a combo of notepad, frontpage and dreamweaver (somehow it refused to be displayed properly when I tried dreamweaver only). I only checked it in Opera and it seemed fine. Then I tried it in Internet Explorer too, and it shows these horizontal cracks between the rows. For some reason it only shows cracks between rows and not between columns.<br />
<br />
I cut up the original image in many parts( so that I could mock the effect of an image map). Then I made a table corresponding to the mosaic and put the images in the cells where they bbelonged. I've made sure to specify the cell size to correpsond with the associated image size. ALso I set borders to be 0 and so on.<br />
<br />
Why is that and how do I make the cracks disappear? I have an earlier version that displays properly in all browsers but that one is without the javascript code and the links within the cells to other documents so it's not much use. And it took me quite a while to put it together. I can't see what the differece is between them- there's obvioulsy something strange about my table. <br />
<br />
I'd appreciate it if anyone had an idea.<br />
<br />
PS: If you take a look at the code, please excuse the general messiness and unnessescary code in the rest of the document (this is a page for private use and it's a lot of cut and paste from templates to save time). <br />
<br />
(*): I am currently working on this problem. So if the image displays properly that probably means I have found a solution. And if it's gone that surely has a reason too...<!--content-->Try setting following for images, links and tables in style sheet:<br />
<br />
padding: 0px<br />
border: 0px<br />
margin: 0px<br />
<br />
Also, if it still does not work, try to increase and/or decrease the size of the images by 1-2 pixels and view effect in various browsers.<br />
<br />
Good luck.<!--content-->I have tried changing the size of the images. <br />
<br />
It has only a barely visible effect as it will only stretch the image within that "ghost frame"- it will not apply to the horizontal white spaces- they seem to exist neither within the cell, nor as a part of the image. And I have spesified no space between images, please. <br />
<br />
Anyway I thought sticking to the exact rules would be the proper solution as the browsers follow those exact rules? This is not a case of getting an image to move a little bit left or right, it is placing an image within a cell of exactly the same size therefore it should work...at least that was what I thought yesterday...<!--content-->but those images are making the cells spilt farther apart, that is what you are seeing. make the table bigger and see if that helps.<!--content-->It's also odd that the table is displayed prefectly both in Frontpage and Dremweaver preview mode plus in the Opera browser - can this have something to do with IE and Netscape failing to follow/render the w3c standards good enough?<br />
I find that hard to believe but can't see any alternate explanation...<!--content-->ok I can tell you right now it is your images that are making your table spread out. if you put the bgcolor="#ff0000" in your table you can see which ones are doing it. image v_e5.gif and v_d3.gif are wider than v_topp to is it pushing the table out. and one of the combonation of images on the right are bigger than the image on the left which is making it go longer in height to stretch the table out.<br />
<br />
so the combination of your images in the right cell have to equal the total width for the v_topp.gif and v-bunn.gif images.<br />
<br />
same goes for the height. right now they are all different sizes. so if you look at your html you will see that the little images add up to the width of the topp and bottom images, which they don't.<br />
<br />
it has nothing to do with specifications.<br />
<br />
actually it is better to use an image slicer so you don't have to do all the calculations by yourself. so if you have the full image of the right then you could use a program to cut them up.<!--content-->OK, thanks. Colouring the cracks red makes it a bit easier to see what parts of the world that needs healing. I'll try and work from there.<!--content-->Heisan Haslund! ;)<br />
<br />
I see in your html that there is a lot of breaks and white space inside your table cells! Try eliminating those!<br />
<br />
<br />
<br />
LIKE THIS:<br />
<br />
<td>your table data</td><br />
<br />
INSTEAD OF THIS:<br />
<br />
<td>your table data <br />
</td><br />
<br />
<br />
Voff!<!--content-->Ahhh that I didn't think of that (sorry browsers for doubting you in my darkest hour, of course the fault was mine)! Good thing others can notice then. Thanks Arika, those cracks in the continents are now gone. The world is officially a better place.<!--content-->
 
Back
Top