Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder Andy92's Avatar
    Join Date
    Nov 2005
    Location
    Horsham, West Sussex, UK
    Posts
    363
    Thanks
    7
    Thanked 1 Time in 1 Post

    Css max width and height properties in internet explorer?

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

    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>"
    Then in the main css stylesheet i have...

    Code:
    img#usr { max-width: 400px; max-height: 400px; size: auto; }
    And in the seperate internet explorer css stylesheet i have...

    Code:
    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?


  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try something like this
    Code:
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder Andy92's Avatar
    Join Date
    Nov 2005
    Location
    Horsham, West Sussex, UK
    Posts
    363
    Thanks
    7
    Thanked 1 Time in 1 Post
    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


  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You don't even have images on there with id="usr".
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder Andy92's Avatar
    Join Date
    Nov 2005
    Location
    Horsham, West Sussex, UK
    Posts
    363
    Thanks
    7
    Thanked 1 Time in 1 Post
    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...

    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>"
    As you can see, the img id = usr.

    Then in my internet explorer stylesheet i have...

    Code:
    #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????


  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    #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.
    Last edited by _Aerospace_Eng_; 09-27-2006 at 02:10 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder Andy92's Avatar
    Join Date
    Nov 2005
    Location
    Horsham, West Sussex, UK
    Posts
    363
    Thanks
    7
    Thanked 1 Time in 1 Post
    Ok,

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

    Code:
    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 Code:
    <?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 
    "";
        }
        
    ?>

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I said feed it to IE 6 ONLY. You are still feeding it to all IE browsers for PC. You have this
    Code:
    <!--[if IE]>
    <link href="/css/style_ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    change it to
    Code:
    <!--[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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder Andy92's Avatar
    Join Date
    Nov 2005
    Location
    Horsham, West Sussex, UK
    Posts
    363
    Thanks
    7
    Thanked 1 Time in 1 Post
    Ok,

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

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

    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.


  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <!--[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]-->
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Regular Coder
    Join Date
    Jan 2007
    Posts
    142
    Thanks
    9
    Thanked 1 Time in 1 Post
    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?

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Instead of:

    Code:
    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

    Code:
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Regular Coder
    Join Date
    Jan 2007
    Posts
    142
    Thanks
    9
    Thanked 1 Time in 1 Post
    Quote Originally Posted by felgall View Post
    Instead of:

    Code:
    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

    Code:
    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]>

  • #14
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    <!--[if IE]>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #15
    Regular Coder
    Join Date
    Jan 2007
    Posts
    142
    Thanks
    9
    Thanked 1 Time in 1 Post
    Quote Originally Posted by felgall View Post
    <!--[if IE]>
    Gracias.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •