I have been fighting this for about two weeks now... My page looks great in Safari and Firefox but its chaos in IE... I will give you the link and paste the code:


site:

www.myspace.com/unitethefaith



code (added to the "Bio" section in Myspace):

<style type="text/css">

body {margin-top: 0;}
.iTopA {
position: absolute;
top: 0px;
left: 50%;
margin-left: -402px;
width: 800px;
z-index: 3;
}

.Left {
position: fixed;
top: 0px;
left: 50%;
margin-left: -800px;
z-index: 3;
}

.Right {
position: fixed;
top: 0px;
left: 50%;
margin-left: 400px;
z-index: 3;
}

.Recordimg {
position:absolute;
top: 789px;
left: 50%;
margin-left: -402px;
z-index: 2;
}

.Bio {
position: absolute;
top: 1138px;
left: 50%;
margin-left: -402px;
z-index: 2;
}

.CDriveadd {
position: absolute;
top: 1538px;
left: 50%;
margin-left: -402px;
z-index: 2;
}

object {
position: relative;
top: 571px;
left: 4px;
z-index: 3;
}

.contactTable {
position: relative;
top: 1510px;
left: 0px;
z-index: 3;
}

.comments {
position: absolute;
left: 50%;
top: 2070px;
margin-left: -402px;
}

table.friendSpace {display: none;}
div.friendsAndComments table {width: 100%;}
div.friendsAndComments {overflow: auto; width: 788px; height: 398px;}

table, tr, td {
background: transparent;
border: 0px;
}

table table table {
background: transparent;
z-index: 1;
}

</style>

<div class="iTopA">
<img src="http://img110.imageshack.us/img110/6456/myspacemodel6.jpg">
</div>

<div class="Left">
<img src="http://img11.imageshack.us/img11/8599/left2.jpg">
</div>

<div class="Right">
<img src="http://img223.imageshack.us/img223/7452/right2.jpg">
</div>

<div class="Recordimg">
<img src="http://img18.imageshack.us/img18/1825/myspacecd.jpg" width="350" height="346">
</div>

<div class="Bio">
<img src="http://img13.imageshack.us/img13/3578/myspacebios.jpg" width="805" height="400">
</div>

<div class="CDriveadd">
<img src="http://img17.imageshack.us/img17/4513/myspacedrive.jpg" width="805" height="402">
</div>

<div class="comments"><table height="400"><tr><td><table><tr><td></div>

<div class="friendsAndComments">
<table><tr><td class="text">
<table style="display:none;"><tr><td>
<table><tr><td>/div>



Can anyone please let me know what I can do to fix these bugs in IE... I really dont know much about CSS... Thank you so much!

I'm not at all surprised you're having nightmares with that in IE. IE6 has some MAJOR problems with position:absolute and does NOT support position:fixed at all.

You can read about it's many bugs here: www.positioniseverything.net.

My suggestion would be to forget the positioning and use floats where needed for your layout.

hmmm... as you can tell, i don't know much about it... what are floats and where can i read about them?

Sticky: Using and Clearing Floats

tim

so.... floats work in myspace? because I tried adding one and it just showed up right below the about me section and not on the actual right of the page... are there any other placement attributes to be used as well as what do i do to have it fixed on the page?

The bottom link on that sticky will walk you through it step by step, but the basics go like this:

Floating an element will not do it by itself. If you didn't clear it, that's likely what's causing your problem.

After you have floated an element and what you want to wrap around it has, you clear the float. You can do that with <br /> with class brclear, with the following rules:

.brclear{clear:both; margin:0; padding:0; line-height:0;}

You can also specify overflow: auto; in the CSS rules for the block that contains the floated element, as an another method of doing it.

tim