Css max width and height properties in internet explorer?

[Andy92]

For the following problem, you need to go to the following address...

http://www.allsortshop.com/about/new...cle.php?read=5

When users post comments, and they post an image with the tag in the comments box at the bottom of my page, if their image is like 800px wide, this is the code i use to resize it...

This is the php code to post the comments...

$imgtag = array("[img]", "[/img]");
$replacetag = array("<img src='","' id='usr'>");
$newcomment = str_replace($imgtag, $replacetag, $row2[comments]); 
//$postedcomment = wordwrap($newcomment,66, "<br>\n", 1);
$postedcomment = wordwrap($newcomment,66, " ", 1);
echo"$postedcomment</div></td></tr></table></div></div>"; 

Then in the main css stylesheet i have...

img#usr {
    max-width: 400px;
    max-height: 400px;
    size: auto;
}

And in the seperate internet explorer css stylesheet i have...

img#usr {
    width:expression(400 + "px");
    height:expression(400 + "px");
}

If someone posts an image that is 800px wide, it automatically resizes it to fit. This works in all browsers except for internet explorer.

Internet explorer just makes each image that people have posted exactly 400px x 400px.

How can i get it to resize like it does in other browsers such a firefox?

[_Aerospace_Eng_]

Try something like this

img#usr {
width:expression((document.getElementById('usr').offsetWidth > 400) ? "400px" : document.getElementById('usr').offsetWidth+'px' );
height:expression((document.getElementById('usr').offsetHeight > 400) ? "400px" : document.getElementById('usr').offsetHeight+'px');
}

It locked up my IE6 but that might be because its standalone version.

[Andy92]

Ok,

I have put the new code that you gave me into the internet explorer css stylesheet and now the images are smaller, but they are all the same size?

Have a look at...

http://www.allsortshop.com/about/new...cle.php?read=5

[_Aerospace_Eng_]

You don't even have images on there with id="usr".

[Andy92]

Ok,

Basically, when a user posts a comment, it inputs their data into a mysql database.

In the article.php document, to retreve the data from the database i use a php script.

This is a bit from that script where it posts the users comments...

$imgtag = array("[img]", "[/img]");
$replacetag = array("<img src='","' id='usr'>");
$newcomment = str_replace($imgtag, $replacetag, $row2[comments]); 
//$postedcomment = wordwrap($newcomment,66, "<br>\n", 1);
$postedcomment = wordwrap($newcomment,66, " ", 1);
echo"$postedcomment</div></td></tr></table></div></div>"; 

As you can see, the img id = usr.

Then in my internet explorer stylesheet i have...

#usr {
width:expression((document.getElementById('usr').offsetWidth > 400) ? "400px" : document.getElementById('usr').offsetWidth+'px' );
height:expression((document.getElementById('usr').offsetHeight > 400) ? "400px" : document.getElementById('usr').offsetHeight+'px');
}

And in firefox and opera etc it works fine and adjusts the image size.

But in internet explorer 7, it resizes each and every image on there to 400px x 138px.

Why does it do this????

[_Aerospace_Eng_]

Why are you even feeding that stylesheet to IE7? It does support min-width and min-height. Its likely resizing it that way because its going by the larger dimension. If the image is greater than 400 pixels wide its going to resize proportionately. Try this instead

#usr {
width:expression(document.getElementById('usr').offsetWidth > 400 ? "400px" : document.getElementById('usr').offsetWidth+'px' );
height:expression(document.getElementById('usr').offsetHeight > 400 ? "400px" : document.getElementById('usr').offsetHeight+'px');
}

Feed it only to IE6 an below.

[Andy92]

Ok,

if max width and height are supported in internet explorer 7, i put this in to the ie style sheet...

img#usr {
    max-width: 400px;
    max-height: 400px;
    size: auto;
}

And it still doesn't work?

I think it may be my php script, because all the images on there are exactly the same size. I have just posted the google logo on there if you have a look now, and all the images resize to fit the same image size of the google logo.

This is the php script i am using...

<?php
mysql_connect("localhost", "my-username", "my-password") or die(mysql_error());
mysql_select_db("my-database") or die(mysql_error());
$result = mysql_query("SELECT * FROM news_comments WHERE type=$read ORDER BY time DESC");
    if ($row2 = mysql_fetch_array($result)) {
    do {
    
printf("<div class='n_col_full'><div class='n_bottom_text'><table cellpadding='1' cellspacing='0'><tr><td rowspan='3'><div class='n_avatars'><img src='%s' alt='%s' width='50px' height='50px' /></div></td><td><div class='comment_subheading'>%s</div></td></tr><tr><td>", $row2[avatar], $row2[name], $row2[name]);
if (!$row2[url]) {
echo "No Webby!";
} else {
echo "<a href='$row2[url]'>$row2[url]</a>"; 
}
printf ("</td></tr><tr><td><div class='comment_posted'>%s</div></td></tr></table><table cellpadding='0'><tr><td colspan='2'><div class='n_comments_text'>", $row2[posted]);
$imgtag = array("[img]", "[/img]");
$replacetag = array("<img src='","' id='usr'>");
$newcomment = str_replace($imgtag, $replacetag, $row2[comments]); 
//$postedcomment = wordwrap($newcomment,66, "<br>\n", 1);
$postedcomment = wordwrap($newcomment,66, " ", 1);
echo"$postedcomment</div></td></tr></table></div></div>";
    }while ($row2 = mysql_fetch_array($result));
    }else{
    echo "";
    }
    ?>

[_Aerospace_Eng_]

I said feed it to IE 6 ONLY. You are still feeding it to all IE browsers for PC. You have this

<!--[if IE]>
<link href="/css/style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

change it to

<!--[if lte IE 6]>
<link href="/css/style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

but you might be able to avoid the expressions all together. php has a getimagesize() function. You can check these sizes on the server side then out put the proper widths using php.

[Andy92]

Ok,

I have tried to use the getimagesize() function but it failed.

How do i use the getimagesize() function in the following php code...

$imgtag = array("[img]", "[/img]");
$replacetag = array("<img src='","' id='usr'>");
$newcomment = str_replace($imgtag, $replacetag, $row2[comments]); 
//$postedcomment = wordwrap($newcomment,66, "<br>\n", 1);
$postedcomment = wordwrap($newcomment,66, " ", 1);
echo"$postedcomment</div></td></tr></table></div></div>"; 

I have tried to integrate it, but failed lol.

[_Aerospace_Eng_]

Okay it would get really messing and a bit more complicated to use getimagesize. You would need to get the url of all images between the image tags. Get rid of the expressions and add this in between your head tags

<!--[if lte IE 6]>
<script type="text/javascript">
function sizeIt()
{
	if(document.getElementById('usr'))
	{
		if(document.getElementById('usr').offsetWidth > 400)
		{
			document.getElementById('usr').style.width = 400 + 'px';
		}
		if(document.getElementById('usr').offsetHeight > 400)
		{
			document.getElementById('usr').style.height = 400 + 'px';
		}
	}
}
if(window.attachEvent)
{
	window.attachEvent('onload',sizeIt);
}
</script>
<![endif]-->

[unrelenting]

When I try any of these methods I always end up with a square picture if the picture is larger than the 400 pixels in the width and the height. I am using the max-width and max-height for firefox and it correctly sets the higher dimension to 400 and maintains the aspect ratio for the other dimension in the process.

Is there a way to avoid the square output by modifying either of these suggestions?

[felgall]

Instead of:

if(document.getElementById('usr').offsetWidth > 400)
		{
			document.getElementById('usr').style.width = 400 + 'px';
		}
		if(document.getElementById('usr').offsetHeight > 400)
		{
			document.getElementById('usr').style.height = 400 + 'px';
		}

use the following

var w = document.getElementById('usr').offsetWidth;
var h = document.getElementById('usr').offsetHeight;
if (w > 400) {h = h * 400 / w; w = 400;}
if (h > 400) {w = w *400 / h; h = 400;} 
document.getElementById('usr').style.width = w + 'px';
document.getElementById('usr').style.height = h + 'px';

This will resize the image proportionallyso that the maximum dimension is 400 if the original was bigger than that.

[unrelenting]

Instead of:

if(document.getElementById('usr').offsetWidth > 400)
		{
			document.getElementById('usr').style.width = 400 + 'px';
		}
		if(document.getElementById('usr').offsetHeight > 400)
		{
			document.getElementById('usr').style.height = 400 + 'px';
		}

use the following

var w = document.getElementById('usr').offsetWidth;
var h = document.getElementById('usr').offsetHeight;
if (w > 400) {h = h * 400 / w; w = 400;}
if (h > 400) {w = w *400 / h; h = 400;} 
document.getElementById('usr').style.width = w + 'px';
document.getElementById('usr').style.height = h + 'px';

This will resize the image proportionallyso that the maximum dimension is 400 if the original was bigger than that.

That worked exactly like max-width and max-height in Firefox. Well done and thanks.

One last thing, how would I word this statement to include all versions of IE?

<!--[if lte IE 6]>

[felgall]

<!--[if IE]>

[unrelenting]

<!--[if IE]>

Gracias.