...

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>

vineet
12-24-2009, 05:08 AM
dont use absolute positions alone.

they will disturb your layout on different resolution screens.

vineet

chopficaro
12-24-2009, 05:14 AM
if i try relative it doesnt work

chopficaro
12-24-2009, 05:16 AM
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

vineet
12-24-2009, 05:37 AM
absolute positions divs should be used in connection with relative divs. see this example



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

chopficaro
12-24-2009, 06:09 AM
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:


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

vineet
12-24-2009, 06:14 AM
can you post a online page link

vineet

chopficaro
12-24-2009, 06:44 AM
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:


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="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>

chopficaro
12-24-2009, 07:25 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum