Staff Widget Problems?!

by NewFoundStories July 16th 2017, 3:43 am

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Screenshot of problem : https://i.servimg.com/u/f11/18/80/16/07/th/7ofkd010.png , https://i.servimg.com/u/f11/18/80/16/07/th/f9zdtf10.png
Who the problem concerns : All members
When the problem appeared : 7/15/2017
Forum link : http://oponline.forumotion.com/

Description of problem

Alrighty, so heres whats going on. I made this code many moons ago for another site I was on, and decided I wanted to reuse this bad boy. But I lost the actual saved page (as my computer crashed) and when back to said site in question to re-grab the code. But the thing is, and I can't figure this out for the life of me,

The pictures and words aren't going in the proper spots, as you can see with the screen shots the hover image is ontop where the banner is, the name of the staff members, much to low. (It should look like this; https://i.imgur.com/zyELl2d.png )

However it doesn't. I have the full code here;

Spoiler:

Code:: <div class="customwidg"> <div class="otms"> <div style="text-shadow: 0px 0px 1px #000000; font-family: Nixie One; text-transform: uppercase; font-size: 25px; font-weight: bold;"> <span style="color: #ebb87d;"> STAFF TEAM,</span> </div> <p> </p> <center> <div style="margin-top: 190px; border-bottom: 1px dotted #e1e1e1; font-family:Calibri; font-size:11px; color:#e1e1e1; text-transform:uppercase; text-align:justify; padding:5px; letter-spacing:1; line-height:1;"> <script type="text/javascript"> // copyright 1998 Idocs, Inc. http://www.idocs.com/tags/ // Distribute this script freely, but please keep this // notice with the code. // var image information object var mloi=new Object(); // set the image for swapping function setswap() { if (! document.images)return; var imgInfo=new Object(); imgInfo.defaultImg = new Image(); imgInfo.defaultImg.src = document.images[arguments[0]].src; imgInfo.opts = new Object(); for (var i=1; i < arguments.length; i=i+2) { imgInfo.opts[arguments[i]]=new Image(); imgInfo.opts[arguments[i]].src = arguments[i+1]; } mloi[arguments[0]] = imgInfo; } // set up the link for swapping function swap(link,imgName,optName) { if (! document.images)return; if (! link.swapReady) { link.imgName = imgName; link.onmouseout = swapBack; link.swapReady = true; } document.images[imgName].src=mloi[imgName].opts[optName].src; } function swapBack() {document.images[this.imgName].src=mloi[this.imgName].defaultImg.src} // </script><br /> <div style="position: absolute; top: 50px; left: 50px; border:2px solid #e1e1e1; width:100px; height:100px;"> <img style="width: 100px; height: 100px;" id="showperson" border="2px solid #e1e1e1" align="right" src="http://i.imgur.com/GxuZduq.png" /> </div><script type="text/javascript"> setswap("showperson", 'Kuro-pyon', 'http://i.imgur.com/XAmYVEm.png', 'Leam', 'http://i.imgur.com/nZtWuzw.png', 'Kana', 'http://i221.photobucket.com/albums/dd204/tegukaa/tfm%20icons/008/edge005-tfm.png', 'Chimi', 'http://i.imgur.com/VR7pQ78.png', 'Toby', 'http://i.imgur.com/pujhy.png', 'Rogue', 'http://i.imgur.com/gYEGCCv.png'); // </script><a style="text-decoration: none" onmouseover="swap(this,'showperson','Kuro-pyon')" href="http://lostgenerations.darkbb.com/u1">Kuro-pyon<br /><br /></a> <a style="text-decoration: none" onmouseover="swap(this,'showperson','Leam')" href="http://lostgenerations.darkbb.com/u3">Leam<br /><br /></a> <a style="text-decoration: none" onmouseover="swap(this,'showperson','Kana')" href="http://lostgenerations.darkbb.com/u4">Kana<br /><br /></a> <a style="text-decoration: none" onmouseover="swap(this,'showperson','Chimi')" href="http://lostgenerations.darkbb.com/u344">Chimi<br /><br /></a> <a style="text-decoration: none" onmouseover="swap(this,'showperson','Toby')" href="http://lostgenerations.darkbb.com/u268">Toby<br /><br /></a> <a style="text-decoration: none" onmouseover="swap(this,'showperson','Rogue')" href="http://lostgenerations.darkbb.com/u289">Rogue<br /><br /></a> </div> </center> </div> </div>

With that the border wraps I have around it are customs; I'm unsure if you'll need that code but here it is;

Spoiler:

I've tried using margin codes as well as the position code as you'll see inside of the code. The fully original code is as I said lost, I just really want this to work. Someone please help me! It would mean a lot.