I'm still waking up so I don't totally get what the mess is on your browser there, but it's not working, I get that. It's interesting since the code I submitted works in IE7, FF3, Op 9.5 on Windows, didn't try it in older browsers or on Mac. I'll submit my whole page markup so you can look for differences and play around with it.
IE doesn't really support
min-width but is supposed to treat
width like
min-width. Did IE 7 start supporting min-width? Probably. You can put IE specific conditional comments in your head to account for older version and maybe fix this problem -- give it a try.
<head>
<!--[if lt IE 7]>
<style type="text/css">
#wrapper{
width: 200px;
}
</style>
<![endif]-->
</head>
That's my best guess
Here's the whole page ...
<!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>
<style type="text/css">
#wrapper {
position: absolute;
right: 100px; /* put it anywhere */
top: 20px; /* put it anywhere */
min-width: 200px;
}
#wrapper img {
width: 200px; /* will auto-scale height */
}
#message {
border: 3px solid black;
white-space: nowrap;
}
#message b {
display: block;
text-align: center; /* selective centering */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="message">
<b>Light of God</b>
The light of God surrounds me.<br>
The love of God enfolds me.<br>
The power of God protects me.<br>
The presence of God watches over me.<br>
Wherever I am, God is.<br>
</div>
<img src="http://www.lovingmemoriesofmemphis.com/backgrounds/prayerhands.jpg" />
</div>
</body>
</html>
Does the image become non-proportional when using
min-width in your browser, or is it not proportional when you assign only a width value without a specific height -- because it should auto-scale the non-specified dimension? I wouldn't use min-width anyway on an image--never tried it really.
Good luck