I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to do, what keeps happening, what I believe the problem is, the link to my page and the css, and things that I have already tried:
What I'm trying to do:
Basically, I'm trying to lower all the tables in Myspace and place my own DIVs in the new leftover space above them.
What keeps happening:
In Firefox, everything is perfect so far. In IE, however, my DIVs are way out of place from the top.
What I believe the problem is:
Well, after countless hours of looking into this, it seems IE is treating my created DIVs as though they are one of the Myspace tables, and is lowering their position on the page as well. The horizontal positioning from the left seems okay, though. See for yourself in both browsers:
http://www.myspace.com/theceejus (links don't seem to be working with this site)
The CSS (what I think the problem is in bold) - <style type="text/css">
-
.extras1 { background-image:url("http://s9.imagehosting.us/uploadpoint/imagehosting_upload_storage/nouser_1636/T0_-1_1636270.gif");
-
border:5px solid; border-color:000000;
-
width:700px; height:366px;
-
position:absolute; z-index:2; left:156; top:142; !important;}
-
-
.extras2 {
-
background-image:url("http://img101.imageshack.us/img101/1681/ceejsigek6.jpg");
-
border:5px solid; border-color:000000;
-
width:350px; height:250px;
-
position:absolute; z-index:2; left:156; top:535; !important;}
-
-
.extras3 {
-
background-image:url("http://img47.imageshack.us/img47/2029/cjwelcomeve9.gif");
-
border:5px solid; border-color:000000;
-
width:350px; height:250px;
-
position:absolute; z-index:2; left:506; top:535; !important;}
-
-
.extras4 {
-
background-color:transparent;
-
border:1px solid; border-color:000000;
-
width:274px; height:146px;
-
z-index:3; left:546; top:600;
-
position:absolute; text-align:justify; !important;}
-
-
.mygen { Background Properties }
-
table, tr, td { background-color:transparent; border:none; border-width:0;}
-
-
body {
-
background-image: url('http://img220.imageshack.us/img220/233/ceejsidezn1.gif');
-
background-attachment: fixed;
-
background-repeat: no-repeat;
-
background-position: center left;}
-
span.blacktext12 {
-
scrollbar-face-color:FFFFFF;
-
scrollbar-highlight-color:FFFFFF;
-
scrollbar-3dlight-color:000000;
-
scrollbar-shadow-color:FFFFFF;
-
scrollbar-darkshadow-color:000000;
-
scrollbar-arrow-color:FFFFFF;
-
scrollbar-track-color:FFFFFF;
-
}
-
-
.mygen { Table Properties }
-
table table table table {border:0px;}
-
td.text table, td.text table td {width:400px; padding:0px;}
-
td.text table table table table,
-
td.text table table table table td {width:0px;}
- table table {position:relative; bottom: -654px;}
-
table table table {position:static;}
-
table table { border: 0px }
-
table table table table{border:0px}
-
table table td.text table td.text table table {background-color:transparent;}
-
table table table {
-
border-style:solid;
-
border-width:5px;
-
border-color:000000;
-
background-image:url('http://img119.imageshack.us/img119/8806/grid2ju3.gif');
-
background-repeat: repeat;
-
background-attachment: fixed
-
}
-
-
.mygen { Text Properties }
-
table, tr, td, li, p, div { font-family:tahoma; color:000000; font-size:9px; }
-
.btext { font-family:arial; color:000000; text-decoration:overline; }
-
.blacktext10 { font-family:courier new; color:CCCCCC; }
-
.blacktext12 { font-size:0px; }
-
.lightbluetext8 { font-family:impact; color:000000; font-size:10px; font-weight:normal; border:1px solid; }
-
.orangetext15 { font-family:tahoma; color:CC4422; font-size:10px; }
-
.redtext { font-family:verdana; color:CC8822; font-size:12px; font-weight:bold; }
-
.redbtext { font-family:verdana; color:CC8822; font-size:12px; font-weight:bold; }
-
.text { font-family:courier new; color:AAAAAA; font-size:12px; }
-
.whitetext12 { font-family:tahoma; color:CC4422; font-size:10px; }
-
a:active, a:visited, a:link { font-family:tahoma; color:CC8822; font-size:9px; font-weight:normal; text-decoration:underline; }
-
a:hover { font-family:tahoma; color:CC8822; font-size:9px; }
-
a.navbar:active, a.navbar:visited, a.navbar:link { font-family:tahoma; color:000000; font-size:9px; }
-
a.navbar:hover { font-family:tahoma; color:FFFFFF; font-size:9px; }
-
a.redlink:active, a.redlink:visited, a.redlink:link { font-family:tahoma; color:CC8822; font-size:9px; font-weight:normal; text-decoration:underline; }
-
a.redlink:hover { font-family:tahoma; color:CC8822; font-size:9px; font-weight:normal; text-decoration:underline; }
-
.nametext { font-family:verdana; color:EECC22; }
-
-
.mygen { Miscellaneous Properties }
-
a:hover img { filter:Blur(Add = 0, Direction = 225, Strength = 10);}
-
tr {background:transparent;}
-
body table div font a, body table div div {visbility:hidden;}
-
body table table div font a, body table table div div {visibility:visible;}
-
</style>
-
-
<style type="text/css">
-
table table table td {vertical-align:top;}
-
span.blacktext12 {
-
background-color:transparent;
-
background-image:url("http://img215.imageshack.us/img215/1360/myspacebanner4cf0.gif");
-
background-position:center center;
-
font-size:0px; letter-spacing:-0.5px;
-
width:400px; height:100px; display:block; }
-
</style>
-
-
<style>
-
.{hiding the bottom links}
-
table tr td div div {visibility:hidden;border:0px!important;background-color:transparent;}
-
</style>
-
-
<style>
-
.a {hide copyright}
-
table div font {visibility:hidden;}
-
table table div font {visibility:visible;}
-
</style>
-
-
<style>body div table tbody tr td font {visibility:hidden;}
-
.navbar {visibility:visible;}
-
.navbar font {visibility:hidden;}</style>
-
-
<style>body div table tbody tr td font {position:absolute; top:120px;
-
left:50%;
-
margin-left:-318px;
-
z-index:9}
-
.navbar {visibility:visible;}
-
.navbar font {visibility:hidden;}</style>
-
-
<style>
-
table table td {width:10px;}
-
div table table td, table table table td {width:auto;}
-
table table img {display:none;}
-
table table table img {display:inline;}
-
td.text td.text table table div,
-
</style>
-
-
<style>
-
div table table a.navbar {visibility:visible; !important;}
-
</style>
-
-
<div class="extras1">
-
</div>
-
-
<div class="extras2">
-
</div>
-
-
<div class="extras3">
-
</div>
Is there an extra tag I can add in there to make IE keep the positioning the way I set it to, or is there no possible solution to this mess?
Other things I have tried
- Setting a doctype. Basically, you can't. You have to work with what myspace gives you, which is basically no doctype.
- Setting the repositioning of the tables to absolute instead of relative. Setting it to anything else but relative messes the positioning up even more.
- Leaving out a position. That screwed up my positioning more than just about anything I tried.
- Putting the position tag inside the DIV itself rather than in the CSS styles. That basically didn't do anything. It had the same effect.
- Setting the left tag to 50% and the top tag to 0%, then using margin-top and margin-left to position it from there. That still didn't fix my IE problem, not to mention the effect was still no different.
- I can't position them as plain images because I plan on putting text over the one that says "Welcome", which will be the extras4 div that I decided not to show just yet.
- Placing an "!important;" tag inside the tags. That did absolutely nothing.
- Using javascript to fix the problem. You can't. Myspace filters it.
With that said, I know for a fact the solution to this must be fairly simple, if there is one. It may look like a complex problem in text, but it's really not. I just have no clue what so ever on how to fix this. If you know the answer, then hands down... you are a genius with html/css. Thanks beforehand for any suggestions BTW. Again, I would really appreciate any assistance.
