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

Yes, the page has been coded incorrectly.

So let's see it.

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.

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

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

http://i.domaindlx.com/derekDIG/

i have uploaded the pages and what it SHOULLD look like to this site, please advise, thanks

There is another way to do all this... back later :-)

Sean

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.

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

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

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

That was a nice job Sean.

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

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!!!

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

No problem, and thanks :-)

Sean

i think i have sussed it, thanks for you help, very much appreciated!

That's great, and thanks :-)
Sean