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 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    dont use absolute positions alone.

    they will disturb your layout on different resolution screens.

    vineet

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    if i try relative it doesnt work

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    if i try relative, a scroll bar appears and the content appears below the background instead of on top of it, screwing it up in both IE and Firefox

  • #5
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    absolute positions divs should be used in connection with relative divs. see this example

    Code:
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    body{
    margin:0px;
    padding:0px;
    }
    #im{
    width:100%;
    height:100%;
    }
    #imgg{
    z-index:0;
    position:relative;
    top:0px;
    }
    #content{
    color:#FFFF00;
    position:absolute;
    z-index:999999;
    top:0;
    float:left;
    }
    </style>
    </head>
    
    <body>
    <div id="content">asdfasdf asdfas <p>asdfasdf</p> asdasdf <p>asdadsf</p></div><div id="imgg"><img src="firefoxview.png" id="im" /></div>
    
    </body>
    </html>
    vineet

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i only have 2 position tags on the page and ive tried all combinations of absolute and relative. it doesn't matter weather i use absolute or relative for the background image, nothing changes and it still looks bad in IE.

    but if i use relative for the content, the content gets pushed below the background image, it cant be done

    somehow the code u gave me pushes the content to the side of the background:

    css:

    Code:
    body
    {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    }
    
    img#bg
    {
    width:100%;
    height:100%;
    position:relative;
    z-index:1;
    top:0px
    }
    
    #content
    {
    position:absolute;
    z-index:999999;
    top:0;
    float:left;
    height: 100%;
    width: 100%;
    }
    
    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%;
    }
    Last edited by chopficaro; 12-24-2009 at 06:19 AM.

  • #7
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    can you post a online page link

    vineet

  • #8
    New Coder
    Join Date
    Dec 2009
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    no i cant afford any of those server fees right now, but ill post the code again with all the jpgs renamed jpg.jpg and all the gifs renamed gif.gif, so u can take just 2 pics and put them in the folder with the css file and the xhtml file and u can simulate the layout easy

    thanks 4 ur patience by the way

    oh and also i was mistaken about it being ok for the content to be relative, they BOTH have to be ABSOLUTE. it looked ok at first, but then i realized that in fire fox, if i stretched the browser window, and the content was relative, the content would only stretch side to side and not up and down like it should

    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="gif.gif" alt="background image" id="titleimg" />
    
    </td>
    </tr>
    <tr>
    <td class="skillpics">
    
    <img src="jpg.jpg" alt="background image" id="analogskillsimg" />
    <img src="jpg.jpg" alt="background image" id="programmingimg" />
    
    </td>
    </tr>
    <td class="skilltext">
    
    <img src="gif.gif" alt="background image" id="analogskillstext" />
    <img src="gif.gif" alt="background image" id="programmingtext" />
    
    </td>
    </tr>
    <td class="menu">
    
    <img src="gif.gif" alt="background image" id="mainmenuimg" />
    
    </td>
    </tr>
    </table> 
    
    </div>
    
    </body>
    </html>

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


  •  

    Posting Permissions

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