Advanced Search

Results 1 to 2 of 2

Thread: Images wont resize to fit browser window in IE

  1. #1
    Join Date
    Dec 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Images wont resize to fit browser window in IE

    works in FireFox, page looks the same no matter how u resize the window:
    http://img63.imageshack.us/img63/3264/firefoxview.png


    looks bad in IE:
    http://img63.imageshack.us/img63/8986/ieview.png

    css:

    Code:
    body
    {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    }
    
    #content
    {
    height: 100%;
    width: 100%;
    position:absolute;
    z-index:2;
    }
    
    img#bg
    {
    width:100%;
    height:100%;
    position:absolute;
    z-index:1;
    }
    
    img#titleimg 
    {
    width:100%;
    height:100%;/*new*/
    }
    
    img#mainmenuimg 
    {
    text-align:center;
    width:30%;
    height:100%;/*new*/
    }
    
    img#analogskillsimg 
    {
    width:40%;
    height:60%;
    }
    
    img#programmingimg 
    {
    float:right;
    vertical-align:bottom;
    width:40%;
    height:60%;
    }
    
    img#analogskillstext 
    {
    vertical-align:bottom;
    width:40%;
    height:100%;/*new*/
    }
    
    img#programmingtext
    {
    float:right;
    width:40%;
    height:100%;/*new*/
    }
    
    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%;
    }
    xhtml:

    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. #2
    Join Date
    Dec 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks 4 ur help, i got it

    apparently IE doesn't know how to stretch a table as the browser window stretches

    so i did it all with separate images and absolute positioning, for much shorter code:
    Code:
    body
    {
    position:absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    }
    
    img#bg
    {
    width:100%;
    height:100%;
    position:absolute;
    z-index:1;
    }
    
    #content
    {
    position:absolute;
    z-index:2;
    height: 100%;
    width: 100%;
    }
    
    img#titleimg 
    {
    position:absolute;
    width:100%;
    height:17%;
    right:0%;
    top:0%;
    }
    
    img#mainmenuimg 
    {
    position:absolute;
    text-align:center;
    width:30%;
    height:10%;
    right:35%;
    bottom:0%;
    }
    
    img#analogskillsimg 
    {
    position:absolute;
    width:40%;
    height:50%;
    left:0%;
    bottom:30%;
    }
    
    img#programmingimg 
    {
    position:absolute;
    float:right;
    vertical-align:bottom;
    right:0%;
    bottom:30%;
    width:40%;
    height:50%;
    }
    
    img#analogskillstext 
    {
    position:absolute;
    vertical-align:bottom;
    left:0%;
    bottom:20%;
    width:40%;
    height:10%;
    }
    
    img#programmingtext
    {
    position:absolute;
    right:0%;
    bottom:20%;
    width:40%;
    height:10%;
    }
    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="main2.css" />
    </head>
    <body>
    
    <img src="backgroundfire2.gif" alt="background image" id="bg" />
    
    <div id="content">
    <img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" />
    <img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" />
    <img src="programmingpic.jpg" alt="background image" id="programmingimg" />
    <img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" />
    <img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" />
    <img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" />
    </div>
    
    </body>
    </html>

Bookmarks

Posting Permissions

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