Web Analytics Made Easy -
StatCounter Css max width and height properties in internet explorer? - CodingForum

Announcement

Collapse
No announcement yet.

Css max width and height properties in internet explorer?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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?

    @Andy92 / Dribbble

  • #2
    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!||||

    Comment


    • #3
      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

      @Andy92 / Dribbble

      Comment


      • #4
        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!||||

        Comment


        • #5
          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????

          @Andy92 / Dribbble

          Comment


          • #6
            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_; Sep 26, 2006, 10:10 PM.
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              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 
              "";
                  }
                  
              ?>
              @Andy92 / Dribbble

              Comment


              • #8
                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!||||

                Comment


                • #9
                  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.

                  @Andy92 / Dribbble

                  Comment


                  • #10
                    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!||||

                    Comment


                    • #11
                      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?

                      Comment


                      • #12
                        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.

                        Comment


                        • #13
                          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]>

                          Comment


                          • #14
                            <!--[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.

                            Comment


                            • #15
                              Originally posted by felgall View Post
                              <!--[if IE]>
                              Gracias.

                              Comment

                              Working...
                              X