Now, this was the first time I checked this particular div. Everything seems to be working properly, except for the .Header div, to which I have repeating on the x-axis. It's much easier if you check it yourself..
http://www.myspace.com/jordanlovato
Here's the CSS:
CODE
<style>
.tblright p {
line-height: 150%;
color: 8b8265;
padding: 20px;
font-size: 1em;
font-family: tahoma;
font-weight: regular;
}
.tblright {
position: absolute;
margin-left: 150px;
top: 400px;
width: 280px;
background-color: ECEAE1;
border: 1px solid black;
height: 1000px;
z-index: 3;
border-left: none;
}
.tblleft img {
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
border-style: solid;
border-color: B1C1C1;
border-width: 1px;
float: right;
}
.tblleft i {
text-indent: 20px;
padding: 20px;
font-family: arial;
font-size: 8pt;
color: 6d6d6d;
text-decoration: italicize;
}
.tblleft a {
font-family: tahoma;
font-size: 1em;
font-weight: regular;
color: 524F1A;
text-decoration: none;
}
.tblleft a:hover {
text-decoration: underline;
}
.tblleft a:visited {
color: 000000;
}
.tblleft h1 {
padding: 20px;
position: relative;
color: 000000;
font-size: 24pt;
font-family: tahoma;
font-weight: bold;
}
.tblleft h1 span {
background: url(http://jordanlovato.googlepages.com/H1.png) repeat-x;
position: absolute;
display: block;
width: 80%;
height: 30px;
}
.tblleft p {
line-height: 150%;
color: 424242;
padding: 20px;
font-family: tahoma;
font-size: 1em;
font-weight: regular;
}
.tblleft {
top: 400px;
position: absolute;
margin-left: -350px;
width: 500px;
height: 1000px;
background-color: white;
border: 1px solid black;
z-index: 3;
}
.Nav {
position: absolute;
width: 100%;
left: 0px;
top: 213px;
z-index: 2;
}
.Nav ul {
text-align: center;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.Nav li {
display: inline;
}
.Nav li a {
Color: 65602A;
font-family: Century Gothic;
font-size: 14pt;
font-weight: regular;
text-transform: uppercase;
padding: 11px;
}
.Nav li a:hover {
Color: 52311A;
background-color: 6a652f;
}
.Nav li a:active {
Color: B4B848;
}
.header {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 600px;
background-image: url('http://jordanlovato.googlepages.com/Headerbgcopy.png');
background-repeat: repeat-x;
}
body {
background-color: 524F1A;
}
.contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12, .btext, .redtext, .redbtext {
display:none;
height:0px;
visibility:hidden;
}
td td td td {
border:0px none;
text-align:left;
width:0px;
}
table, td, tr {
background-color:transparent;
padding:0px;
}
table table table {
height:0.01%;
padding:1px;
width:100%;
}
table table, table table table table, table, tr, td {
border:0px none;
height:0px;
}
a.text, table div font a, table div div, .navbar font, tr td font {
display:none;
height:0px;
visibility:hidden;
}
table table table table, table table table table td.text, td.text td.text table {
display:none;
}
td.text table table {
display:inline;
visibility:visible;
}
table td table tr td.text table {
visibility:hidden;
}
table td table tr td.text table table, table td table tr td.text table table td.text {
visibility:visible;
}
a.navbar {
font-size: 0px;
}
</style>
.tblright p {
line-height: 150%;
color: 8b8265;
padding: 20px;
font-size: 1em;
font-family: tahoma;
font-weight: regular;
}
.tblright {
position: absolute;
margin-left: 150px;
top: 400px;
width: 280px;
background-color: ECEAE1;
border: 1px solid black;
height: 1000px;
z-index: 3;
border-left: none;
}
.tblleft img {
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
border-style: solid;
border-color: B1C1C1;
border-width: 1px;
float: right;
}
.tblleft i {
text-indent: 20px;
padding: 20px;
font-family: arial;
font-size: 8pt;
color: 6d6d6d;
text-decoration: italicize;
}
.tblleft a {
font-family: tahoma;
font-size: 1em;
font-weight: regular;
color: 524F1A;
text-decoration: none;
}
.tblleft a:hover {
text-decoration: underline;
}
.tblleft a:visited {
color: 000000;
}
.tblleft h1 {
padding: 20px;
position: relative;
color: 000000;
font-size: 24pt;
font-family: tahoma;
font-weight: bold;
}
.tblleft h1 span {
background: url(http://jordanlovato.googlepages.com/H1.png) repeat-x;
position: absolute;
display: block;
width: 80%;
height: 30px;
}
.tblleft p {
line-height: 150%;
color: 424242;
padding: 20px;
font-family: tahoma;
font-size: 1em;
font-weight: regular;
}
.tblleft {
top: 400px;
position: absolute;
margin-left: -350px;
width: 500px;
height: 1000px;
background-color: white;
border: 1px solid black;
z-index: 3;
}
.Nav {
position: absolute;
width: 100%;
left: 0px;
top: 213px;
z-index: 2;
}
.Nav ul {
text-align: center;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.Nav li {
display: inline;
}
.Nav li a {
Color: 65602A;
font-family: Century Gothic;
font-size: 14pt;
font-weight: regular;
text-transform: uppercase;
padding: 11px;
}
.Nav li a:hover {
Color: 52311A;
background-color: 6a652f;
}
.Nav li a:active {
Color: B4B848;
}
.header {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 600px;
background-image: url('http://jordanlovato.googlepages.com/Headerbgcopy.png');
background-repeat: repeat-x;
}
body {
background-color: 524F1A;
}
.contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12, .btext, .redtext, .redbtext {
display:none;
height:0px;
visibility:hidden;
}
td td td td {
border:0px none;
text-align:left;
width:0px;
}
table, td, tr {
background-color:transparent;
padding:0px;
}
table table table {
height:0.01%;
padding:1px;
width:100%;
}
table table, table table table table, table, tr, td {
border:0px none;
height:0px;
}
a.text, table div font a, table div div, .navbar font, tr td font {
display:none;
height:0px;
visibility:hidden;
}
table table table table, table table table table td.text, td.text td.text table {
display:none;
}
td.text table table {
display:inline;
visibility:visible;
}
table td table tr td.text table {
visibility:hidden;
}
table td table tr td.text table table, table td table tr td.text table table td.text {
visibility:visible;
}
a.navbar {
font-size: 0px;
}
</style>
and the HTML
CODE
<body>
<div class="header">
</div>
<div class="Nav">
<ul>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">Home</a></li>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zMDI0ODE0NjU=">Pictures</a></li>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTMwMjQ4MTQ2NSZN
VRva2VuPWM1MWY5Y2E3LTg5ZTgtNGUwMC05NTRlLTAyNGU2NmExZmU3Mw==">Comment</a></li>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zMDI0ODE0NjUmTXlUb2tlbj11bmRlZmluZWQ=">Message</a></li>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdmcmllbmRzMiZmcmllbmRJRD0zMDI0ODE0NjUmTXlUb2tlbj0zMGQy
WE2OS1lOTIzLTQ0MzMtYjc3My01YzllNmUwMzIyYmM=">Friends</a></li>
</ul>
</div>
<div class="tblleft">
<h1><span></span>Jordan's Myspace</h1>
<i>The header is hard to select, but it's done with pure CSS, so it is possible.</i>
<img src="http://farm4.static.flickr.com/3166/2374105249_414eeffca3_m.jpg" width="240" height="183" />
<p>
Hullo, You caught me in the middle of editing my profile.. I do all the coding and design myself, so it may take awhile. Check back later if you'd like.. In the mean time, check out a sample image to the right. Well, Thanks for visiting. But first, let me test show you this <a href="jordanlovato">Test Link</a>.
</p>
</div>
<div class="tblright">
<p> MWAHAHHAHAHA... This sample text is on the right side of the page! Now tell me that isn't awesome? TELL ME! btw, the links at the top should work now.. </p>
</div>
</body>
I'm fairly certain the problem lies in the HTML, but I'm not quite sure. It look perfect in firefox. I thought someone else may have already found a solution to this problem...
<div class="header">
</div>
<div class="Nav">
<ul>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">Home</a></li>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zMDI0ODE0NjU=">Pictures</a></li>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTMwMjQ4MTQ2NSZN
VRva2VuPWM1MWY5Y2E3LTg5ZTgtNGUwMC05NTRlLTAyNGU2NmExZmU3Mw==">Comment</a></li>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zMDI0ODE0NjUmTXlUb2tlbj11bmRlZmluZWQ=">Message</a></li>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdmcmllbmRzMiZmcmllbmRJRD0zMDI0ODE0NjUmTXlUb2tlbj0zMGQy
WE2OS1lOTIzLTQ0MzMtYjc3My01YzllNmUwMzIyYmM=">Friends</a></li>
</ul>
</div>
<div class="tblleft">
<h1><span></span>Jordan's Myspace</h1>
<i>The header is hard to select, but it's done with pure CSS, so it is possible.</i>
<img src="http://farm4.static.flickr.com/3166/2374105249_414eeffca3_m.jpg" width="240" height="183" />
<p>
Hullo, You caught me in the middle of editing my profile.. I do all the coding and design myself, so it may take awhile. Check back later if you'd like.. In the mean time, check out a sample image to the right. Well, Thanks for visiting. But first, let me test show you this <a href="jordanlovato">Test Link</a>.
</p>
</div>
<div class="tblright">
<p> MWAHAHHAHAHA... This sample text is on the right side of the page! Now tell me that isn't awesome? TELL ME! btw, the links at the top should work now.. </p>
</div>
</body>
I'm fairly certain the problem lies in the HTML, but I'm not quite sure. It look perfect in firefox. I thought someone else may have already found a solution to this problem...