Can someone explain???

liunx · Jan 9, 2008

Why when I run a html page from my hard drive. It is fine, more precisely, what I want. 
 
And when I run it off the net the buttons jump up like Mexican jumping beans. 
 
Link to website version. (<a class="postlink" href="http://www.birkemusik.dk/test/Testing.html">http://www.birkemusik.dk/test/Testing.html</a>) 
Link to Zip file, so you can run it from you hard drive.(Really small) (<a class="postlink" href="http://www.birkemusik.dk/test/Website_tester.zip">http://www.birkemusik.dk/test/Website_tester.zip</a>) 
 
The images are so get bigger when you scroll over them individually, but as it is now, the whole div tag jump up then the individual image increases.

Any advice.that typically happens when ther is a container smaller then image size,which means that the div element that contains all images its width,height does not match that of the lager images. 
 
Second you have couple more problems,Put the stylesheet import in one line,and there is no load function in the document.Thx. 
 
You lost me on a few things though. 
 
1) There are no pre set WxH for the DIV element, and the images themselves are the same WxH, both large and small, so that shouldn't effect, the div tags. Finally, if this is true about the WxH of the div tags effecting this, why does the version on the hard drive is no effected, where as the one on the net is. 
 
2) Thank for the note on the style sheet import, the reason the load script it not there, is because I stripped it down to only the element that are directly involved in the problem, i.e. the buttons. A) to make sure there is no conflict, and B) It makes it easier to solve when looking at it. The load command it left over from the full web page.Ok the code now looks like this: 
 
<div class="bottom" > 
<div style="text-align:center;" width="420" height="50"> 
 
<a HREF=http://www.webdeveloper.com/forum/archive/index.php/"Website" onmouseover="showButton('1_ON')" onmouseout="showButton('1_OFF')"><IMG 
 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"pictures/guitar.png" ALT="String" BORDER="0" ALIGN=middle name=button1></a> 
<a HREF=http://www.webdeveloper.com/forum/archive/index.php/"Website" onmouseover="showButton('2_ON')" onmouseout="showButton('2_OFF')"><IMG 
 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"pictures/sax.png" ALT="Winds" BORDER="0" ALIGN=middle name=button2></a> 
<a HREF=http://www.webdeveloper.com/forum/archive/index.php/"Website" onmouseover="showButton('3_ON')" onmouseout="showButton('3_OFF')"><IMG 
 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"pictures/piano.png" ALT="Piano" BORDER="0" ALIGN=middle name=button3></a> 
<a HREF=http://www.webdeveloper.com/forum/archive/index.php/"Website" onmouseover="showButton('4_ON')" onmouseout="showButton('4_OFF')"><IMG 
 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"pictures/cello.png" ALT="Cello" BORDER="0" ALIGN=middle name=button4></a> 
<a HREF=http://www.webdeveloper.com/forum/archive/index.php/"Website" onmouseover="showButton('5_ON')" onmouseout="showButton('5_OFF')"><IMG 
 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"pictures/drum.png" ALT="String" BORDER="0" ALIGN=middle name=button5></a> 
<a HREF=http://www.webdeveloper.com/forum/archive/index.php/"Website" onmouseover="showButton('6_ON')" onmouseout="showButton('6_OFF')"><IMG 
 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"pictures/xilaphone.png" ALT="Xilaphone" BORDER="0" ALIGN=middle name=button6></a> 
<a HREF=http://www.webdeveloper.com/forum/archive/index.php/"Website" onmouseover="showButton('7_ON')" onmouseout="showButton('7_OFF')"><IMG 
 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"pictures/singing.png" ALT="Singing" BORDER="0" ALIGN=middle name=button7></a> 
<a HREF=http://www.webdeveloper.com/forum/archive/index.php/"Website" onmouseover="showButton('8_ON')" onmouseout="showButton('8_OFF')"><IMG 
 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"pictures/together.png" ALT="Together" BORDER="0" ALIGN=middle name=button8></a> 
 
</div> 
</div> 
 
 
Unfortunately it did not help.

Here take a look and see what I meant.. 
 
<a class="postlink" href="http://68.145.35.86/temp/Website_tester/Testing.html">http://68.145.35.86/temp/Website_tester/Testing.html</a>Does it help to specify a width and height for the images? e.g. 
 
<a HREF=http://www.webdeveloper.com/forum/archive/index.php/"Website" onmouseover="showButton('8_ON')" onmouseout="showButton('8_OFF')"> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"pictures/together.png" ALT="Together" BORDER="0" ALIGN="middle" name="button8" width="24" height="30"></a> 
 
Or whatever your width and height are.Ok, getting closer to an anwer, but a hell of a lot more question. 
 
Did a test (<a class="postlink" href="http://www.birkemusik.dk/test/testing1.html">http://www.birkemusik.dk/test/testing1.html</a>) 
 
I add the border to 1, which quickly show me the problem. the pictures were at different sizes, when they are not suppose to be. 
 
So I force the width height of the buttons to the size the should be. In this example, 97X44 for the guitar. 
 
I then notice that the image while the mouse was not over, was pixalated.

That should not be, the 2 pictures, guitar, and guitar1, both have the same WxH. Guitar sinply has more white around it. 
 
So I inserted the 2 picture side by side to see what was going on. Lo and behold the pictures are 2 different sizes. 
Right click on them to see properties, and they are different WxH, but if I open the pictures, after triple checking they have the same WxH. So some how, so reason, the white in the around the picture in guitar is being croped off.

*goes away, and comes back* 
 
Fixed!!! the file names where the same from previous sites, guitar, and so on. There was a detail I notice on the small picture, a detail that has been removed a while a go. I flushed the server, and did a complete new upload, and renamed the pictures, to more unique names, and it work. The server was using the old file which were at a smaller WxH than they are now, to allow for the white border surrounding. 
 
Take a look (<a class="postlink" href="http://www.birkemusik.dk/test/testing2.html">http://www.birkemusik.dk/test/testing2.html</a>) 
 
Thanks a lot for your time, and efforts though, hopfully one day I will know enough not to bug you guys. Or at the very least, to check EVERY possible scenario before posting.

Can someone explain???

liunx

Guest