1 Reply Latest reply on May 21, 2010 5:44 PM by jxlusa

    img scaling with max-width on the img tag is not working on my side bar

    tanktery Level 1

      I am trying to create a page that will scale with the size of the browser window. All seams to scale except the images on the right side bar

       

       

       

      <!-- HTML -->

       

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

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <title>Untitled Document</title>

      <link rel="stylesheet" href="css/master.css" type="text/css" />

      <link rel="stylesheet" href="css/resets.css" type="text/css" />

      <script type="text/javascript">

      </script>

      </head>

      <body>

      <div id="header" class="group">

        <p>header</p>

        <div id="nav" class="group">

          <p>nav </p>

          <p> </p>

          <p> </p>

          <p> </p>

          <p> </p>

        </div>

      </div>

      <hr />

      <div id="wrap" class="group">

        <p>wrap</p>

        <div id="main">

          <p>main</p>

          <div class="video group">

            <p>video</p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

            <p> </p>

          </div>

          <div class="rss">

            <p>rss feed</p>

          </div>

          <ol class="specials">

            <li class="group">

              <div class="special">

                <div class="special-img"> <a href="#"> <img src="img/placeholder.jpg" alt="specials4" /></a></div>

              </div>

            </li>

            <li class="group">

              <div class="special">

                <div class="special-img"> <a href="#"> <img src="img/placeholder.jpg" alt="specials4" /></a></div>

              </div>

            </li>

            <li class="group third">

              <div class="special">

                <div class="special-img"> <a href="#"> <img src="img/placeholder.jpg" alt="specials4" /></a></div>

              </div>

            </li>

          </ol>

        </div>

        <hr />

        <div id="secondaries">

          <ol class="secondary">

            <li class="group">

              <div class="item">

                <div class="item-img"> <a href="#"> <img src="img/placeholder.jpg" alt="specials4" /></a></div>

              </div>

            </li>

            <li class="group">

              <div class="item">

                <div class="item-img"> <a href="#"> <img src="img/placeholder.jpg" alt="specials4" /></a></div>

              </div>

            </li>

            <li class="group">

              <div class="item">

                <div class="item-img"> <a href="#"> <img src="img/placeholder.jpg" alt="specials4" /></a></div>

              </div>

            </li>

          </ol>

        </div>

        <hr />

      </div>

      <div id="footer">

        <p>footer</p>

        <p> </p>

      </div>

      </body>

      </html>

       

       

      /*-- MASTER CSS --*/

       

       

      /*

      Title: Master styles for screen media

      Author: info@visualmonarchy.com

      */

       

      body {

      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

      color: #444;

      font-size: 100%;

      background: #fff;

      }

       

      /* links */

       

      a:link, a:visited {

      color: #369;

      outline: #39c;

      }

       

      a:hover {

      #39c;

      }

       

      /* page structure

      --------------------------------------------- */

       

      #wrap {

      width: 100%;

      max-width: 1000px;

      min-width: 700px;

      margin: 0 auto;

      padding: 40px 0 0 0;

      font-size: 1.3em;

      border: 1px solid #CCC;

      }

       

      .video {

      width: 100%;

      float: left;

      position: relative;

      border: 1px solid #CCC;

      }

       

      div#main .rss {

      width: 100%;

      float: left;

      margin-top: 20px;

      margin-bottom: 20px;

      padding: 0;

      border: 1px solid #CCC;

      }

       

      div#main {

      width: 73%;

      float: left;

      margin-bottom: 20px;

      position: relative;

      border: 1px solid #CCC;

      }

       

      #secondaries {

      float: right;

      width: 25%;

      border: 1px solid #CCC;

      }

       

      #footer {

      clear: both;

      margin: 0 auto;

      padding: 10px 0 30px 0;

      font-size: 1em;

      color: #9c836e;

      border: 1px solid #CCC;

      }

       

      /* header

      --------------------------------------------- */

       

      #header {

      border: 1px solid #CCC;

      }

       

      /* navigation */

       

      #nav {

      position: relative;

      width: 80%;

      max-width: 1000px;

      min-width: 680px;

      margin: 0 auto;

      font-size: 1.3em;

      border: 1px solid #CCC;

      }

       

      /* main styles

      -----------------------------------------------*/

       

      /* specials list */

       

      ol.specials {

      margin: 1em 0 0 0;

      }

       

      ol.specials li {

      font-size: 1.1em;

      float: left;

      width: 30%;

      margin-top: 0em;

      margin-right: 3.5%;

      margin-bottom: 1.5em;

      margin-left: 0em;

      }

       

      ol.specials li.third {

      margin-right: 0;

      }

       

      ol.specials li div.special {

      position: relative;

      overflow: hidden;

      border: 1 solid #CCC;

      background-color: #e2e1d4;

      }

       

      ol.specials li div.special a span {

      display: block;

      position: absolute;

      width: 100%;

      bottom: -165px;

      left: 16px;

      font-family: Georgia, serif;

      font-size: 1em;

      font-weight: normal;

      line-height: 1.3em;

      color: #ccc;

      background-color: #333;

      }

       

      ol.specials li div.special a span strong {

      display: block;

      padding: 10px 10px 0 10px;

      font-weight: normal;

      font-style: italic;

      color: #fff;

      ;

      }

       

      ol.specials li div.special a span em {

      display: block;

      padding: 0 10px 10px 10px;

      font-style: normal;

      color: #e3c887;

      }

       

      ol.specials li div.special-img img {

      max-width: 100%;

      }

      /* seconderies styles

      --------------------------------------------- */

       

      div#secondaries ol.secondary {

      margin: 0 0 0 0;

      }

      div#secondaries ol.secondary li {

      font-size: 1.1em;

      width: 30%;

      margin-top: 0em;

      margin-bottom: 1.5em;

      margin-left: 0em;

      }

      div#secondaries ol.secondary li div.item {

      position: relative;

      border: 1 solid #CCC;

      background-color: #e2e1d4;

      overflow: hidden;

      }

      div#secondaries ol.secondary li div.item a span {

      display: block;

      position: absolute;

      width: 100%;

      bottom: -165px;

      left: 16px;

      font-family: Georgia, serif;

      font-size: 1em;

      font-weight: normal;

      line-height: 1.3em;

      color: #ccc;

      background-color: #333;

      }

      div#secondaries ol.secondary li div.item a span strong {

      display: block;

      padding: 10px 10px 0 10px;

      font-weight: normal;

      font-style: italic;

      color: #fff;

      ;

      }

      div#secondaries ol.secondary li div.item a span em {

      display: block;

      padding: 0 10px 10px 10px;

      font-style: normal;

      color: #e3c887;

      }

      div#secondaries ol.secondary li div.item-img img {

      max-width: 100%;

      }

       

      /* misc.

      --------------------------------------------- */

       

      hr, .hide {

      display: none;

      }

       

      a img {

      border: none;

      }

       

      /* self-clear floats */

       

      .group:after {

      content: ".";

      display: block;

      height: 0;

      clear: both;

      visibility: hidden;

      }

      /*-- CSS RESET--*/
      /* Normalizes margin, padding */
      body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fielset, input, p, blockquote, th, td
      { margin : 0; padding : 0; }
      /* Normalizes font-size for header */
      h1, h2, h3, h4, h5, h6
      { font-size : 100%; }
      /* Remove list-style form list */
      ol, ul
      { list-style : none; }
      /* Normalizes font-style and font-weight to normal */
      address, caption, cite, code, dfn, em, strong, th, var
      { font-style : normal; font-weight : normal; }
      /* Remove list-style from list */
      table
      { border-collapse : collapse; border-spacing : 0; }
      /* removes border from fiedset and img */
      fieldset,img
      { border : 0; }
      /* Left-aligns text in caption and th */
      caption,th
      { text-align : left; }
      /* Removes quotation marks from q */
      q:before, q:after
      { content : ''; }

        • 1. Re: img scaling with max-width on the img tag is not working on my side bar
          jxlusa Level 2

          I'm not exactly sure I get what you intention is, but here are a few things to consider maybe.

           

          max width will not make the image expand, just keep it from being any wider than the max width.

          images by default display as in line. To make a width property work reliably, you will need to set it to block:


          div#secondaries ol.secondary li div.item-img img {
          display: block;
          width: 100%;
          }

           

          image width as set above will be affected by its containers. (If you meant to limit the width of the image rather  than to resize it, the same thing should still be true of a max-width  on the image, though cross-browser support will be unreliable.)

          The relevant container for the case above is:


          div#secondaries ol.secondary li {
          font-size: 1.1em;
          width: 30%;
          margin-top: 0em;
          margin-bottom: 1.5em;
          margin-left: 0em;
          }

           

          So do you really mean it to be 30% or did you mean 100%.