bunglebrown
New Member
- Messages
- 157
- Reaction score
- 0
- Points
- 0
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.css
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??
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.
HTML:
<!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>index.css
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]-->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??
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.
Last edited:
