DaveMcCourt
08-07-2010, 03:36 PM
Hey guys, first post here, hope someone can help me.
Basically, I'm an amatuer HMTL and CSS editor. I am in a band and rather than pay someone through the teeth to make us a decent MySpace, I decided to learn how to do it myself.
My problem is of course related to Internet Explorer vs every other browser. The issue doesn't lie in fixing position etc (I understand the use of the _ hack, finally!). IE chooses not to pick up on my editing of values. If someone could have a look over the code and tell me where I'm going wrong, I would appreciate it. I should warn you though, it's not pretty and a little bit all over the place, but it's the only way I know how to do it!
http://www.myspace.com/dmdesignstestsite
Basically, I have several hyperlink image components that need to be positioned. The positioning of the top hyperlink (the image of the album cover) is perfect, as is the position of the band pic that links to more pictures. The problem is that whenever I try to add another element, it positions it directly underneath the image above it in IE. This doesn't happen in FF etc, only in IE.
Can someone help me?
___________________________________________________________
<style>body{overflow-x:hidden}</style>
<style>
table.latestblogentry {position:relative; top:43px;}
</style>
<img src='http://img641.imageshack.us/img641/7083/aboutbanner.png' border='0' /><p>
Since Grant Me Revenge first formed in 2007, we have shared the stage with major acts, local acts and made a few good friends along the way.<p>
<center><i>Annotations of an Autopsy<br />
The Acacia Strain<br />
Exit Ten<br />
Bleed From Within<br />
Outcry Collective<br />
Rip In Reality<br />
Witness The Fall<br />
Mind Set A Threat<br />
To Kill Achilles<br />
Chasm<br />
Departures<br />
The Colour Pink Is Gay<br />
Visceral Diety<br />
The Party Program<br />
Centuries Cry<br />
Peep Show<br />
From Almost The End<br />
Dead At The Scene<br />
Madman Is Absolute<br />
Burn The Sunset<br />
Carved From Violence</center></i><p>
After recording our EP "The Destruction Process" at Chime Studios in 2007, Grant Me Revenge released the six-song debut to listen on MySpace and for free download on Last.FM. After being contacted by UK Metal Underground Online, "The Destruction Process" has been given a strong review:<p>
"Grant Me Revenge stay well away from the stagnation of the metal/deathcore genre, instead choosing to pave a path in 21st century, forward thinking hardcore.<p>
Instead of blatant, faux-aggressive breakdowns you can predict 30 seconds before they turn up to annoy you, Grant Me Revenge manage to incorporate them intelligently into their songs without sending you to sleep."<p>
<font size="3">UK Metal Underground - Review 2009</font><p>
<img src='http://img46.imageshack.us/img46/6949/supportbanner.png' border='0' /><p>
<a target='_blank' title='GRANT ME REVENGE' href='http://www.myspace.com/grantmerevenge'><img src='http://img535.imageshack.us/img535/8494/supportbanner.gif' border='0' /></a><p>
<center><textarea rows="1" cols="40">
<a target='_blank' title='GRANT ME REVENGE' href='http://www.myspace.com/grantmerevenge'><img src='http://img535.imageshack.us/img535/8494/supportbanner.gif' border='0'/></a>
</textarea></center><p>
<style>
.mygen { Created using MyGen 2.5 - www.mygen.co.uk }
.mygen { Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-color:000000;
background-image:url(none);
background-attachment: scroll center;
background-position:top center;
background-repeat:no-repeat;
}
.mygen { Table Properties }
table table { border: 0px }
table table table table{border:0px}
table table table {
border-style:none;
border-width:0px;
border-color:transparent;
}
.mygen { Text Properties }
table, tr, td, li, p, div { color:FFFFFF; }
.btext { color:FFFFFF; }
.blacktext10 { color:FFFFFF; }
.blacktext12 { color:FFFFFF; }
.lightbluetext8 { color:FFFFFF; }
.orangetext15 { color:FFFFFF; }
.redtext { color:FFFFFF; }
.redbtext { color:FFFFFF; }
.text { color:FFFFFF; }
.whitetext12 { color:FFFFFF; }
a:active, a:visited, a:link { color:FFFFFF; }
a:hover { color:FFFFFF; }
a.navbar:active, a.navbar:visited, a.navbar:link { color:FFFFFF; }
a.navbar:hover { color:FFFFFF; }
a.redlink:active, a.redlink:visited, a.redlink:link { color:FFFFFF; }
a.redlink:hover { color:FFFFFF; }
.nametext { color:FFFFFF; }
</style>
<style>
td.subnavItems,
div table td a.navbar img {display:none;}
</style>
<div class="topimage1">
<img src="http://a.imageshack.us/img340/4461/75224179.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage1 {width:0px; height:0px; position:absolute; top:0px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage2">
<img src="http://a.imageshack.us/img413/4339/13536863.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage2 {width:0px; height:0px; position:absolute; top:212px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage3">
<img src="http://a.imageshack.us/img203/849/62661245.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage3 {width:0px; height:0px; position:absolute; top:424px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage4">
<img src="http://a.imageshack.us/img704/3796/65021426.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage4 {width:0px; height:0px; position:absolute; top:636px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage5">
<img src="http://a.imageshack.us/img695/6969/96982556.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage5 {width:0px; height:0px; position:absolute; top:848px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage6">
<img src="http://a.imageshack.us/img132/2333/11725525.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage6 {width:0px; height:0px; position:absolute; top:1060px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage7">
<img src="http://a.imageshack.us/img838/4052/91165918.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage7 {width:0px; height:0px; position:absolute; top:1272px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage8">
<img src="http://a.imageshack.us/img706/3333/33302756.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage8 {width:0px; height:0px; position:absolute; top:1484px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage9">
<img src="http://a.imageshack.us/img820/8131/98082067.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage9 {width:0px; height:0px; position:absolute; top:1696px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage10">
<img src="http://a.imageshack.us/img291/3116/92936031.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage10 {width:0px; height:0px; position:absolute; top:1908px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage11">
<img src="http://a.imageshack.us/img443/7706/28718578.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage11 {width:0px; height:0px; position:absolute; top:2120px; left:50%; margin-left:-893px; text-align:center;}</style>
<style>.nametext {display:none;}</style>
<style>
.a {hide profile views in artist profile}
td td td td.text {visibility:hidden;}
td.text td.text,
td td td td.text * {visibility:visible;}
</style>
<style>
.contactTable {display: none;}
</style>
<style>
tr[id="Record LabelRow"] {display:none;}
tr[id="Type of LabelRow"] {display:none;}
</style>
<style>.orangetext15{ display:none; visibility:hidden; }</style>
<style>
.a {hide member since row}
tr[id="Member SinceRow"] {display:none;}
</style>
<span class="off">!-Start Block to Shift Comments To Center-!</span>
<style>
{!-Change the top px value as needed. This is distance B on the chart-!}
table.friendscomments {position:relative; right:0px; top:-1300px;}
table.friendscomments {width:475px !important;}
table.friendscomments td, table.friendscomments table {width:100% !important}
table.friendscomments table table td {width:auto !important;}
</style>
<span class="off">!-END Block to Shift Comments To Center-!</span>
<div class="sticker">
<div>
<table cellspacing="0" cellpadding="0">
<tr><td><a href="http://www.msplinks.com/MDFodHRwOi8vZ3JhbnRtZXJldmVuZ2UuYmlnY2FydGVsLmNvbS8=" target="_blank"><img src="http://img710.imageshack.us/img710/2417/albumtop.png" width="262" height="304" border="0" style="margin-left:25px" /></a></td>
</tr>
</table>
</div>
<style>
.sticker { position: absolute; top:0%; margin-top: 250px; left: 50%; height: 0px; width: 0px; overflow: visible; background-color: transparent; margin-left: -600px; text-align: left; z-index:5;}
*html { position: absolute; top:0%; margin-top:0px; left: 0%; height: 10px; width: 320px; overflow: visible; background-color: transparent; margin-left: 0px; text-align: left; z-index:3;}
</style>
<div class="profilepic2">
<div>
<table cellspacing="0" cellpadding="0">
<tr><td><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=299413479" target=" target="><img src="http://img704.imageshack.us/img704/8518/profilepicg.jpg" width="320" height="380" border="0" style="margin-left:25px" /></a></td>
</tr>
</table>
</div>
<style>
.profilepic2 { position: absolute; top:0%; margin-top: 2000px; left: 50%; height: 0px; width: 0px; overflow: visible; background-color: transparent; margin-left: 157px; _margin-left: 20px; text-align: left; z-index:5;}
*html { position: absolute; top:0%; margin-top:0px; left: 0%; height: 10px; width: 320px; overflow: visible; background-color: transparent; margin-left: 0px; text-align: left; z-index:3;}
</style>
<div class="profilepic">
<div>
<table cellspacing="0" cellpadding="0">
<tr><td><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=299413479" target=" target="><img src="http://img704.imageshack.us/img704/8518/profilepicg.jpg" width="320" height="380" border="0" style="margin-left:25px" /></a></td>
</tr>
</table>
</div>
<style>
.profilepic { position: absolute; top:0%; margin-top: 1672px; left: 50%; height: 0px; width: 0px; overflow: visible; background-color: transparent; margin-left: 157px; _margin-left: 20px; text-align: left; z-index:5;}
*html { position: absolute; top:0%; margin-top:0px; left: 0%; height: 10px; width: 320px; overflow: visible; background-color: transparent; margin-left: 0px; text-align: left; z-index:3;}
</style>
Basically, I'm an amatuer HMTL and CSS editor. I am in a band and rather than pay someone through the teeth to make us a decent MySpace, I decided to learn how to do it myself.
My problem is of course related to Internet Explorer vs every other browser. The issue doesn't lie in fixing position etc (I understand the use of the _ hack, finally!). IE chooses not to pick up on my editing of values. If someone could have a look over the code and tell me where I'm going wrong, I would appreciate it. I should warn you though, it's not pretty and a little bit all over the place, but it's the only way I know how to do it!
http://www.myspace.com/dmdesignstestsite
Basically, I have several hyperlink image components that need to be positioned. The positioning of the top hyperlink (the image of the album cover) is perfect, as is the position of the band pic that links to more pictures. The problem is that whenever I try to add another element, it positions it directly underneath the image above it in IE. This doesn't happen in FF etc, only in IE.
Can someone help me?
___________________________________________________________
<style>body{overflow-x:hidden}</style>
<style>
table.latestblogentry {position:relative; top:43px;}
</style>
<img src='http://img641.imageshack.us/img641/7083/aboutbanner.png' border='0' /><p>
Since Grant Me Revenge first formed in 2007, we have shared the stage with major acts, local acts and made a few good friends along the way.<p>
<center><i>Annotations of an Autopsy<br />
The Acacia Strain<br />
Exit Ten<br />
Bleed From Within<br />
Outcry Collective<br />
Rip In Reality<br />
Witness The Fall<br />
Mind Set A Threat<br />
To Kill Achilles<br />
Chasm<br />
Departures<br />
The Colour Pink Is Gay<br />
Visceral Diety<br />
The Party Program<br />
Centuries Cry<br />
Peep Show<br />
From Almost The End<br />
Dead At The Scene<br />
Madman Is Absolute<br />
Burn The Sunset<br />
Carved From Violence</center></i><p>
After recording our EP "The Destruction Process" at Chime Studios in 2007, Grant Me Revenge released the six-song debut to listen on MySpace and for free download on Last.FM. After being contacted by UK Metal Underground Online, "The Destruction Process" has been given a strong review:<p>
"Grant Me Revenge stay well away from the stagnation of the metal/deathcore genre, instead choosing to pave a path in 21st century, forward thinking hardcore.<p>
Instead of blatant, faux-aggressive breakdowns you can predict 30 seconds before they turn up to annoy you, Grant Me Revenge manage to incorporate them intelligently into their songs without sending you to sleep."<p>
<font size="3">UK Metal Underground - Review 2009</font><p>
<img src='http://img46.imageshack.us/img46/6949/supportbanner.png' border='0' /><p>
<a target='_blank' title='GRANT ME REVENGE' href='http://www.myspace.com/grantmerevenge'><img src='http://img535.imageshack.us/img535/8494/supportbanner.gif' border='0' /></a><p>
<center><textarea rows="1" cols="40">
<a target='_blank' title='GRANT ME REVENGE' href='http://www.myspace.com/grantmerevenge'><img src='http://img535.imageshack.us/img535/8494/supportbanner.gif' border='0'/></a>
</textarea></center><p>
<style>
.mygen { Created using MyGen 2.5 - www.mygen.co.uk }
.mygen { Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-color:000000;
background-image:url(none);
background-attachment: scroll center;
background-position:top center;
background-repeat:no-repeat;
}
.mygen { Table Properties }
table table { border: 0px }
table table table table{border:0px}
table table table {
border-style:none;
border-width:0px;
border-color:transparent;
}
.mygen { Text Properties }
table, tr, td, li, p, div { color:FFFFFF; }
.btext { color:FFFFFF; }
.blacktext10 { color:FFFFFF; }
.blacktext12 { color:FFFFFF; }
.lightbluetext8 { color:FFFFFF; }
.orangetext15 { color:FFFFFF; }
.redtext { color:FFFFFF; }
.redbtext { color:FFFFFF; }
.text { color:FFFFFF; }
.whitetext12 { color:FFFFFF; }
a:active, a:visited, a:link { color:FFFFFF; }
a:hover { color:FFFFFF; }
a.navbar:active, a.navbar:visited, a.navbar:link { color:FFFFFF; }
a.navbar:hover { color:FFFFFF; }
a.redlink:active, a.redlink:visited, a.redlink:link { color:FFFFFF; }
a.redlink:hover { color:FFFFFF; }
.nametext { color:FFFFFF; }
</style>
<style>
td.subnavItems,
div table td a.navbar img {display:none;}
</style>
<div class="topimage1">
<img src="http://a.imageshack.us/img340/4461/75224179.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage1 {width:0px; height:0px; position:absolute; top:0px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage2">
<img src="http://a.imageshack.us/img413/4339/13536863.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage2 {width:0px; height:0px; position:absolute; top:212px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage3">
<img src="http://a.imageshack.us/img203/849/62661245.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage3 {width:0px; height:0px; position:absolute; top:424px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage4">
<img src="http://a.imageshack.us/img704/3796/65021426.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage4 {width:0px; height:0px; position:absolute; top:636px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage5">
<img src="http://a.imageshack.us/img695/6969/96982556.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage5 {width:0px; height:0px; position:absolute; top:848px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage6">
<img src="http://a.imageshack.us/img132/2333/11725525.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage6 {width:0px; height:0px; position:absolute; top:1060px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage7">
<img src="http://a.imageshack.us/img838/4052/91165918.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage7 {width:0px; height:0px; position:absolute; top:1272px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage8">
<img src="http://a.imageshack.us/img706/3333/33302756.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage8 {width:0px; height:0px; position:absolute; top:1484px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage9">
<img src="http://a.imageshack.us/img820/8131/98082067.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage9 {width:0px; height:0px; position:absolute; top:1696px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage10">
<img src="http://a.imageshack.us/img291/3116/92936031.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage10 {width:0px; height:0px; position:absolute; top:1908px; left:50%; margin-left:-893px; text-align:center;}</style>
<div class="topimage11">
<img src="http://a.imageshack.us/img443/7706/28718578.png" border="0" /></a>
</div>
<style>table table {margin-top:1720px;}
div table table, table table table {margin-top:0;}
.topimage11 {width:0px; height:0px; position:absolute; top:2120px; left:50%; margin-left:-893px; text-align:center;}</style>
<style>.nametext {display:none;}</style>
<style>
.a {hide profile views in artist profile}
td td td td.text {visibility:hidden;}
td.text td.text,
td td td td.text * {visibility:visible;}
</style>
<style>
.contactTable {display: none;}
</style>
<style>
tr[id="Record LabelRow"] {display:none;}
tr[id="Type of LabelRow"] {display:none;}
</style>
<style>.orangetext15{ display:none; visibility:hidden; }</style>
<style>
.a {hide member since row}
tr[id="Member SinceRow"] {display:none;}
</style>
<span class="off">!-Start Block to Shift Comments To Center-!</span>
<style>
{!-Change the top px value as needed. This is distance B on the chart-!}
table.friendscomments {position:relative; right:0px; top:-1300px;}
table.friendscomments {width:475px !important;}
table.friendscomments td, table.friendscomments table {width:100% !important}
table.friendscomments table table td {width:auto !important;}
</style>
<span class="off">!-END Block to Shift Comments To Center-!</span>
<div class="sticker">
<div>
<table cellspacing="0" cellpadding="0">
<tr><td><a href="http://www.msplinks.com/MDFodHRwOi8vZ3JhbnRtZXJldmVuZ2UuYmlnY2FydGVsLmNvbS8=" target="_blank"><img src="http://img710.imageshack.us/img710/2417/albumtop.png" width="262" height="304" border="0" style="margin-left:25px" /></a></td>
</tr>
</table>
</div>
<style>
.sticker { position: absolute; top:0%; margin-top: 250px; left: 50%; height: 0px; width: 0px; overflow: visible; background-color: transparent; margin-left: -600px; text-align: left; z-index:5;}
*html { position: absolute; top:0%; margin-top:0px; left: 0%; height: 10px; width: 320px; overflow: visible; background-color: transparent; margin-left: 0px; text-align: left; z-index:3;}
</style>
<div class="profilepic2">
<div>
<table cellspacing="0" cellpadding="0">
<tr><td><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=299413479" target=" target="><img src="http://img704.imageshack.us/img704/8518/profilepicg.jpg" width="320" height="380" border="0" style="margin-left:25px" /></a></td>
</tr>
</table>
</div>
<style>
.profilepic2 { position: absolute; top:0%; margin-top: 2000px; left: 50%; height: 0px; width: 0px; overflow: visible; background-color: transparent; margin-left: 157px; _margin-left: 20px; text-align: left; z-index:5;}
*html { position: absolute; top:0%; margin-top:0px; left: 0%; height: 10px; width: 320px; overflow: visible; background-color: transparent; margin-left: 0px; text-align: left; z-index:3;}
</style>
<div class="profilepic">
<div>
<table cellspacing="0" cellpadding="0">
<tr><td><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=299413479" target=" target="><img src="http://img704.imageshack.us/img704/8518/profilepicg.jpg" width="320" height="380" border="0" style="margin-left:25px" /></a></td>
</tr>
</table>
</div>
<style>
.profilepic { position: absolute; top:0%; margin-top: 1672px; left: 50%; height: 0px; width: 0px; overflow: visible; background-color: transparent; margin-left: 157px; _margin-left: 20px; text-align: left; z-index:5;}
*html { position: absolute; top:0%; margin-top:0px; left: 0%; height: 10px; width: 320px; overflow: visible; background-color: transparent; margin-left: 0px; text-align: left; z-index:3;}
</style>