By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,446 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,446 IT Pros & Developers. It's quick & easy.

Srinking Images, Colour Odditys, javascript restrictions

P: 49
Hello guys,

Hope you dont mind me asking multiple questions under the one thread.

1. I have the problem of an unsourced image with height and width set in css shrinking in firefox, I would like them to remain the direct size as im using them to pad out the structure of the site.

2. The background colour is different on different versions of IE, not sure how this could possibily be as its a hex, RGB surely isn't up to their person interpretation.

3. At the moment I use javascript to do my hover effect and click to hide a div effect. But I would like to do this in a language that the browswers dont have disactivated as default.

thanks

Dan
Feb 1 '08 #1
Share this Question
Share on Google+
5 Replies


drhowarddrfine
Expert 5K+
P: 7,435
How to get a quicker, more complete answer.

3) The hover can be accomplished using CSS but not the 'click to hide'. CSS is presentation, not behavior.
Feb 1 '08 #2

P: 49
How to get a quicker, more complete answer.

3) The hover can be accomplished using CSS but not the 'click to hide'. CSS is presentation, not behavior.
HTML:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>blah</title>

<link rel="stylesheet" type="text/css" href="TemplateCSS.css" />
<script type="text/javascript" src="TemplateJS.js"></script>

</head>

<body>
<div id="global">
<div id="sideBar">
<img id="logoPicture" src="planet.bmp" alt="logo" />

<ul id="navigationList">
<li>Nexus</li>
<li>Mining</li>
<li>Processing</li>
<li>Battle Centre</li>
<li>Ship Yard</li>
<li>Scanning</li>
<li>Construction</li>
<li>Research</li>
<li>Power Control</li>
</ul>
<hr />
<ul id="communityOptions">
<li>Politics</li>
<li>Mail</li>
<li>Planet Defenses</li>
</ul>
<hr />
<ul id="accountOptions">
<li>Log out</li>
<li>Settings</li>

</ul>
<hr />
</div>
<div id="mainContent">
<div id="playerInfo">

<p id="welcomeMess">Welcome to 'region_name' imperator 'character_name'</p>
<p id="serverTime">Server Time:21:23:12</p>

<table id="resourcesTable">
<tbody>
<tr>
<td class="pictureCell"><img class="resTabPic" src="Random.bmp" alt="piccy" /></td>
<td class="nameCell">mehblahbla</td>
<td class="dataCell">99999 m<sup>3</sup></td>

<td class="tableSpacer"></td>

<td class="pictureCell"><img class="resTabPic" src="Random.bmp" alt="piccy" /></td>
<td class="nameCell">mehblahbla</td>
<td class="dataCell">99999 m<sup>3</sup></td>
</tr>
<tr>
<td class="pictureCell"><img class="resTabPic" src="Random.bmp" alt="piccy" /></td>
<td class="nameCell">mehblahbla</td>
<td class="dataCell">99999 m<sup>3</sup></td>

<td class="tableSpacer"></td>

<td class="pictureCell"><img class="resTabPic" src="Random.bmp" alt="piccy" /></td>
<td class="nameCell">mehblahbla</td>
<td class="dataCell">99999 m<sup>3</sup></td>
</tr>
<tr>
<td class="pictureCell"><img class="resTabPic" src="Random.bmp" alt="piccy" /></td>
<td class="nameCell">mehblahbla</td>
<td class="dataCell">99999 m<sup>3</sup></td>

<td class="tableSpacer"></td>

<td class="pictureCell"><img class="resTabPic" src="Random.bmp" alt="piccy" /></td>
<td class="nameCell">mehblahbla</td>
<td class="dataCell">99999 m<sup>3</sup></td>
</tr>
<tr>
<td class="pictureCell"><img class="resTabPic" src="Random.bmp" alt="piccy" /></td>
<td class="nameCell">Population</td>
<td class="dataCell">40/60 Million</td>

<td class="tableSpacer"></td>

<td class="pictureCell"><img class="resTabPic" src="Random.bmp" alt="piccy" /></td>
<td class="nameCell">Power Usage</td>
<td class="dataCell">13/30 GigaWatts</td>
</tr>
</tbody>
</table>
<div id="infoVisibility" onclick="visInfo()">▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲</div>
</div>

<!-- ********Page Content*********** -->
<div id="pageTitleDiv">
Research
</div>

<div class="researchOption">
Nexus
<img class="researchTabPic" src="" alt="piccy" />
<p class="researchTabInfo">Researched: 2 <br /> Available: 6</p>
</div>
<div class="researchOption">
Mining
<img class="researchTabPic" src="" alt="piccy" />
<p class="researchTabInfo">Researched: 2 <br /> Available: 6</p>
</div>
<div class="researchOption">
Processing
<img class="researchTabPic" src="" alt="piccy" />
<p class="researchTabInfo">Researched: 2 <br /> Available: 6</p>
</div>
<div class="researchOption">
Battle Centre
<img class="researchTabPic" src="" alt="piccy" />
<p class="researchTabInfo">Researched: 2 <br /> Available: 6</p>
</div>
<div class="researchOption">
Ship Yard
<img class="researchTabPic" src="" alt="piccy" />
<p class="researchTabInfo">Researched: 2 <br /> Available: 6</p>
</div>
<div class="researchOption">
Scanning
<img class="researchTabPic" src="" alt="piccy" />
<p class="researchTabInfo">Researched: 2 <br /> Available: 6</p>
</div>
<div class="researchOption">
Construction
<img class="researchTabPic" src="" alt="piccy" />
<p class="researchTabInfo">Researched: 2 <br /> Available: 6</p>
</div>
<div class="researchOption">
Research
<img class="researchTabPic" src="" alt="piccy" />
<p class="researchTabInfo">Researched: 2 <br /> Available: 6</p>
</div>
<div class="researchOption">
Power Control
<img class="researchTabPic" src="" alt="piccy" />
<p class="researchTabInfo">Researched: 2 <br /> Available: 6</p>
</div>

<!-- ******End Page Content******** -->





</div>
</div>
</body>
</html>
[/HTML]


CSS:
Expand|Select|Wrap|Line Numbers
  1. html,body
  2. {
  3.     margin: 0px;
  4.     padding: 0px;
  5.     height: 100%;
  6.     width: 100%;
  7.     background-color: #E6EDF5;
  8. }
  9.  
  10.     div#global
  11.     {
  12.         position: relative;
  13.         width: 701px;
  14.         height: 900px;
  15.         background-color: #F7F9E0;
  16.         margin: auto;
  17.         border-left: #963 solid 1px;
  18.         border-right: #963 solid 1px;
  19.     }
  20.  
  21.  
  22.         div#sideBar
  23.         {
  24.             position: relative;
  25.             width: 150px;
  26.             height: 100%;
  27.  
  28.  
  29.             float:left;
  30.         }
  31.  
  32.             img#logoPicture
  33.             {
  34.                 height: 150px; 
  35.                 width: 150px;
  36.                 border-bottom: #963 solid 1px;
  37.             }
  38.  
  39.             div#sideBar ul
  40.             {
  41.                 padding: 0px;
  42.                 margin-left: auto;
  43.                 margin-right: auto;
  44.                 margin-bottom:0px;
  45.                 margin-top: 0px;
  46.             }
  47.  
  48.  
  49.  
  50.                 div#sideBar li
  51.                 { 
  52.                     list-style-type:none;
  53.                     margin-top: 2px;
  54.                     margin-bottom: 2px;
  55.                     margin-left: auto;
  56.                     margin-right: auto;
  57.  
  58.                     padding: 2px;
  59.                     width: 110px;
  60.  
  61.                     text-align: center;
  62.                     border: 1px solid #D4E0EE;;
  63.                     background-color: #E6EDF5;
  64.                     color: #4F76A3;
  65.  
  66.                 }
  67.  
  68.  
  69.  
  70.  
  71.         div#mainContent
  72.         {
  73.             positon: relative;
  74.             width:550px;
  75.             height: 100%;
  76.             padding: 0px;
  77.             margin: 0px;
  78.             background-color: #F7F9E0;
  79.             border-left: #963 solid 1px;
  80.             float:left;
  81.         }
  82.  
  83.             div#playerInfo
  84.             {
  85.                 position: relative;
  86.                 width: 550px;
  87.                 height: 150px;
  88.                 padding: 0px;
  89.                 margin:0px;
  90.                 background-color: #F7F9E0;
  91.                 border-bottom: #963 solid 1px;
  92.                 overflow:hidden;
  93.  
  94.             } 
  95.                 p#welcomeMess
  96.                 {
  97.                     float: left;
  98.                     margin-top: 3px;
  99.                     margin-bottom: 6px;
  100.                     margin-left: 10px;
  101.                     margin-right: 6px;
  102.                     padding: 2px;
  103.  
  104.                     text-align: center;
  105.                     border: 1px solid;
  106.                     background-color: #E6EDF5;
  107.                     border-color: #D4E0EE;
  108.                     color: #4F76A3;
  109.                 }
  110.  
  111.                 p#serverTime
  112.                 {
  113.                     float: right;
  114.                     margin-top: 3px;
  115.                     margin-bottom: 6px;
  116.                     margin-left: 6px;
  117.                     margin-right: 10px;
  118.                     padding: 2px;
  119.  
  120.                     text-align: center;
  121.                     border: 1px solid;
  122.                     background-color: #E6EDF5;
  123.                     border-color: #D4E0EE;
  124.                     color: #4F76A3;
  125.                 }
  126.  
  127.                 table#resourcesTable
  128.                 {
  129.                    width:538px;
  130.                    margin-left: 6px;
  131.                    margin-right: 6px;
  132.                    margin-top: 0px;
  133.                    margin-bottom: 0px;
  134.                 }
  135.  
  136.                     table#resourcesTable td 
  137.                     {
  138.                         background-color: #E6EDF5;
  139.                         padding: 0px;
  140.                         margin: 0px;
  141.                         color: #4F76A3;
  142.                     }
  143.  
  144.                         table#resourcesTable td.pictureCell
  145.                         {
  146.                             width: 20px;
  147.                             height: 20px;
  148.                         }
  149.  
  150.                             table#resourcesTable td img.resTabPic
  151.                             {
  152.                                 width: 20px;
  153.                                 height: 20px;
  154.                             }
  155.  
  156.                         table#resourcesTable td.nameCell
  157.                         {
  158.                             width: 122px;
  159.                             height: 20px;
  160.                         }
  161.  
  162.  
  163.                         table#resourcesTable td.dataCell
  164.                         {
  165.                             width: 122px;
  166.                             height: 20px;
  167.                         }
  168.  
  169.                         table#resourcesTable td.tableSpacer
  170.                         {
  171.                             width: 10px;
  172.                             background-color: #F7F9E0;
  173.                         }
  174.  
  175.  
  176.                 div#infoVisibility
  177.                 {
  178.                     position: absolute;
  179.                     bottom: 0px;
  180.  
  181.                     text-align: center;
  182.                     letter-spacing: 12px;
  183.                     font-size:10px;
  184.                     overflow:hidden;
  185.  
  186.  
  187.  
  188.                     width: 550px;
  189.                     height: 15px;
  190.  
  191.                     border-top: #963 solid 1px;
  192.  
  193.                     background-color: #E6EDF5;
  194.                     color: #4F76A3;
  195.  
  196.                 }
  197.         div#pageTitleDiv
  198.         {
  199.             text-align: center;
  200.             width: 550px;
  201.             height: 70px;
  202.             background-color: #E6EDF5;
  203.             margin: 0px;
  204.             padding: 0px;
  205.             position: relative;
  206.             overflow:hidden;
  207.             font-size:60px;
  208.             color:#4F76A3;
  209.             border-bottom: 1px solid #D4E0EE;;
  210.  
  211.         }
  212.  
  213.         div.researchOption
  214.         {
  215.             position: relative;
  216.             float: left;
  217.  
  218.             width: 130px;
  219.             height: 180px;
  220.  
  221.             margin: 18px;
  222.             padding: 0px;
  223.             text-align: center;
  224.             font-size: 20px;
  225.  
  226.             border: 1px solid #D4E0EE;
  227.             background-color: #E6EDF5;
  228.             color: #4F76A3;
  229.             overflow: hidden;
  230.  
  231.         }
  232.  
  233.             img.researchTabPic
  234.             {
  235.                 width: 100px;
  236.                 height: 100px;
  237.                 padding: 0px;
  238.                 margin-top: 5px; 
  239.                 margin-bottom: 0px; 
  240.                 margin-left: 0px; 
  241.                 margin-right: 0px;             
  242.                 border: 1px solid #D4E0EE;
  243.  
  244.             }
  245.  
  246.             p.researchTabInfo
  247.             {
  248.                 font-size: 15px;
  249.                 margin:5px;
  250.                 padding: 0px;
  251.             }
  252.  

Javascript
Expand|Select|Wrap|Line Numbers
  1. window.onload = windowLoad;
  2.  
  3. function windowLoad() 
  4. {
  5.  
  6.     hoverController();
  7.     siteProtection();
  8.  
  9. }
  10.  
  11.  
  12. function hoverController()
  13. {
  14.     var sideBar = document.getElementById('sideBar');
  15.     var listElements = sideBar.getElementsByTagName('li');
  16.     var max = listElements.length;
  17.     for(var i=0; i<max; i++) 
  18.     {
  19.         listElements[i].onmouseover=function() 
  20.         {
  21.             this.style.backgroundColor=  "#E8F4FF"; 
  22.             this.style.borderColor= "#404080";
  23.             this.style.color= "#404080";
  24.             this.style.cursor= "pointer"; 
  25.         }
  26.         listElements[i].onmouseout=function() 
  27.         {
  28.             this.style.backgroundColor= "#E6EDF5";
  29.             this.style.borderColor= "#D4E0EE";
  30.             this.style.color= "#4F76A3"; 
  31.         }    
  32.     }
  33.  
  34.  
  35.     var infoHiderDiv = document.getElementById('infoVisibility');
  36.     infoHiderDiv.onmouseover=function() 
  37.     { 
  38.         this.style.backgroundColor= "#E8F4FF";
  39.         this.style.color= "#404080";
  40.         this.style.cursor= "pointer";
  41.     }
  42.     infoHiderDiv.onmouseout=function() 
  43.     {
  44.        this.style.backgroundColor= "#E6EDF5";
  45.        this.style.color= "#4F76A3";
  46.     }
  47. }
  48.  
  49.  
  50. function siteProtection()
  51. {
  52.     var htmlBody = document.getElementsByTagName('body');
  53.     htmlBody[0].ondragstart= function(){return false};
  54.     htmlBody[0].onselectstart= function(){return false};
  55. }
  56.  
  57.  
  58. function visInfo()
  59. {
  60.     var playerInfo = document.getElementById('playerInfo');
  61.     var divButton = document.getElementById('infoVisibility');
  62.     if(playerInfo.style.height == "16px")
  63.     {
  64.         playerInfo.style.height = "150px";
  65.         divButton.innerHTML = "▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲";
  66.     }
  67.     else
  68.     {
  69.         playerInfo.style.height = "16px";
  70.         divButton.innerHTML = "▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼";
  71.     }
  72. }
  73.  
Feb 4 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
1) Since there is no source for the image, there is no content for the div, and Firefox is properly collapsing the div. Size the div instead of the image. Using images for spacing (spacer.gifs) is very old school, though.
Feb 4 '08 #4

P: 49
1) Since there is no source for the image, there is no content for the div, and Firefox is properly collapsing the div. Size the div instead of the image. Using images for spacing (spacer.gifs) is very old school, though.
So ill have to put every single image into a div to stop firefox ignoring the dimensions of the unsourced images?
Feb 5 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
Not just Firefox. All browsers except IE which is doing it wrong.
Feb 5 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.