Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE problem streatched image with low z index used as a background covers over content

    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:

    Code:
    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:

    Code:
    <!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>

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •