chopficaro
12-23-2009, 03:27 PM
im having trouble with z indexes and IE
im trying to make an intro page to my website, looks real nice in firefox, no matter how you stretch the browser window the page looks the same.
i needed to stretch a background image, and the only way i knew how to do that was to fake a background image. i just stretched a normal image across the browser window and gave it a z-index of -1. works in firefox but not in IE, all u can see is the background image, as if its covering the rest of the content. my first guess was that IE may not support negative z-indexes, so i wrapped div tags around everything except my fake background image, gave it an id of CONTENT and gave it a z-index of 2, but it didnt change anything.
just to make sure i did it right i tried removing the backgrounds z-index, which would give it a default z-index of 0, but with my new content div tag, the content should still have been above the fake background in firefox. IT WASNT! so that makes me think that i made the content div tag wrong, but i cant find any mistakes.
css:
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#content
{
z-index:2;
}
img#bg
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}
img#titleimg
{
width:100%;
}
img#mainmenuimg
{
text-align:center;
width:30%;
}
img#analogskillsimg
{
width:40%;
height:60%;
}
img#programmingimg
{
float:right;
vertical-align:bottom;
width:40%;
height:60%;
}
img#analogskillstext
{
vertical-align:bottom;
width:40%;
}
img#programmingtext
{
float:right;
width:40%;
}
table.introlayout
{
width:100%;
height:100%;
}
td.introtitle
{
width:100%;
height:10%;
}
td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}
td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}
td.menu
{
text-align:center;
width:100%;
height:10%;
}
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patrick Allard's Very Graphic Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<img src="backgroundfire2.gif" alt="background image" id="bg" />
<div id="content">
<table class="introlayout">
<tr>
<td class="introtitle">
<img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" />
</td>
</tr>
<tr>
<td class="skillpics">
<img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" />
<img src="programmingpic.jpg" alt="background image" id="programmingimg" />
</td>
</tr>
<td class="skilltext">
<img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" />
<img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" />
</td>
</tr>
<td class="menu">
<img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" />
</td>
</tr>
</table>
</div>
</body>
</html>
im trying to make an intro page to my website, looks real nice in firefox, no matter how you stretch the browser window the page looks the same.
i needed to stretch a background image, and the only way i knew how to do that was to fake a background image. i just stretched a normal image across the browser window and gave it a z-index of -1. works in firefox but not in IE, all u can see is the background image, as if its covering the rest of the content. my first guess was that IE may not support negative z-indexes, so i wrapped div tags around everything except my fake background image, gave it an id of CONTENT and gave it a z-index of 2, but it didnt change anything.
just to make sure i did it right i tried removing the backgrounds z-index, which would give it a default z-index of 0, but with my new content div tag, the content should still have been above the fake background in firefox. IT WASNT! so that makes me think that i made the content div tag wrong, but i cant find any mistakes.
css:
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#content
{
z-index:2;
}
img#bg
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}
img#titleimg
{
width:100%;
}
img#mainmenuimg
{
text-align:center;
width:30%;
}
img#analogskillsimg
{
width:40%;
height:60%;
}
img#programmingimg
{
float:right;
vertical-align:bottom;
width:40%;
height:60%;
}
img#analogskillstext
{
vertical-align:bottom;
width:40%;
}
img#programmingtext
{
float:right;
width:40%;
}
table.introlayout
{
width:100%;
height:100%;
}
td.introtitle
{
width:100%;
height:10%;
}
td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}
td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}
td.menu
{
text-align:center;
width:100%;
height:10%;
}
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patrick Allard's Very Graphic Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<img src="backgroundfire2.gif" alt="background image" id="bg" />
<div id="content">
<table class="introlayout">
<tr>
<td class="introtitle">
<img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" />
</td>
</tr>
<tr>
<td class="skillpics">
<img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" />
<img src="programmingpic.jpg" alt="background image" id="programmingimg" />
</td>
</tr>
<td class="skilltext">
<img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" />
<img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" />
</td>
</tr>
<td class="menu">
<img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" />
</td>
</tr>
</table>
</div>
</body>
</html>