Log in

View Full Version : Images wont resize to fit browser window in IE


chopficaro
12-24-2009, 04:52 AM
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:



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:




<!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, 07:23 PM
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:

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%;
}
<!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>