Page with DIV's Looks different on different machines...on Same Network!?

Hi,

I have created an heirarchy chart using DIV positioning and a few javascript functions to hide and show different images onmouseover of different things

I finished the page on mymachine, i was very happy - I looked at it on my bsses machine and felt like hanging myself!!!

Any ideas why god hates me?
LVL 23
aprestoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
Yes, the page has been coded incorrectly.

So let's see it.
0
aprestoAuthor Commented:
The oage is alot bigger than this but this is an example of some of the code:

<!-- BOSSES UNDER LINDA MASLEN -->

<table width="900" border="0" lightbordercolor="black" cellspacing="0" bordercolor="#000000">
      <tr>
       <th style="background-color: #75A3D0; border-left-style: solid; border-left-width: 1; border-top-style: solid; border-top-width: 1">Jill Jones</th>
       <th style="background-color: #C9DBED; border-left-style: solid; border-left-width: 1; border-top-style: solid; border-top-width: 1">Dave Morton</th>
       <th style="background-color: #75A3D0; border-left-style: solid; border-left-width: 1; border-top-style: solid; border-top-width: 1">Sandie Bisset</th>
       <th style="background-color: #C9DBED; border-left-style: solid; border-left-width: 1; border-top-style: solid; border-top-width: 1">Duncan McCombie</th>
       <th style="background-color: #75A3D0; border-left-style: solid; border-left-width: 1; border-top-style: solid; border-top-width: 1">VACANT</th>
       <th style="background-color: #C9DBED; border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1">Graduates and PA's</th>
      </tr>
      <tr>
     <td align="center" width="150" onmouseover="hideAll();showMe('JJimage');showMe('JillJoneslabel');showMe('StuartSmith');showMe('LizRothwell');showMe('HelenBailey');
showMe('NikkiCoombe');showMe('KatieHofsetter');showMe('LizMoore');showMe('SusannahHoskins')" style="background-color: #75A3D0;
border-left-style: solid; border-left-width: 1"><img src="images/ManOne.jpg" width="100" height="120" alt="This is Jill Jones, Sales and
 Billing Manager" border="1"></td>
     <td align="center" width="150" onmouseover="hideAll();showMe('DaveMortonImage');showMe('DaveMortonlabel');showMe('JulieOreilly');showMe('Simonchannon');
showMe('PhilWalker');showMe('JulianTranter')" style="background-color: #C9DBED; border-left-style: solid; border-left-width: 1">
<img src="images/mantwo.jpg" width="100" height="120" alt="This is Dave Morton, Collections Manager" border="1"></td>
     <td align="center" width="150" onmouseover="hideAll();showMe('SandieBissetimage');showMe('SandieBissetlabel');showMe('MaureenFerguson');showMe('HelenLuty');
showMe('JaneDickinson');showMe('AndyPatterson');showMe('JackiePearce');showMe('LisaHowse');showMe('Vacancy')"
style="background-color: #75A3D0; border-left-style: solid; border-left-width: 1"><img src="images/Manthree.jpg" width="100" height="120"
 alt="This is Sandie Bisset, Change and Information Manager" border="1"></td>
     <td align="center" width="150" onmouseover="hideAll();showMe('DuncanMcCombieImage');showMe('DuncanMccombieLabel');showMe('Vacancy1');showMe('SteveKingston');
showMe('BryonyOlliffLee');showMe('LizGroves');showMe('CarolineHand');showMe('KateHowell');showMe('JayneSmall');showMe('ChrisBetteridge');
showMe('RogerDooley')" style="background-color: #C9DBED; border-left-style: solid; border-left-width: 1"><img src="images/Manfour.jpg"
width="100" height="120" alt="This is Duncan McCombie, Process and Contracts Manager" border="1"></td>
     <td align="center" width="150" onmouseover="hideAll();showMe('CSopsimage');showMe('CsoperationsLabel');showMe('EamonnTreanor');showMe('LindaBennett');
showMe('JustinHulbert');showMe('KarenGiddings');showMe('VeronicaFranks')" style="background-color: #75A3D0;
border-left-style: solid; border-left-width: 1"><img src="images/Manfive.gif" width="80" height="80"
alt="This position is currently vacant" border="1"></td>
     <td align="center" width="150" onmouseover="hideAll();showMe('gradsAndPaImage');showMe('GradsandPaLabel');showMe('JacobEngel');showMe('PaulCatterall');
showMe('KimCook');showMe('CarolineHutchings');showMe('VictoriaWilkins')" style="background-color: #C9DBED;
border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1">
<img src="images/Mansix.jpg" width="100" height="120" alt="I dont know hwo this is!" border="1"></td>
      </tr>
      <tr>
        <td style="background-color: #75A3D0; border-left-style: solid; border-left-width: 1; border-bottom-style: solid;
border-bottom-width: 1" align="center">Sales and Billing Manager</td>
        <td align="center" style="background-color: #C9DBED; border-left-style: solid; border-left-width: 1;
 border-bottom-style: solid; border-bottom-width: 1">Colleciton Manager</td>
        <td align="center" style="background-color: #75A3D0; border-left-style: solid; border-left-width: 1;
 border-bottom-style: solid; border-bottom-width: 1">Change & Information Manager</td>
        <td align="center" style="background-color: #C9DBED; border-left-style: solid; border-left-width: 1;
border-bottom-style: solid; border-bottom-width: 1">Process and Contracts Manager</td>
        <td style="background-color: #75A3D0; border-left-style: solid; border-left-width: 1; border-bottom-style: solid;
border-bottom-width: 1" align="center">CS Operations</td>
        <td align="center" style="background-color: #C9DBED; border-left-style: solid; border-left-width: 1; border-right-style: solid;
border-right-width: 1; border-bottom-style: solid; border-bottom-width: 1">Unknown</td>
      </tr>
</table>
</div>

<!-- MANAGERS UNDER EACH BOSS -->

<Div ID="JJimage" style="visibility:hidden;cursor:hand;position:absolute; top: 401; left: 20" align="center">
          <div ID="JillJoneslabel"><br><h3>Jill Jones' Team</h3></div>
          <div id="StuartSmith" style="visibility:hidden;cursor:hand;position:absolute; top: 45; left: 10" onmouseover="hideAll();showMe('JJimage');showMe('StuartSmith');showMe('LizRothwell');showMe('HelenBailey');showMe('NikkiCoombe');
showMe('KatieHofsetter');showMe('LizMoore');showMe('SusannahHoskins');showMe('StuartsmithTeamLeaders');showMe('ShaileenNewson');
showMe('MichelleWhitaker');showMe('GarethParry');showMe('AngelaPugh')">
<img border="1" src="images/StuartSmith.jpg" width="80" height="90" alt="This is Stuart Smith, Manager of Sales Investigation and Billing"></div>
          <div id="LizRothwell" style="visibility:hidden;cursor:hand;position:absolute; top: 45; left: 120" onmouseover="hideAll();showMe('JJimage');showMe('StuartSmith');showMe('LizRothwell');showMe('HelenBailey');showMe('NikkiCoombe');
showMe('KatieHofsetter');showMe('LizMoore');showMe('SusannahHoskins');showMe('LizRothwellTeamLeaders');showMe('IanHooker');
showMe('CarrieHancox');showMe('MikeSullivan');showMe('LesleyBreading');showMe('KimMapplethorpe');showMe('SteveChanock')">
<img border="1" src="images/LizRothwell.jpg" width="80" height="90" alt="This is Liz Rothwell, Manager of Billing and Cash Control"></div>
          <div id="HelenBailey" style="visibility:hidden;cursor:hand;position:absolute; top: 45; left: 230" onmouseover="hideAll();showMe('JJimage');showMe('StuartSmith');showMe('LizRothwell');showMe('HelenBailey');showMe('NikkiCoombe');
showMe('KatieHofsetter');showMe('LizMoore');showMe('SusannahHoskins');showMe('BernieBishop');showMe('JuliaMurphy');showMe('WendyAdams');
showMe('DuncanMcAllister');showMe('TraceyDebono');showMe('ChrisLarken');showMe('Vacant3');showMe('JillNaldi');showMe('MarkMaidment');
showMe('GillRandall');showMe('SallyAnnHarvey');showMe('AnneMarieEmms');showMe('SarahRichmond');showMe('Lisarobinson')">
<img border="1" src="images/HelenBailey.jpg" width="80" height="90" alt="This is Helen Bailey, Manager of Billing Call Centres"></div>
          <div id="NikkiCoombe" style="visibility:hidden;cursor:hand;position:absolute; top: 45; Left: 340" onmouseover="showMe('NikkiCoombeDesc')">
<img border="1" src="images/NikkiCoombe.jpg" width="80" height="90" alt="This is Nikki Coombe, Manager of Billing Call Centres"></div>
          <div id="KatieHofsetter" style="visibility:hidden;cursor:hand;position:absolute; top: 45; left: 450" onmouseover="showMe('KatieHofsetterDesc')">
<img border="1" src="images/KatieHofsetter.jpg" width="80" height="90" alt="This is Katie Hofsetter, Manager of Meter Reading"></div>
          <div id="LizMoore" style="visibility:hidden;cursor:hand;position:absolute; top: 45; left: 560" onmouseover="showMe('LizMore')">
<img border="1" src="images/LizMoore.jpg" width="80" height="90" alt="This is Liz Moore, Manager of 'New Customers'"></div>
          <div id="SusannahHoskins" style="visibility:hidden;cursor:hand;position:absolute; top: 45; left: 670" onmouseover="hideAll();showMe('SusannahHoskinsDesc')">
<img border="1" src="images/SussannahHoskins.jpg" width="80" height="90" alt="This is Sussannah Hoskins, Manager of Sales Investigation and Billing"></div>
</div>


I have now re-coded it so its looks abit different but before i was using an image and positioning it with DIVS to make it look like the images that appeared on the rollover were joined to the source image (which when rollever over displayes these images).

But even with this code some of the images are positioned incorrectly on the page.

Do i need to code the positioning differently, i tried using relative positioning but it was weird, i had to use minus numbers to position images in the right place?

You should know i was introduced to DIV positioning yesterday so im not to familiar with them.
0
seanpowellCommented:
It's going to be impossible to debug this without seeing the page in action, but that may not be possible.

A couple of items:

1. Use a doctype as the first line of your page, before the <html> tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

2. Anywhere you have a value, you "must" specify a unit. And watch the capitalization.
top: 45; Left: 340;   becomes   top: 45px; left: 340px;


3. This line:
<Div ID="JJimage" style="visibility:hidden;cursor:hand;position:absolute; top: 401; left: 20" align="center">
I have no idea what that is positioned "to", but it won't work in anything other than IE if it's inside a table.

4. This looks like about 10 times the amount of code needed to do what I "think" you're doing.
The more code, the more chance of it breaking - but without actually seeing the page live, I can't me of much more use...

Sean
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

aprestoAuthor Commented:
thanks for your help.

I dont have the page with me as i forgot it at work but ill host it tomoro and post the link in here.

Trust me, when i started this i didnt think it would be this much code!

Thanks for your time, ill post back tomoro
0
aprestoAuthor Commented:
http://i.domaindlx.com/derekDIG/

i have uploaded the pages and what it SHOULLD look like to this site, please advise, thanks
0
seanpowellCommented:
There is another way to do all this... back later :-)

Sean
0
dtoloCommented:
It looks good on my browser check your bosses monitor resolution, I think that with this page you have to pick a minimum resolution that it will support (800x600)

Also, I think the contract and brightness needs adjusting on your pictures.
0
seanpowellCommented:
Okay, took a closer look...

All you need is some of these:
<li>

Some of these:
:hover

and 6 lines of javascript.

http://www.pdgmedia.com/ee/derek.html

Sean
0
aprestoAuthor Commented:
wow seanpowell, the source of that was about 100 times less that what i am using at the moment!!! Im gonna have a deeper look into it and tr and userstand it all then ill post back - Thanks man - that works great - MUCH quicker aswell
0
aprestoAuthor Commented:
hey dtolo,

i thought it was the screen resolution at first, but i changed my won screen res to 800X600 from 1280X1204 (or something) and it worked fine on mine but on anyother PC it went scu whif - i might have a solution now but does anyone know why this happened?

Also SeanPowell - Is the javascript you are using for that page in a style sheet?

How exactly did you hide the images etc on mouseover, i cant see if from the code
0
seanpowellCommented:
The mouseover is in 2 parts.

This, for IE - because it does not support hover on anything other than an <a> tag.:

function sfHover()
{
      var sfEls = document.getElementById("nav").getElementsByTagName("li");
      for (var i=0; i<sfEls.length; i++)
      {
            sfEls[i].onmouseover=function()
            {
                  this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function()
            {
                  this.className=this.className.replace(new RegExp("sfhover\\b"), "");
            }
      }
}

and then we just call the script with this:
ul#nav li:hover ul, ul#nav li.sfhover ul
{
      position: absolute;
      left: 0;
}

The first part is for conforming browsers, the second uses the IE script.

All we're really doing here is saying, when the mouse moves over an <li> tag, make the nested <ul> tag visible, and then hide it again on mouseout.

All the CSS and js is here:
http://www.pdgmedia.com/ee/derek.css
http://www.pdgmedia.com/ee/derek.js



Sean
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dtoloCommented:
That was a nice job Sean.
0
seanpowellCommented:
Thanks - I actually needed a diversion today, so the timing was good.
It's not often enough that I get to play for my own sake, instead of those nasty paying clients :-)

Sean
0
aprestoAuthor Commented:
Sean Powell you have helped me out alot, im going to downlopad the sheets you linked me to and use them with my code and ill post back when i get a chance - thanks for all your help so far - i Genuin Expert!!!
0
aprestoAuthor Commented:
Hi Seanpowell, i have doenloaded the files from that server space so if u like you can remove them, i dont want to be clogging up your space.

Ill get back to this soon, i am swamped with other work
0
seanpowellCommented:
No problem, and thanks :-)

Sean
0
aprestoAuthor Commented:
i think i have sussed it, thanks for you help, very much appreciated!
0
seanpowellCommented:
That's great, and thanks :-)
Sean
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.