473,394 Members | 1,709 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > srinking images, colour odditys, javascript restrictions

Join Bytes to post your question to a community of 473,394 software developers and data experts.

Srinking Images, Colour Odditys, javascript restrictions

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
5 1460
drhowarddrfine
7,435 Expert 4TB
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
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
7,435 Expert 4TB
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
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
7,435 Expert 4TB
Not just Firefox. All browsers except IE which is doing it wrong.
Feb 5 '08 #6

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

Similar topics

1
WML & colour images
by: Dave Weaver | last post by:
. We have an old WML1-based WAP site, and I have been asked to investigate updating it to use colour images for modern WAP devices. As I understand it (correct me if I'm wrong) colour image...
.NET Framework
3
Reloading different images every second
by: src_mag | last post by:
Hello, I'd like to write JavaScript code that refreshes a frame once a second loading a different image each time. Basically, here's what the script would do: 0 sec load img0.gif 1 sec load...
Javascript
11
How to prevent download of images on my pages.
by: moondaddy | last post by:
I have images that I need to prevent the user from doing a right click and selecting "Save Picture As"? How can I do this? -- moondaddy@nospam.com
ASP.NET
6
How to enable print background colour and images option through javascript
by: Piyu | last post by:
Hi, I am working in jsp pages.in that i used background colour for heading through css.and those colours(heading, image background colour also) are not coming in printing. from my machine i...
Javascript
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!