LinkBack URL
About LinkBacks
making it all proportionate
My page is made up of a series of small images (25x25) and I would like to make everything proportional to the page. I have done that using this (found on-line but altering slightly);
index.cssHTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> </script> <link href="Index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="bg"><img src="Image.jpg" width="`2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""></div> <div id="bg2"><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""><img src="Image.jpg" width="2%" height="4%" alt=""></div> </body> </html>
It works in Firefox perfectly but in Internet Explorer (at least IE7) and Safari it shifts some images to the next row. How can I get it to act the same as FF??Code:@charset "utf-8"; /* ITB Style Sheet Suthor bo 2008*/ <style type="text/css"> /* pushes the page to the full capacity of the viewing area */ html {height:100%;} body {height:100%; margin:0; padding:0;} /* prepares the background image to full capacity of the viewing area */ #bg {position:relative; top:0; left:0; width:100%; height:100%; align:center} #bg2 {position:relative; top:25; left:0; width:100%; height:100%;} #bg3 {position:relative; top:50; left:0; width:100%; height:100%;} /* places the content ontop of the background image */ #content {position:relative; z-index:1;} </style> <!--[if IE 6]> <style type="text/css"> /* some css fixes for IE browsers */ html {overflow-y:hidden;} {overflow:-x:hidden;} body {overflow-y:hidden;} {overflow-x:hidden;} #bg {position:relative; top:0; left:0; z-index:-1;} #bg2 {position:relative; top:25; left:0; z-index:-1;} #bg3 {position:relative; top:50; left:0; z-index:-1;} #content {position:relative;} </style> <![endif]-->
Edit:
I should add that at full screen for all browsers I want the pixels of each image to be 25x25 but to reduce with the window size.
Reply With Quote
