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
- MUSHROOMS
- PINK PLAID
- MOTORCYCLE
- 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>
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>
YELCHH! Help me AUTO-RATIO & center? It's just horrible (margins, widths, IMG) . . .
Reply With Quote
Originally Posted by semicolon
Very frustrating, but I'm too dogged tired to do any more today.
I swear I dropped the code in at W3 (DIRECT INPUT) and it validated.
).
now and build out from there. Thank you so much.
Bookmarks