[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2004-11-18
18
Medium Priority
?
164 Views
Last Modified: 2010-04-09
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?
0
Comment
Question by:apresto
  • 8
  • 8
  • 2
18 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 12613124
Yes, the page has been coded incorrectly.

So let's see it.
0
 
LVL 23

Author Comment

by:apresto
ID: 12614076
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12615537
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 23

Author Comment

by:apresto
ID: 12617681
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
 
LVL 23

Author Comment

by:apresto
ID: 12623250
http://i.domaindlx.com/derekDIG/

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

Expert Comment

by:seanpowell
ID: 12624818
There is another way to do all this... back later :-)

Sean
0
 
LVL 2

Expert Comment

by:dtolo
ID: 12624946
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12626802
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
 
LVL 23

Author Comment

by:apresto
ID: 12629185
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
 
LVL 23

Author Comment

by:apresto
ID: 12629283
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 1000 total points
ID: 12629382
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
 
LVL 2

Expert Comment

by:dtolo
ID: 12629788
That was a nice job Sean.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12629852
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
 
LVL 23

Author Comment

by:apresto
ID: 12631188
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
 
LVL 23

Author Comment

by:apresto
ID: 12637934
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12639070
No problem, and thanks :-)

Sean
0
 
LVL 23

Author Comment

by:apresto
ID: 12677321
i think i have sussed it, thanks for you help, very much appreciated!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12680045
That's great, and thanks :-)
Sean
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question