...

View Full Version : Css max width and height properties in internet explorer?



Andy92
09-24-2006, 11:48 AM
For the following problem, you need to go to the following address...

http://www.allsortshop.com/about/news/article.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("", "");
$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?

:confused:

_Aerospace_Eng_
09-24-2006, 05:44 PM
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
09-25-2006, 09:45 PM
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/news/article.php?read=5

:confused: :confused:

_Aerospace_Eng_
09-25-2006, 10:48 PM
You don't even have images on there with id="usr".

Andy92
09-26-2006, 09:29 PM
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("", "");
$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????

:confused:

_Aerospace_Eng_
09-27-2006, 02:03 AM
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
09-29-2006, 08:52 PM
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("", "");
$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 "";
}
?>

:confused:

_Aerospace_Eng_
09-29-2006, 09:19 PM
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() (http://us2.php.net/getimagesize) function. You can check these sizes on the server side then out put the proper widths using php.

Andy92
09-29-2006, 09:39 PM
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("", "");
$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.

:confused:

_Aerospace_Eng_
09-30-2006, 02:09 AM
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
03-02-2007, 01:32 AM
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
03-02-2007, 04:11 AM
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
03-02-2007, 04:25 AM
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
03-02-2007, 06:15 AM
<!--[if IE]>

unrelenting
03-02-2007, 12:36 PM
<!--[if IE]>

Gracias. :thumbsup:

unrelenting
02-03-2008, 10:36 PM
Had to resurrect this thread as I am now having issues again after I reworked my layout.

Before I was using this on a single query of a news story with an image link that was drawn with it. When I had it setup like that it worked perfectly. Now I have redesigned the page to pull the last 5 entries from this table in the database and the first one still resizes correctly in IE but the next 4 don't.

Is there any way I can reword this or edit to include all 5 stories? It's still working fine in Firefox.

http://woopig.net/index.php

jlhaslip
02-04-2008, 12:18 AM
Why not resize the pix on upload?

unrelenting
02-04-2008, 12:57 AM
Why not resize the pix on upload?

I'm linking to most of them from yahoo news photos. I don't own them. I just can't grasp why this script isn't affecting all of the displayed entries.

unrelenting
02-04-2008, 11:46 PM
Anyone? :(

I'll try just about any suggestions.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum