SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 37
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Cool YELCHH! Help me AUTO-RATIO & center? It's just horrible (margins, widths, IMG) . . .

    It validates; it just looks like crap.

    So the idea here is I'd like all the elements in this page centered, and then have the two tables — directly above and directly below the dolphin image — to scale to whatever the dolphin image, including it's ridge border is rendering at.

    At first I was wasting time setting up width percentages for everything, when it dawned on me . . . a more rational approach would be to just set %-based margins at the outset, and let everything "expand" to fill the container. Well, yes, but the problem is that the
    1. MUSHROOMS
    2. PINK PLAID
    3. MOTORCYCLE
    4. FALL LEAVES
    I don't want to fill 100% of the space — only the maximum widths that I've defined.

    And the other problem is evident the minute you look at the page: The centering is totally wrong. Yelchh! Man, I've tried everything I'm tellin' ya! At first I thought this had something to do with the "44px" border I have around the dolphins. Tried a negative margin (PHHHHLTTT! lol). Tried the margin "auto" technique. No go. I'm just out of tweaks and I know there is something fatally wrong here, because it's obvious these graphics are trying to squeeze onto the same line as the one prior . . . and throwing themselves off-center in the course of flowing over. Oh yes, I get that bit.

    Well, here she is. HELP?

    s


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    <title>TESTING</title>
    </head>
    <!-- ++ -->
    <body style="FONT-FAMILY: HELVETICA, ARIAL, SANS-SERIF;
        background-image:
        url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-repeat: repeat;">
    <div style="margin-top: 76PX; margin-bottom: 50PX; margin-left: 16%;
          margin-right: 16%;" align="CENTER">
    <!-- ++ -->
    <img style="width: 100%; max-width: 500PX"
    src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
          <div style="margin-top: 35PX; margin-left: -44PX; margin-right:
            0PX; margin-bottom: 0PX;">
    <img style="width: 100%; max-width: 450PX; BORDER: 4PX DASHED BLACK; padding: 25PX; background-color: WHITE;"
    src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
          </div>
    <!-- ++ -->
          <table style="margin-top: 35PX; width: 100%; max-width: 738PX;
            text-align: left; margin-left: auto; margin-right: auto;"
            bgcolor="WHITE" border="5" cellpadding="10" cellspacing="2">
            <tbody>
              <tr>
                <td style="vertical-align: MIDDLE;" valign="MIDDLE">
                  <font color="BLACK">XXX X</font><br>
                </td>
                <td valign="MIDDLE">
                  <font color="red"><b>XXXXXXX</b></font><br>
                </td>
                <td valign="MIDDLE">
                  <b>XXXXXXXXXXX</b><br>
                  XXXXXXXXXXX
                </td>
                <td valign="MIDDLE">
                  <font color="BLACK">XXXXXXX<br>
                    XXXX<font color="red"><b>XXXXX</b></font>
                  </font>
                </td>
                <td align="RIGHT" valign="MIDDLE" width="120">
                  <font color="BLACK">XXXXXXXXX<br>
                    XXXXX</font>
                </td>
              </tr>
              <tr>
                <td valign="MIDDLE"><font color="BLACK">XXX X</font>
                </td>
                <td valign="MIDDLE">
                  <font color="RED"><b>XXXXXXX</b></font><br>
                </td>
                <td valign="MIDDLE">
                  <b>XXXXXXXXXXX</b><br>
                  XXXXXXXXXXX
                </td>
                <td valign="MIDDLE">
                  <font color="BLACK">XXXXXXX<br>
                    XXXX<font color="red"><b>XXXXX</b></font>
                  </font>
                </td>
                <td align="right" valign="MIDDLE" width="120">
                  <font color="BLACK">XXXXXXXXX<br>
                    XXXXX</font>
                </td>
              </tr>
              <tr>
                <td valign="MIDDLE"><font color="BLACK">XXX X</font>
                </td>
                <td valign="MIDDLE">
                  <font color="RED"><b>XXXXXXX</b></font><br>
                </td>
                <td valign="MIDDLE">
                  <b>XXXXXXXXXXX</b><br>
                  XXXXXXXXXXX
                </td>
                <td valign="MIDDLE">XXXXXXX<br>
                  XXXX<font color="red"><b>XXXXX</b></font>
                </td>
                <td align="RIGHT" valign="MIDDLE" width="120">XXXXXXXXX<br>
                  XXXXX<br>
                </td>
              </tr>
              <tr>
                <td valign="MIDDLE"><font color="BLACK">XXX X</font>
                </td>
                <td bgcolor="#FFFFD7" valign="MIDDLE">
                  <b>XXXXXXX</b><br>
                  <br>
                  <div align="CENTER">
    <img src="http://th05.deviantart.net/fs71/150/f/2012/117/2/7/vintage_edit_by_frauleinmakeup-d4xrfbh.jpg"
                      alt="" height="150" width="84"><br>
                  </div>
                </td>
                <td align="CENTER" bgcolor="FFFFD7" valign="MIDDLE">
                  <div align="LEFT">
                    <b>XXXXXXXXXXXXXXXXXX<br>
                      XXXXXXXXXXXXXXXXXX</b><br>
                    <br>
                  </div>
                  <big>
                    <big>
                      <b>XXXXXXXX<br>
                        XXXXXXXXXX<br>
                        XXXXXXXXXXXXX<br>
                        XXXXXX</b><br>
                    </big>
                  </big>
                  XXXXXXXXXXXXXXX<br>
                  XXXXXXX<br>
                </td>
                <td bgcolor="#FFFFD7" valign="MIDDLE">XXXXXXX<br>
                  XXXX<b>XXXXX</b><br>
                </td>
                <td align="RIGHT" bgcolor="FFFFD7" valign="MIDDLE"
                  width="120">
                  <span style="color: BLACK; font-size: 24px; font-family:
                    LUCIDA CONSOLE, MONOSPACE; font-weight: bold;">
                    <font style="background-color: YELLOW;"> XXXXX<br>
                      XXXXXX<br>
                      <br>
                      XXXXX</font>
                  </span>
                </td>
              </tr>
              <tr>
                <td colspan="4" align="right" valign="MIDDLE">
    <img src="http://pikt.org/doc/images/bak/PointingHandBlueTintTransparent.gif"
                    alt="" height="18" width="23">
                </td>
                <td align="RIGHT" bgcolor="BLACK" valign="MIDDLE"
                  width="120">
                  <font style="background-color: YELLOW; font-size: 24px;
                    font-family: LUCIDA CONSOLE, MONOSPACE;
                    font-weight: bold;"> XXXXXX </font>
                </td>
              </tr>
            </tbody>
          </table>
    <!-- ++ -->
          <div style="margin-top: 35PX; margin-left: 44PX; margin-right:
            44PX; margin-bottom: 0PX;">
    <img style="WIDTH: 100%; max-width: 640PX; BORDER: 44PX RIDGE GREY; OUTLINE-STYLE: OUTSET;"
    src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
          </div>
    <!-- ++ -->
          <table style="margin-top: 35PX; width: 100%; max-width: 738PX;
            text-align: left; margin-left: auto; margin-right: auto;"
            bgcolor="WHITE" border="5" cellpadding="10" cellspacing="2">
            <tbody>
              <tr>
                <td valign="TOP">
                  <span style="color: BLACK; font-size: 24px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;
                    font-weight: bold;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
                  </span>
                  <span style="color: RED; font-size: 20px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;">
                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
                  </span>
                </td>
              </tr>
              <tr>
                <td valign="TOP">
                  <span style="color: BLACK; font-size: 16px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;">
                    VXX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX <font
                      style="background-color: LIGHTGREY;">XX XXXXX XXX
                      XXXXXXXX XXXX X XXXXXX <b>XX XXXXX XXX XXXXXXXX XXXX
                        X XXXXXX </b>XXXXX <b>XX XXXXX XXX XXXXXXXX XXXX X
                        XXXXXX</b> XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</font>
                    XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX</span>
                  <span style="color: BLACK; font-size: 16px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;">
                  </span>
                  <br>
                </td>
              </tr>
            </tbody>
          </table>
    <!-- ++ -->
          <table style="margin-top: 35PX; WIDTH: 100%; max-width: 520PX;
            text-align: left; margin-left: auto; margin-right: auto;"
            bgcolor="WHITE" border="5" cellpadding="10" cellspacing="2">
            <tbody>
              <tr>
                <td style="vertical-align: MIDDLE;">
    <img style="WIDTH: 100%; max-width: 518PX;" src="http://1.bp.blogspot.com/_cyJIi6nkVWo/TRjIhDKzgxI/AAAAAAAAAy0/c46k0Qg7ftI/s1600/5+REVs.jpg"
                    alt="">
                </td>
              </tr>
              <tr>
                <td style="vertical-align: MIDDLE;">
                  <table style="width: 518px;" border="0" cellpadding="10"
                    cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="text-align: left; vertical-align:
                          MIDDLE;">
                          <div style="text-align: CENTER;">
                            <font style="FONT-FAMILY:
                              HELVETICA,ARIAL,SANS-SERIF;">
                              <font style="background-color: CYAN;"
                                color="BLACK" size="5">
                                <strong>
                                  XX XXXXX XXX XXXXXXXX XX<br>
                                  XXXXXXXX <span style="color: RED;">XXXXXXXXXXXX</span>
                                  XXXXXXX
                                </strong>
                              </font>
                            </font>
                          </div>
                          <br>
                          <span style="font-size: 16px; font-family:
                            HELVETICA, ARIAL, SANS-SERIF;">
                            <font color="#FF0099"><b>XX XXXXX XXX XXXXXXXX
                                XXXX X XXXXXX</b></font><b> XX XXXXX XXX
                              XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX
                              XXXX X XXXXXX</b>&nbsp;
                            WXX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
                            XXX XXXXXXXX XXXX X XXXXXX <font
                              color="#3366FF">XX XXXXX XXX XXXXXX</font> <font
                              color="#3333FF"><b>XXXXXXXXXXXXX</b></font> XX
                            XXXXX XXX XXXXXXXX XXXX X XXXXXX <font
                              color="#FF0099">XX XXXXX XXX XXXXXXXX XXXX X
                              XXXXX</font>
                          </span>
    <!-- ++ -->
                          <table style="margin-top: 20PX;" align="CENTER" border="0" cellpadding="2" cellspacing="2">
                            <tbody>
                              <tr>
                                <td align="CENTER">
    <img src="http://www.qpstore.com/images/img_27.gif" alt="" border="0" height="33" width="88">
                                </td>
                              </tr>
                              <tr>
                                <td align="CENTER" valign="TOP">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/life-insurance/images/icon-hospital.gif" alt="" border="0" height="23" width="37">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/general-insurance/images/icon-payperday.gif" alt="" border="0" height="23" width="37">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/general-insurance/images/icon-preexist.gif" alt="" border="0" height="23" width="37">
    <img src="http://www.esker.com/common/assets/global/icon_delivery.png" alt="" border="0" height="23" width="37">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/general-insurance/images/icon-disease.gif" alt="" border="0" height="23" width="37">
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
    <!-- ++ -->
    <img src="http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-leaves.jpg" alt="" height="275" width="400">
    <!-- ++ -->
          <table style="margin-top: 20PX; WIDTH: 100%; max-width: 518PX;"
            border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="CENTER" valign="MIDDLE">
                  <font style="background-color: WHITE; font-size: 14PX;"
                    color="#444444">XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</font>
                </td>
              </tr>
              <tr>
                <td style="padding: 0PX 5PX 0PX 5PX;" align="CENTER"
                  bgcolor="WHITE" valign="MIDDLE">
                  <font style="font-size: 10PX;" color="#666666">
                    <b>XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                      XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                      XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
                      XXX XXXXXXXX XXXX X XXXXXX</b></font>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </body>
    </html>
    Last edited by semicolon; Jan 6, 2013 at 16:50. Reason: Clarifying lining up the two tables around DOLPHIN

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Before we get all excited, please be aware that you are using an invalid !DOCTYPE which might be playing a role in the goofy behavior.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    should be written:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Better still would be a "Strict" doctype because the backward-looking "Transitional" doctype defines certain in-line properties differently than the modern standards in the "Strict" doctype:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Please try both of these and see if they make a difference.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Both tables are shrinking to a width equal to the sum of their narrowest columns. That's what tables to. They are behaving as-designed. The images are another story.

    semicolon, Did you by any chance add these pieces to the page one at a time and test their behavior as you progressed? or did you build a page that is broken and "call sitepoint" to fix it for you? That's a serious question. Taking a systematic approach to building a page is useful. Isolating spots that aren't working as desired and putting them on a page by themselves for testing is one such approach.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    semicolon, Plug your tables back in wherever you wish and see how things behave.

    Please note, I use Firefox; therefore, I used the -moz- prefix on the box-sizing property. You may need something different.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    -->
    <head>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
        <title>TESTING 2</title>
    </head>
    <!-- ++ -->
    <body style="text-align:center; FONT-FAMILY: HELVETICA, ARIAL, SANS-SERIF; background-image:url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg); background-repeat: repeat;">
    
    <div style="margin-top:76PX; margin-bottom:50PX;">
    
    <!-- 1. mushroom pic -->
    
    <img style="width:100%; max-width:500PX" src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
    
    <!-- 2. pattern pic -->
    
    <div style="margin-top:35px;">
        <img style="-moz-box-sizing:border-box; width:100%; max-width:450PX; BORDER:4PX DASHED BLACK; padding:25PX; background-color:WHITE;" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
    </div>
    
    <!-- 3. dolphin pic -->
    
    <div style="margin-top:35px;">
        <img style="-moz-box-sizing:border-box; width:100%; max-width:640PX; BORDER:44PX RIDGE GREY; OUTLINE-STYLE:OUTSET;" src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
    </div>
    
    <!-- 4. leaves pic.  this image has predefined width and height.  it centers but does not scale -->
    
    <div style="margin-top:35px;">
        <img src="http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-leaves.jpg" alt="" height="275" width="400">
    </div>
    
    <!-- ++ -->
    
        </div>
      </body>
    </html>
    I would be grateful if anyone else would add other solutions.

    EDIT: I didn't include any auto-ratio scaling.
    Last edited by ronpat; Jan 6, 2013 at 22:05. Reason: Add edit

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    "auto-ratio" maybe:

    In my post, the div around the "pattern" and "dolphin" pix have a {margin-top:35px}.

    If that line is changed to <div style="margin:35px auto 0; width:80%"> or thereabouts, does that address the auto-ratio question?

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by semicolon View Post
    It validates; it just looks like crap.
    Unfortunately when the Doctype is changed from Transitional to Strict there are 134 Errors, 21 warning(s) according to validator.w3.org/

    You can see the results here: http://johns-jokes.com/downloads/sp-.../semicolon.php

    and a similar looking page here: http://johns-jokes.com/downloads/sp-...ohn_betong.php

    Also note that the source fpr both pages are included at the end of the page.
    Last edited by John_Betong; Jan 7, 2013 at 09:12. Reason: spelling: not my fortay
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  7. #7
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hey Ronpat & John . . . okay, I'm here. So the Doctype won't work per John's Val comment . . . But I'll try your code Ronpat. Now, I too use Firefox, but . . . of course I'm hoping to achieve cross-browser compatibility. Won't the "Moz" compromise the rendering for IEx browsers or Safari? Thanks guys. I'll noodle around a bit and report back.

    s

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Read a little deeper into John's message. Maybe, look at his code. He is describing the XHTML doctype, not the HTML doctype. You did not start with XHTML anything. You started with an INVALID quirksy HTML doctype. Yes, XHTML flags more "errors" than HTML. John's clue about using css is sage, however. Do you know how to write css code at the top of your page instead of using inline css statements? IF validation matters, that will go a long way toward cleaning up the validation errors.

    Yes, of course the -moz- prefix matters. That's why I pointed it out. You will have to add prefixes for those browsers for which you wish compatibility.

  9. #9
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yee Haw I've nailed it Gents!

    Code:
    <img style="display: BLOCK; margin: AUTO; etc. etc.
    I'll go clean it up and noodle around with Doctypes. Ronpat . . . until I get fully comfortable with CSS, I'm going inline. I'll get there, don't worry. I'll report back (hopefully) with some bulletproof code.

    s

  10. #10
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well this is as far as I've been able to get (it validates). I had much better luck with "Strict" . . . but I still can't get the dolphin element to auto-ratio: It shrinks to a certain point, and then won't shrink any further. Very frustrating, but I'm too dogged tired to do any more today.

    s

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    <title>TESTING "STRICT" + <img style="display: BLOCK; margin: AUTO; . . .</title>
    </head>
    <!-- ++ -->
    <body style="FONT-FAMILY: HELVETICA, ARIAL, SANS-SERIF;
        background-image:
        url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-repeat: repeat;">
    <!-- 1. mushroom pic -->
    <div align="CENTER" style="text-align: CENTER; margin-top: 76PX; margin-bottom: 50PX; margin-left: 16%; margin-right: 16%;">
    <img style="display: BLOCK; margin: AUTO; width: 100%; max-width: 500PX" src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
    <!-- 2. pattern pic -->
          <div style="margin-top: 35PX;">
    <img style="display: BLOCK; margin: AUTO; width: 100%; max-width: 444PX; BORDER: 4PX DASHED BLACK; padding: 25PX; background-color: WHITE;" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
          </div>
    <!-- ++ -->
          <div style="margin-top: 35PX;">
    <table bgcolor="WHITE" border="5" cellpadding="10" cellspacing="2" style="width: 100%; max-width: 700PX; text-align: left; margin-left: auto; margin-right: auto;">
            <tbody>
              <tr>
                <td style="vertical-align: MIDDLE;" valign="MIDDLE">
                  <font color="BLACK">XXX X</font><br>
                </td>
                <td valign="MIDDLE">
                  <font color="red"><b>XXXXXXX</b></font><br>
                </td>
                <td valign="MIDDLE">
                  <b>XXXXXXXXXXX</b><br>
                  XXXXXXXXXXX
                </td>
                <td valign="MIDDLE">
                  <font color="BLACK">XXXXXXX<br>
                    XXXX<font color="red"><b>XXXXX</b></font>
                  </font>
                </td>
                <td align="RIGHT" valign="MIDDLE" width="120">
                  <font color="BLACK">XXXXXXXXX<br>
                    XXXXX</font>
                </td>
              </tr>
              <tr>
                <td valign="MIDDLE"><font color="BLACK">XXX X</font>
                </td>
                <td valign="MIDDLE">
                  <font color="RED"><b>XXXXXXX</b></font><br>
                </td>
                <td valign="MIDDLE">
                  <b>XXXXXXXXXXX</b><br>
                  XXXXXXXXXXX
                </td>
                <td valign="MIDDLE">
                  <font color="BLACK">XXXXXXX<br>
                    XXXX<font color="red"><b>XXXXX</b></font>
                  </font>
                </td>
                <td align="right" valign="MIDDLE" width="120">
                  <font color="BLACK">XXXXXXXXX<br>
                    XXXXX</font>
                </td>
              </tr>
              <tr>
                <td valign="MIDDLE"><font color="BLACK">XXX X</font>
                </td>
                <td valign="MIDDLE">
                  <font color="RED"><b>XXXXXXX</b></font><br>
                </td>
                <td valign="MIDDLE">
                  <b>XXXXXXXXXXX</b><br>
                  XXXXXXXXXXX
                </td>
                <td valign="MIDDLE">XXXXXXX<br>
                  XXXX<font color="red"><b>XXXXX</b></font>
                </td>
                <td align="RIGHT" valign="MIDDLE" width="120">XXXXXXXXX<br>
                  XXXXX<br>
                </td>
              </tr>
              <tr>
                <td valign="MIDDLE"><font color="BLACK">XXX X</font>
                </td>
                <td bgcolor="#FFFFD7" valign="MIDDLE">
                  <b>XXXXXXX</b><br>
                  <br>
                  <div align="CENTER">
    <img src="http://th05.deviantart.net/fs71/150/f/2012/117/2/7/vintage_edit_by_frauleinmakeup-d4xrfbh.jpg"
                      alt="" height="150" width="84"><br>
                  </div>
                </td>
                <td align="CENTER" bgcolor="FFFFD7" valign="MIDDLE">
                  <div align="LEFT">
                    <b>XXXXXXXXXXXXXXXXXX<br>
                      XXXXXXXXXXXXXXXXXX</b><br>
                    <br>
                  </div>
                  <big>
                    <big>
                      <b>XXXXXXXX<br>
                        XXXXXXXXXX<br>
                        XXXXXXXXXXXXX<br>
                        XXXXXX</b><br>
                    </big>
                  </big>
                  XXXXXXXXXXXXXXX<br>
                  XXXXXXX<br>
                </td>
                <td bgcolor="#FFFFD7" valign="MIDDLE">XXXXXXX<br>
                  XXXX<b>XXXXX</b><br>
                </td>
                <td align="RIGHT" bgcolor="FFFFD7" valign="MIDDLE"
                  width="120">
                  <span style="color: BLACK; font-size: 24px; font-family:
                    LUCIDA CONSOLE, MONOSPACE; font-weight: bold;">
                    <font style="background-color: YELLOW;"> XXXXX<br>
                      XXXXXX<br>
                      <br>
                      XXXXX</font>
                  </span>
                </td>
              </tr>
              <tr>
                <td colspan="4" align="right" valign="MIDDLE">
    <img src="http://pikt.org/doc/images/bak/PointingHandBlueTintTransparent.gif"
                    alt="" height="18" width="23">
                </td>
                <td align="RIGHT" bgcolor="BLACK" valign="MIDDLE"
                  width="120">
                  <font style="background-color: YELLOW; font-size: 24px;
                    font-family: LUCIDA CONSOLE, MONOSPACE;
                    font-weight: bold;"> XXXXXX </font>
                </td>
              </tr>
            </tbody>
          </table>
          </div>
    <!-- 3. dolphin pic -->
          <div style="margin-top: 35PX;">
    <img style="display: BLOCK; margin-left: AUTO; margin-right: AUTO; width: 100%; BORDER: 44PX RIDGE GREY; OUTLINE-STYLE: OUTSET; max-width: 606PX; max-height: 441PX; HEIGHT: 473; WIDTH: 650;"
    src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
          </div>
    <!-- ++ -->
          <div style="margin-top: 35PX;">
    <table style="width: 100%; max-width: 700PX; text-align: left; margin-left: auto; margin-right: auto;"
            bgcolor="WHITE" border="5" cellpadding="10" cellspacing="2">
            <tbody>
              <tr>
                <td valign="TOP">
                  <span style="color: BLACK; font-size: 24px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;
                    font-weight: bold;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
                  </span>
                  <span style="color: RED; font-size: 20px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;">
                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
                  </span>
                </td>
              </tr>
              <tr>
                <td valign="TOP">
                  <span style="color: BLACK; font-size: 16px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;">
                    VXX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX <font
                      style="background-color: LIGHTGREY;">XX XXXXX XXX
                      XXXXXXXX XXXX X XXXXXX <b>XX XXXXX XXX XXXXXXXX XXXX
                        X XXXXXX </b>XXXXX <b>XX XXXXX XXX XXXXXXXX XXXX X
                        XXXXXX</b> XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</font>
                    XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX</span>
                  <span style="color: BLACK; font-size: 16px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;">
                  </span>
                  <br>
                </td>
              </tr>
            </tbody>
          </table>
          </div>
    <!-- ++ -->
    <table style="margin-top: 35PX; WIDTH: 100%; max-width: 520PX; text-align: left; margin-left: auto; margin-right: auto;"
            bgcolor="WHITE" border="5" cellpadding="10" cellspacing="2">
            <tbody>
              <tr>
                <td style="vertical-align: MIDDLE;">
    <!-- 4. motorcycles pic -->
    <img style="WIDTH: 100%; max-width: 518PX;" src="http://1.bp.blogspot.com/_cyJIi6nkVWo/TRjIhDKzgxI/AAAAAAAAAy0/c46k0Qg7ftI/s1600/5+REVs.jpg"
                    alt="">
                </td>
              </tr>
              <tr>
                <td style="vertical-align: MIDDLE;">
                  <table style="width: 518px;" border="0" cellpadding="10"
                    cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="text-align: left; vertical-align:
                          MIDDLE;">
                          <div style="text-align: CENTER;">
                            <font style="FONT-FAMILY:
                              HELVETICA,ARIAL,SANS-SERIF;">
                              <font style="background-color: CYAN;"
                                color="BLACK" size="5">
                                <strong>
                                  XX XXXXX XXX XXXXXXXX XX<br>
                                  XXXXXXXX <span style="color: RED;">XXXXXXXXXXXX</span>
                                  XXXXXXX
                                </strong>
                              </font>
                            </font>
                          </div>
                          <br>
                          <span style="font-size: 16px; font-family:
                            HELVETICA, ARIAL, SANS-SERIF;">
                            <font color="#FF0099"><b>XX XXXXX XXX XXXXXXXX
                                XXXX X XXXXXX</b></font><b> XX XXXXX XXX
                              XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX
                              XXXX X XXXXXX</b>&nbsp;
                            WXX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
                            XXX XXXXXXXX XXXX X XXXXXX <font
                              color="#3366FF">XX XXXXX XXX XXXXXX</font> <font
                              color="#3333FF"><b>XXXXXXXXXXXXX</b></font> XX
                            XXXXX XXX XXXXXXXX XXXX X XXXXXX <font
                              color="#FF0099">XX XXXXX XXX XXXXXXXX XXXX X
                              XXXXX</font>
                          </span>
    <!-- ++ -->
                          <table align="CENTER" style="text-align: LEFT; margin-top: 20PX;" border="0" cellpadding="2" cellspacing="2">
                            <tbody>
                              <tr>
                                <td align="CENTER">
    <img src="http://www.qpstore.com/images/img_27.gif" alt="" border="0" height="33" width="88">
                                </td>
                              </tr>
                              <tr>
                                <td>
    <img src="http://www.icicibank.com/Personal-Banking/insurance/life-insurance/images/icon-hospital.gif" alt="" border="0" height="23" width="37">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/general-insurance/images/icon-payperday.gif" alt="" border="0" height="23" width="37">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/general-insurance/images/icon-preexist.gif" alt="" border="0" height="23" width="37">
    <img src="http://www.esker.com/common/assets/global/icon_delivery.png" alt="" border="0" height="23" width="37">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/general-insurance/images/icon-disease.gif" alt="" border="0" height="23" width="37">
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
    <!-- 5. Fall leaves pic -->
    <div>
    <img style="display: BLOCK; margin: AUTO; max-width: 400" src="http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-leaves.jpg" alt="" height="275" width="400">
    </div>
    <!-- ++ -->
    <table style="text-align: CENTER; margin-top: 20PX; WIDTH: 100%; max-width: 552PX; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td>
                  <font style="background-color: WHITE; font-size: 14PX;"
                    color="#444444">XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</font>
                </td>
              </tr>
              <tr>
                <td style="padding: 0PX 5PX 0PX 5PX;" bgcolor="WHITE" valign="MIDDLE">
                  <font style="font-size: 10PX;" color="#666666">
                    <b>XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                      XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                      XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
                      XXX XXXXXXXX XXXX X XXXXXX</b></font>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </body>
    </html>

  11. #11
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    @semicolon ;


    Well this is as far as I've been able to get (it validates).
    Please explain in detail how you are validating your page scripts.

    Also, I uploaded your latest script to the following link and included a menu at the top.

    http://johns-jokes.com/downloads/sp-...icolon-002.php


    Following validation link shows 37 errors and 2 warnings.

    http://validator.w3.org/check?uri=ht...alidator%2F1.3

    Last edited by John_Betong; Jan 8, 2013 at 00:04. Reason: added validation link
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  12. #12
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Please explain in detail how you are validating your page scripts.
    Hey John, wow that is too weird. I swear I dropped the code in at W3 (DIRECT INPUT) and it validated.

    Er, anyhoo . . . It validates as Transitional (or at least, it did just 2 minutes ago ).

    I'll hop on over to your upload link John, but the issue continues to be that DOLPHIN will not shrink beyond a certain point. And believe me, I've tweaked it using ever trick I could think of. I thought that by defining MARGINS right at the outset, the DIVs would have to honor the settings.

    The only other thing I can think of is OVERFLOW, but if you think I'm an amateur thus far, OVERFLOW is a mystery to me.

    Look, if this DOLPHIN thing is just Mission Impossible, so be it. I only want to understand why it is physically impossible to do. It's very frustrating not knowing what's blocking this.

    The other two tweaks relate to your (or Ronpat's ?) comments, namely: 1) Defining CSS styles formally (as opposed to inline) to discipline DOLPHIN, and 2) starting small . . . and then building each element up.

    I'll commence that last technique right now by starting just with DOLPHIN, and adding each additional (major) image block, one at a time.

    If however what I'm trying to accomplish simply cannot be done, I would greatly appreciate someone explaining why so I don't continue to waste time on this.

    s

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by semicolon View Post
    the issue continues to be that DOLPHIN will not shrink beyond a certain point. And believe me, I've tweaked it using ever trick I could think of. I thought that by defining MARGINS right at the outset, the DIVs would have to honor the settings.

    Look, if this DOLPHIN thing is just Mission Impossible, so be it. I only want to understand why it is physically impossible to do. It's very frustrating not knowing what's blocking this.

    If however what I'm trying to accomplish simply cannot be done, I would greatly appreciate someone explaining why so I don't continue to waste time on this.
    semicolon, did you try the dolphin example in message number 4? It's one of the two that use the -moz-box-sizing property. You don't like vendor prefixes?

  14. #14
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hello Ronpat. Hey, I firstly want to thank you for reminding me of the KISS rule heh heh. And (surprise surprise) I've gotten further with this damn DOLPHIN image than ever before. What I did was contemplate the IMG styling as its own, standalone parameter. Look at the following (it validates, or did 2 minutes ago!!!):


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    <title>TESTING CSS "TRANSITIONAL" &#43; &#60;img style="display: BLOCK; margin: AUTO; . . .</title>
    </head>
    
    <body style="margin-top: 76PX; margin-bottom: 50PX; FONT-FAMILY: HELVETICA, ARIAL, SANS-SERIF;
        background-image:
        url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-repeat: repeat;">
    
    <!-- 3. dolphin pic -->
    <img style="margin-left: 16%; margin-right: 16%; display: BLOCK; margin-top: 35PX; margin: AUTO; width: auto; height: auto; BORDER: 44PX RIDGE GREY; OUTLINE-STYLE: OUTSET;"
    src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
    </body>
    </html>
    Notice that I'm placing nothing as to L/R margins in the Body tag -- only the T/B margins. The 16% L/R margins display better in this iteration than I've ever seen them. I could wish for it to reduce even further, but . . . at some point this gets to be programming for a phone, and I'm not going there.

    I'll now proceed to expand the above with BROWSER tags you've provided, and we can go from there. Just know that if I have to define one, I have to define all of them (which I so did not want to have to do). So I'll need you to help me with that. Thanks Gents, I'll report back.

    s

  15. #15
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay 3 things: the -moz tag had no effect; the code I just validated (directly above) looks like crap in IEx; but changing the Doctype to Strict -- and placing the IMG inside a DIV both validates and renders correctly in IEx:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    <title>TESTING CSS "STRICT" &#43; &#60;img style="display: BLOCK; margin: AUTO; . . .</title>
    </head>
    
    <body style="margin-top: 76PX; margin-bottom: 50PX; FONT-FAMILY: HELVETICA, ARIAL, SANS-SERIF;
        background-image:
        url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-repeat: repeat;">
    
    <!-- 3. dolphin pic -->
    <div>
    <img style="margin-left: 16%; margin-right: 16%; display: BLOCK; margin: AUTO; width: auto; height: auto; BORDER: 44PX RIDGE GREY; OUTLINE-STYLE: OUTSET;" src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
    </div>
    </body>
    </html>
    I'm just not certain that I want to "dumb it down" to Strict. Hmmmm . . . XHTML?

  16. #16
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay it validates and renders correctly in both browsers as XHTML 1.0

    HTML Code:
    <!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 content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
    <title>TESTING CSS &quot;XHTML 1.0 TRANSITIONAL&quot; &#43; &lt;img style=&quot;display: BLOCK; margin: AUTO; . . .</title>
    </head>
    
    <body style="margin-top: 76PX; margin-bottom: 50PX; FONT-FAMILY: HELVETICA, ARIAL, SANS-SERIF;
        background-image:
        url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-repeat: repeat;">
    
    <!-- 3. dolphin pic -->
    <img style="margin-left: 16%; margin-right: 16%; display: BLOCK; margin: AUTO; width: AUTO; height: AUTO; BORDER: 44PX RIDGE GREY; OUTLINE-STYLE: OUTSET;" src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="" />
    </body>
    </html>

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Copy & Paste, EXACTLY as is. Describe the problems in plain Anglish.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    1. {text-align:center} has been added to the body tag.
    2. more border-boxes have been added to image tag.
    3. the image MUST be surrounded by a div.
    4. TEST by narrowing browser width.
    -->
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    <title>TESTING CSS "STRICT" &#43; &#60;img style="display: BLOCK; margin: AUTO; . . .</title>
    </head>
    
    <body style="text-align:center; margin-top: 76px; margin-bottom: 50px; font-family: helvetica, arial, sans-serif;
        background-image:
        url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-repeat: repeat;">
    
    <!-- 3. dolphin pic -->
    
    <div style="margin-top:35px auto 0;">
        <img style="-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:100%; max-width:640PX; border:44px ridge gray; outline-style:outset;" src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
    </div>
    
    </body>
    </html>

  18. #18
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yikes but that is damn good Ronpat! Damn . . .

    And here I just got done working it up in XHTML. It even looks good (in a half-assed kind of way). But hey man, you are definitely The Incredible Shrinking Man! Wow. I'll just now and build out from there. Thank you so much.

    semicolon

  19. #19
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Wow that thing is bulletproof on the frame. Really impressed Ron.

  20. #20
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Now for some reason the height isn't shrinking in IEx 8. Well what else is new . . . Thoughts?

  21. #21
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by semicolon View Post
    Now for some reason the height isn't shrinking in IEx 8. Well what else is new . . . Thoughts?
    http://johns-jokes.com/downloads/sp-...ohn_betong.php

    I have made a few modifications to the above and checked it with IEx10.

    Let me know if it keeps IEx8 happy and what else is required.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Fun things to do with pix.

    The same sample images again. This time the css is written at the top-of-the-page instead of inline. Get used to it!!! It's already "old school" <grin>. Copy and Paste into a new file. See how it works... play with it. Compare this page to the previous page. Figure out how the CSS relates to the HTML. It's pretty straight forward.

    Notice how the images change size and notice when they stop changing size. The magenta box shows a 90% width applied to the .wrapper.

    Any of the pix can scale to the full width of the browser window if the width is 100% and no limiting max-width is set, and if the wrapper is not limited by a percent width. The mushrooms and plaid images are pretty good playgrounds for this exercise.

    I dorked with the last image just because I could. It was a non-scaling image anyway, so I made it a centered background image that is clipped at the edges if the window is narrowed enough. No particular reason. Just playing. Notice how empty the divs look?


    Doctypes and validation sound like the least of your interests right now. Until you are ready to scrap the UPPERCASE code and transfer the deprecated HTML tags to css properties (as John's first example stated), talk about validation sounds patronizing.

    "Strict" is not "dumber" than "Transitional". Quite the contrary, "Strict" is "forward-looking", whereas "Transitional" accepts the "old school" UPPERCASE code and "old school" deprecated tags without balking. It also handles the space around inline objects differently than newer doctypes. If you have a choice, tune in to HTML 4.01 strict. XHTML is "stricter", has more restrictions/expectations, than HTML "strict". If you've never been there, I don't recommend the trip. Stick with HTML 4.01 strict and start reading about HTML 5.

    Your original example page seems to have been created to learn how to auto-resize images in a fluid/responsive environment. I probably clouded the focus by mentioning doctypes.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?948914-YELCHH!-Help-me-AUTO-RATIO-amp-center-It-s-just-horrible-(margins-widths-IMG)
    Thread: YELCHH! Help me AUTO-RATIO & center? It's just horrible (margins, widths, IMG) . . .
    Jan 6, 2013 17:43
    semicolon
    
    1.  mushrooms
    2.  pink plaid
    3.  motorcycle
    4.  fall leaves
    
    IE8 does not scale the height correctly.  I do not know if there is a fix.
    -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <title>auto-resizing images</title>
        <style type="text/css">
    body {
        background-image:url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-position:50% 0;
        font-family:helvetica, arial, sans-serif;
        text-align:center;   /* Center aligns inline objects. */
        padding:0;
        margin:70px 0 50px;  /* Applies {margin-top:70px} and {margin-bottom:50px} to the top and bottom of the page.  Zero's left and right side defaults. */
    }
    .wrapper {
        outline:1px solid magenta;   /* show-and-tell testing.  Delete whenever.... */
        width:90%;           /* the wrapper div will expand to 90% of the width of the window or whatever percentage you choose. */
        margin:35px auto 0px;
    }
    img {
        display:block;       /* eliminates extra white space beneath the image */
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;    /* the {box-sizing:border-box} property includes the dimensions of the border with the image. */
        margin:0 auto;       /* "auto" centers the image in its container */
    }
    .mushrooms {
        width:100%;          /* the image will expand to the width of the wrapper div or whatever percentage of it you choose. */
        max-width:600px;     /* you can assign a max-width here or in the .wrapper, if you wish. */
    }
    .plaid {
        border:4px dashed black;
        background-color:white;
        width:100%;          /* the image will expand to the width of the wrapper div or whatever percentage of it you choose. */
        max-width:450px;     /* you can assign a max-width here or in the .wrapper, if you wish. */
        padding:25px;
    }
    .dolphin {
        border:44px ridge gray;
        width:80%;           /* the image will expand to the width of the wrapper div or whatever percentage of it you choose. */
        max-width:800px;     /* you can assign a max-width here or in the .wrapper, if you wish. */
    }
    .leaves {
        background-image:url(http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-leaves.jpg);
        background-position:50% 50%;
        background-repeat:no-repeat;
        height:275px;
        margin:35px auto;
    }
        </style>
    </head>
    <body>
    
    <!-- 1. mushrooms -->
    <div class="wrapper">
        <img class="mushrooms" src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
    </div>
    
    <!-- 2. pink plaid -->
    <div class="wrapper">
        <img class="plaid" style="" src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
    </div>
    
    <!-- 3. dolphin -->
    <div class="wrapper">
        <img class="dolphin" src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
    </div>
    
    <!-- 4. fall leaves -->
    <div class="wrapper">
        <div class="leaves"></div>
    </div>
    
    </body>
    </html>

  23. #23
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    @ronpat ;

    I added the menu and linked the relevant stylesheet.css to your file and you can see the results here:
    http://johns-jokes.com/downloads/sp-...ronpat-002.php

    Check the Validation button on the top right and I will let you explain the following error:

    Line 8, Column 207: there is no attribute "data-href"

    ...and also if it behaves nicely with IEx 8, etc
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  24. #24
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Let me know if it keeps IEx8 happy and what else is required.
    Mornin' John. Unfortunately, DOLPHIN doesn't shrink as gracefully as Ronpat's version. However, I really dig how you colorized that body column magenta for the purposes of seeing which elements are lining up and which aren't. What a great technique; I'll replicate it as we continue. because it makes it so much easier to see.

    s

  25. #25
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    IE8 does not scale the height correctly. I do not know if there is a fix.
    Well that at least is honest.

    Quote Originally Posted by ronpat View Post
    Doctypes and validation sound like the least of your interests right now. Until you are ready to scrap the UPPERCASE code and transfer the deprecated HTML tags to css properties (as John's first example stated), talk about validation sounds patronizing.
    I assure you I wasn't trying to be patronizing. I don't code the way everyone else does; I code the way I can most comfortably read it. If some of the attributes you example are written in lower case, I'm not hiking them into uppercase to be provocative, I'm doing it because I'm learning. It would mortify you to see what I consider to be the most comfortable-to-navigate HTML code: Every < tag is on its own line; atttributes that have been customized are in ALL CAPS; and (horror of horrors) the entire page is blocked left. There is no indentation whatsoever. In time I may adapt to the universally-accepted norm for what is "acceptable" practice, but I would appreciate it if you could bear with me while I learn to crawl, and not criticize me for being unable to tango before I can even stand up.

    I've had such a long-standing problem with being criticized for how "ugly" my code is Ronpat that by now I usually just drop it into Sea Monkey's Composer (which does a neat job of instantly stripping out my hard work) before I post anything publically. I can't read it of course, but some people won't even do me the courtesy of a reply before it's in a format they like (format being apparently more important to them than simply helping me to understand what's happening). So no, Ronpat, you are not the first by a long shot to note the idiosynchranicity of my coding style. I apologize if it offends anyone and I'll strip it in Sea Monkey before posting here, if you really insist. Just be aware that I have to then go in and change it all over again to feel comfortable working with it. I'm a writer you see, and I suspect that my eccentricity is directly related to how aesthetically repugnant a page of HTML code is to my tender sensibilities LOL. No offense friends, please. I'm deeply grateful for your help.

    Quote Originally Posted by ronpat View Post
    The same sample images again. This time the css is written at the top-of-the-page instead of inline. Get used to it!!!
    What's funny is that, if you were following closely, you may have noticed that I first posted this in the HTML forum. As though I could ever escape the tyranny of { } LOL! The moderators promptly lifted me and dropped me over here in CSS whether I liked it or not. I yield! I yield!

    Quote Originally Posted by ronpat View Post
    "Strict" is not "dumber" than "Transitional". Quite the contrary, "Strict" is "forward-looking", whereas "Transitional" accepts the "old school" UPPERCASE code and "old school" deprecated tags without balking. It also handles the space around inline objects differently than newer doctypes. If you have a choice, tune in to HTML 4.01 strict. XHTML is "stricter", has more restrictions/expectations, than HTML "strict". If you've never been there, I don't recommend the trip. Stick with HTML 4.01 strict and start reading about HTML 5.
    Interesting. I learned something there.

    Quote Originally Posted by ronpat View Post
    Your original example page seems to have been created to learn how to auto-resize images in a fluid/responsive environment. I probably clouded the focus by mentioning doctypes.
    You're absolutely correct: This entire thread is primarily about the placement of IMAGES. Well . . . should I be doing this image-intensive page in HTML5? What do you think?

    I'm going to examine your CSS now and -- please don't be offended if I reformat parts of it Ronpat. It's the outcome that matters at this point, and coding style doesn't come into it unless acutely relevant (eg. materially altering the outcome).

    semicolon


Bookmarks

Posting Permissions

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