It went from bad to worse. This fellow has pretty much gave up. I have been trying everything an amateur can do to fix it. What I am trying to do is obviously not working. 
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--COPYRIGHT (C) DATE HERE. NAME HERE.-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
LINGUA LATINA
</title>
<style type="text/css">
body
{
position: relative;
font-size: 62%;
margin: 0;
padding: 1em 0em 0em 0em;
text-align: center;
background-color: rgb(255,255,255);
background-image: url('/media/ele/bgb.gif');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
div#o
{
position: relative;
width: 80em;
padding: 0em;
border: 0em;
text-align: left;
margin: 0 auto;
}
div#b
{
position: inherit;
margin: 2.5em 0em 0em 0em;
height: 100em;
border: 0.7em solid rgb(0,0,0);
outline: rgb(255,0,0) solid 2.5em;
background-color: rgb(255,255,255);
}
div#t
{
position: inherit;
}
table#spl, tr#spl
{
position: absolute;
top: 0em;
left: 30em;
bottom: 2.5em;
z-index: 3;
}
table#h, tr#h
{
position: inherit;
padding: 4em 0em;
margin: 0 auto;
display: block;
text-align: center;
z-index: 2;
}
div#m
{
position: inherit;
padding: 3em 2.5em 0em 2.5em;
text-align: justify;
font: normal normal 300 2.0em "Times New Roman", Times, sans-serif;
}
table#p, tr#p
{
position: inherit;
border: 0em;
margin: 0em 1em 0.2em 0em;
vertical-align: top;
float: left;
}
p#sp
{
position: inherit;
padding-top: 1em;
}
div#f
{
position: inherit;
text-align: right;
font: normal small-caps 400 1.2em/2em "Arial", Helvetica, sans-serif;
color: rgb(0,0,0);
z-index: 3;
}
</style>
</head>
<body>
<div id="o">
<div id="b">
<div id="t">
<table id="spl">
<tr id="spl">
<td>
<img alt="DUMMY ELEMENT" src="/media/ele/cs.png" height="327" width="245">
</td>
</tr>
</table>
<table id="h">
<tr id="h">
<td>
<img alt="DUMMY ELEMENT" src="/media/ele/h.png" width="388" height="71">
</td>
</tr>
</table>
</div>
<div id="m">
<table id="p">
<tr id="p">
<td>
<img style="border: 0.25em solid rgb(0,0,0); outline: rgb(255,255,255) solid 0.2em;" alt="DUMMY ELEMENT" src="media/meweb.jpg" width="250">
</td>
</tr>
</table>
<p id="sp">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>
</div>
<div id="f">
COPYRIGHT © 2011 DATE HERE. NAME HERE. ___ RIGHTS RESERVED.
</div>
</div>
</body>
</html>
Chrome
Firefox
IE9
Opera
Cross-browser
Reply With Quote
Anyone else have experience with ModX Rev.? This is irritating. The whole point of using it was to save time. 
Thank you guys for your quick responses! 
I have been really busy doing other things today and have not finished tweaking it. (*_*)
I knew .class is used for multiple items and #id is used for single items, but I somehow missed it. Table has been working terribly for positioning. lol I have been gradually teaching myself coding for about a year now to expand my computer knowledge. As a do-it-yourself guy, I would much rather build a site myself than have someone else do it for me. Agreed? I wonder why there is not a more universal standard across different browsers? 
Each one has some uniqueness to them.
Bookmarks