Hello World,

I'm new to site designing.
My goal is to make this site viewable the same way on Firefox and IE.
I'm having trouble with my codes because I'm not familiar with the language.
I know myspace is tricky, but maybe someone can help. Thanks.

website: MySpace.com - Beat Diggin - www.myspace.com/beatdiggin


Problem #1:

I'm having trouble getting the top left info to stay in place.
When viewing with IE the top left is fine and adjusted the way I want.
In Firefox, it gets misplaced.


Problem #2:

Because of my adjustments to the top left info, My links on the bottom of the page become
very small. I think its because the unusual code I put in to adjust the top left info requires me to make the font size "1" In doing that it causes the problem with the links on the bottom of the page.
When I make the font size bigger, my adjustments to top left info get misplaced. Thats where I'm stumped. This happens in both Firefox and IE.


Problem #3:

The friends comments boxes look the way its supposed to in IE.
In Firefox, it gets resized. I would like them to be viewed in Firefox the same way as in IE.



Here is my code:


<style type="text/css">.nametext {display:none}</style>

<style type="text/css">
body { background-color: transparent; border: none; border-width: 0px; }
body { background-image: url(http://www.fileden.com/files/2006/10....png);}</style>

<object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="355" width="425" data="http://www.youtube.com/v/c5IJjBvSFyU&rel=1">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/c5IJjBvSFyU&rel=1" />
</object>

<div class=><br></a>
<div class="topLeftInfo">
<font color="033330" size="1" face="Arial, Helvetic, sans-serif"><strong>
"The Original Beatdiggin' Myspace"
</strong></font><br><br>
<div style="color:000000; font-size:9px; font face="Verdana";>
<a style="font-size: 9px; text-decoration: none" href="<A href="http://www.fileden.com/files/2006/10/1/252309/Francis%20Lai.mp3"><b>Le">http://www.fileden.com/files/2006/10/1/252309/Francis%20Lai.mp3"><b>Le Corps De Mon Ennemi OST</b></a>
<br>Francis Lai (1976)<br></font>
<object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="20" width="150" vspace="3" data="http://www.fileden.com/files/2006/10...ncis%20Lai.mp3">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.fileden.com/files/2006/10...ncis%20Lai.mp3" />
<param name="wmode" value="transparent" />
</object>

<style type="Text/css">
.a {hide top left info}
td td td td.text {visibility:hidden;}
.a {unhide default picture}
div td,
.contactTable td.text a, td td td td.text a img {visibility:visible;}
.a {position the new content}
.topLeftInfo {position:absolute; margin-left:-218px; top:213px; width:200px;}
</style>

<style>
.hide{display:none}
.text{font-size:1px}
</style>

OK.. I've fixed some problems.

I've fixed the font size issues and the links on the bottom of the page are normal now in both browsers.

The problem I'm still having is adjustments to the topLeftInfo area.
It shows the way I want it to in IE, but in Firefox I'm still having trouble.
The whole page drops down about a half-inch even after removing all of my codes.

I've tried this code:

<style>
* {margin:0; padding:0}
</style>


Still nothing. And this too...

<style>
html, body {margin:0; padding:0}


Nada. Any help would be greatly appreciated. Thanks.


Here is the new code:


<style>{!-hide name-!}span.nameText {display:none}</style>
<style>div.H {display:none}{! remove quote. Use only if you have no headline text displayed !}table table table table td.text font strong {display:none;}</style>
<style type="text/css">
body { background-color: transparent; border: none; border-width: 0px; }
body { background-image:
url(http://www.fileden.com/files/2006/10....png);}</style>

<object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="355" width="425" data="http://www.youtube.com/v/c5IJjBvSFyU&rel=1">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/c5IJjBvSFyU&rel=1" />
</object>

<div class=><br></a>
<div class="topLeftInfo">
<font color="033330" size="1" face="Arial, Helvetic, sans-serif"><strong>
"The Original Beatdiggin' Myspace"
</strong></font><br><br>

<div style="color:000000; font-size:9px; font face="Verdana";>
<a style="font-size: 9px; text-decoration: none" href="<A href="http://www.fileden.com/files/2006/10/1/252309/Francis%20Lai.mp3"><b>Le">http://www.fileden.com/files/2006/10/1/252309/Francis%20Lai.mp3"><b>Le Corps De Mon Ennemi OST</b></a>
<br>Francis Lai (1976)<br></font>
<object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="20" width="150" vspace="3" data="http://www.fileden.com/files/2006/10...ncis%20Lai.mp3">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.fileden.com/files/2006/10...ncis%20Lai.mp3" />
<param name="wmode" value="transparent" />
</object>

<style type="Text/css">
.a {hide top left info}
td td td td.text {visibility:hidden;}
.contactTable td.text a, td td td td.text a img {visibility:visible;}
.a {position the new content}
.topLeftInfo {position:absolute; margin-left:-218px; top:226px; width:200px;}
</style>

I've come across a code to make the alignments go away in Firefox.

Here it is:

*{margin-top: 0px ! important}


But now the same problem is with happening in IE.
When I remove the code, the problem is in Firefox.
I'm still working on the issue. I'll keep posting any updates as they come.

Any help out there?