PDA

View Full Version : Spacing on top and bottom of pictures in Firefox using script...



ee8
12-17-2009, 04:47 PM
Hopefully this is a noob and simple question to answer, but I used this random ads script and modified it to show random boxarts for PS3 games..
http://javascript.internet.com/miscellaneous/random-ads.html


You can see what I'm trying to do here:
http://empireelite.org/index2.htm - (temporary page just for testing the code, refresh and see that the PS3 boxarts become randomized)


Everything looks perfect in Internet Explorer, but in Firefox it looks to have about 15px in spacing on both top and bottom. I know the table itself is fine, because everything fits fine on the real main page http://www.empireelite.org/


The pictures are also not overlapping the cell. It's 9 pics x 22 width, (198px in a 200px wide cell) and it has the same spacing even if I just have 1 pic there using the script.


Is there a code I can add or remove to get rid of the spacing in Firefox?


I already removed , spacing from this line:
function randomorder(targetarray, spacing) {

and removed +spacing from this line:
document.write(targetarray[the_one]+spacing)


Neither did anything and the script works the same way without those small pieces of code (I'm not sure what either of them did to begin with).



Here is the javascript page I'm using:
http://empireelite.org/randomAds.js

And also View Source in this test page:
http://empireelite.org/index2.htm

Kor
12-17-2009, 05:03 PM
IE considers images somehow as block-level elements, thus they support CSS margins. Other browsers consider images as inline-level elements, thus they can not have margins.

You may give your images a CSS display:block if you want to gain margins in all the browsers, but, if so, you might need to set a certain CSS float for them.

ee8
12-17-2009, 05:11 PM
IE considers images somehow as block-level elements, thus they support CSS margins. Other browsers consider images as inline-level elements, thus they can not have margins.

You may give your images a CSS display:block if you want to gain margins in all the browsers, but, if so, you might need to set a certain CSS float for them.


Thanks for the reply, I don't understand most of what you just said though. Do you see something specifically wrong with the coding I have? Something missing that I could add or something that's there that I should take away?

I don't want to gain margins, I want to get rid of them when displayed on the firefox browser. If you have both IE and FF, look at IE (I have IE7, don't know if it looks the same in IE8 or not), that's what I'm looking to have it look like in Firefox also.

gusblake
12-17-2009, 09:39 PM
He means gain the ability to control the margins, which you would if you added display:block.

The problem with that is that it would cause the images not to display all on the same line.

This can be fixed by adding float:left.

so,



<style>
img.boxart{
margin:0;
display:block;
float:left}
</style>
And add class="boxart" to the images

EDIT: no need for any of that, just take the first set of images out of the <p>

or if you want to keep the align=center, add style="margin:0" to the <p>

ee8
12-18-2009, 07:24 AM
He means gain the ability to control the margins, which you would if you added display:block.

The problem with that is that it would cause the images not to display all on the same line.

This can be fixed by adding float:left.

so,



<style>
img.boxart{
margin:0;
display:block;
float:left}
</style>
And add class="boxart" to the images

EDIT: no need for any of that, just take the first set of images out of the <p>

or if you want to keep the align=center, add style="margin:0" to the <p>



Copy. Will try this right now. Whether it works or not, this was a great way to help noobs. Explaination and then the code, perfection. Thank you.

ee8
12-18-2009, 07:56 AM
F yes! Nice. OK... your coding got rid of the bottom spacing, then deleting the <p align center got rid of the top spacing.

Looks good and works in both IE7 and FF now...



The only thing is in FF it's not showing the ALT description.

But I found my own fix via google... just switch the alt= tags to title=. IE supports the popup text for either tag (alt or title), but firefox only pops up the text with the title tag and not alt.


Thank you very much gusblake.



Edit to add: also left in
border: none;
because without it, it had a blue border around each pic.


In your html page
in head tag


<style>
img.boxart{
margin:0;
border: none;
display:block;
float:left}</style>
<script type="text/javascript" src="ps3boxart.js"></script>


in body tag (place whereever in the body you want the pictures to show)


<script type="text/javascript">
randomorder(ps3ba, '')
</script>



In a seperate .js file in the same folder (this one I have as ps3boxart.js)


var ps3ba=new Array()
ps3ba[0]='<a href="http://www.amazon.com/God-War-III-Playstation-3/dp/B000ZK9QCS/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261056951&sr=8-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/gow3.jpg" class="boxart" title="God of War III"></a>'
ps3ba[1]='<a href="http://www.amazon.com/Heavy-Rain-Playstation-3/dp/B002CZ38KA/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059415&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/hr.jpg" class="boxart" title="Heavy Rain"></a>'
ps3ba[2]='<a href="http://www.amazon.com/Killzone-2-Playstation-3/dp/B000FQBF1M/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059510&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/kz2.jpg" class="boxart" title="Killzone 2"></a>'
ps3ba[3]='<a href="http://www.amazon.com/LittleBigPlanet-Game-Year-Playstation-3/dp/B002ELCUUG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059556&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/lbp.jpg" class="boxart" title="LittleBigPlanet"></a>'
ps3ba[4]='<a href="http://www.amazon.com/Metal-Gear-Solid-Patriots-Playstation-3/dp/B000FQ2D5E/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059605&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/mgs4.jpg" class="boxart" title="Metal Gear Solid 4"></a>'
ps3ba[5]='<a href="http://www.amazon.com/Ratchet-Clank-Future-Crack-Playstation-3/dp/B00275A7LI/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059662&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rcfacit.jpg" class="boxart" title="Ratchet & Clank Future: A Crack In Time"></a>'
ps3ba[6]='<a href="http://www.amazon.com/Resistance-Fall-Man-playstation-3/dp/B000JLIXIG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059703&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rfom.jpg" class="boxart" title="Resistance: Fall of Man"></a>'
ps3ba[7]='<a href="http://www.amazon.com/Uncharted-Drakes-Fortune-Playstation-3/dp/B000UW21A0/ref=sr_1_2?ie=UTF8&s=videogames&qid=1261059750&sr=1-2"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc.jpg" class="boxart" title="Uncharted: Drakes Fortune"></a>'
ps3ba[8]='<a href="http://www.amazon.com/Uncharted-2-Among-Thieves-Playstation-3/dp/B001JKTC9A/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059750&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc2.jpg" class="boxart" title="Uncharted 2: Among Thieves"></a>'

function randomorder(targetarray) {
var randomorder=new Array()
var the_one
var z=0
for (i=0;i<targetarray.length;i++)
randomorder[i]=i

while (z<targetarray.length) {
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
document.write(targetarray[the_one])
targetarray[the_one]="_selected!"
z++
}
}
}



Then obviously, you would use this as a baseline and change your .js file name to whatever your pictures are for, like ads.js or whichever. Change the links in ahref to whereever you want each page to link. Change the image locations in img src to whereever your images are saved. Remember, where it says var z=0... this is where you hide extra random images. For example, my 200px cell only fits 9 22px wide images (they equal 198px). I only have 9 in my ps3 boxart image folder. If I want 50 in there... I would upload the pics to the folder with the other ones, add them to the list in the .js file. Such as ps3ba[9]=, ps3ba[10]=, etc. up to [49] (49 + 1 for [0] = 50). Then since I can only fit 9 in my cell, I would have to change the variable to var z=41 (to hide 41 of them and only show 9).

Hope this helps somebody. Good luck.