...

View Full Version : IE problem streatched image with low z index used as a background covers over content



chopficaro
12-23-2009, 06:23 AM
what a popular website this seems to be

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>

chopficaro
12-24-2009, 04:39 AM
ive made some headway on my own. ive eliminated the negitive z value and the problem of not being able to see any of the content in IE, we can see it now, but it doesnt re-size to fit the browser window properly. ill need to post a similar question with the new code and a different title so that people who know the answer will know what the new question is by the specific title, pleaser dont bash be for double posting as i dont think this counts



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum