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

[SIZE=2]It validates; it just looks like crap. :smiley:

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

[LIST=1][]MUSHROOMS
[
]PINK PLAID
[]MOTORCYCLE
[
]FALL LEAVES[/LIST]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. :lol:

Well, here she is. HELP?

s[/SIZE]

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

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.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

should be written:


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


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

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.

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.


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

[FONT=Verdana]“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?[/FONT]

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-a/semicolon/semicolon.php

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

Also note that the source fpr both pages are included at the end of the page.

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

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.

Yee Haw I’ve nailed it Gents!

<img style="[COLOR="#FF0000"]display: BLOCK; margin: AUTO;[/COLOR] 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. :lol: I’ll report back (hopefully) with some bulletproof code.

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. :frowning: Very frustrating, but I’m too dogged tired to do any more today.

s

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

@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-a/semicolon/semicolon-002.php

Following validation link shows 37 errors and 2 warnings.

http://validator.w3.org/check?uri=http%3A%2F%2Fjohns-jokes.com%2F%2Fdownloads%2Fsp-a%2Fsemicolon%2Fsemicolon-002.php&charset=%28detect+automatically%29&doctype=Inline&outline=1&group=0&No200=1&verbose=1&user-agent=W3C_Validator%2F1.3

Hey John, wow that is too weird. :confused: 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 :p).

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

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

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?

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

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

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 Strictand placing the IMG inside a DIV both validates and renders correctly in IEx:

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

Okay it validates and renders correctly in both browsers as XHTML 1.0

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

Copy & Paste, EXACTLY as is. Describe the problems in plain Anglish.


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

Yikes but that is damn good Ronpat! :smiley: 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 :x now and build out from there. Thank you so much.

semicolon

Wow that thing is bulletproof on the frame. Really impressed Ron.

Now for some reason the height isn’t shrinking in IEx 8. Well what else is new . . . Thoughts?