I need help with absolute positioning on MySpace

Live forum: http://forum.freeipodguide.com/viewtopic.php?t=68270

mnx12

16-08-2007 16:59:41

So for this profile
http//www.myspace.com/slcshows

I'm trying to get the banner and contact stuff that's at the top to position correctly. On Firefox, it looks perfect, but in IE, it's way off to the left and down. Here is the code, if you know what i'm doing wrong here, please help me out

[code136b5e3a9f9]
<style>
body div td td {height:150px; vertical-align:top;}
.ridurl==http://=http:///url td td, td.text div td td {height:150px;}
.katamariurl==http://=http:///url DIV generator {http://www.abrax.us/Katamari/ContentGen.php}
.katamariurl==http://=http:///url {adjust the TOP and MARGIN-LEFT to position it}
.Flashurl==http://=http:///url {width: 563px; height:auto; text-align:center;}
.Flashurl==http://=http:///url {position: absolute; left:50%; top:130px; margin-left: -280px;}
</style>
<div><img=" src="http:/" alt=""/img112.imageshack.us/img="112/5595/banner2wj8.jpg" border="0"><br><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0xNzQ2ODgyNDM=" border="0"><img src="http:/" alt=""/img159.imageshack.us/img="159/2056/01addtf7.jpg" border="0"></a><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD0xNzQ2ODgyNDM=" border="0"><img src="http:/" alt=""/img516.imageshack.us/img="516/9514/02messagete0.jpg" border="0"></a><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLmFkZFRvRmF2b3JpdGUmZnJpZW5kSUQ9MTc0Njg4MjQz" border="0"><img src="http:/" alt=""/img516.imageshack.us/img="516/3824/03favoritekw2.jpg" border="0"></a><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPTE3NDY4ODI0Mw==" border="0"><img src="http:/" alt=""/img159.imageshack.us/img159/5083/04blockqc0.jpg" border="0"></a></div>
[/code136b5e3a9f9]

EDIT The div should say [div class="flash"] but for some reason it keeps deleting that part on this thread....

samz465

16-08-2007 17:10:40

Lot's of "Image does not Exist"'s
You should check that out...

mnx12

16-08-2007 17:11:26

What do you mean?

Jams44

16-08-2007 18:25:29

try margin 0 auto 0 auto;

dmorris68

16-08-2007 19:21:49

Absolute positioning, like floating, takes the element out of the normal flow of the page. If you're not aware and prepared to deal with this, it can be daunting and lead to a lot of "shotgun" positioning to try to get things where they need to be. Unless you really know what you're doing and have a good understanding of HTML/CSS positioning and floating, it's probably best to avoid.

[quotea9dfe1b8cc="Jams44"]try margin 0 auto 0 auto;[/quotea9dfe1b8cc]
Unfortunately that (proper) method of centering is broken in IE6 (Quirks mode) and all lower version of IE. I think IE7 fixed it, but not sure. To get proper centering on IE too, you just have to include text-aligncenter, which is also broken in that it's not supposed to center block level elements, but in this case you can take advantage of the bug to get what you want. The only caveat is that everything within the container will be centered on all browsers. If you don't want that, you'll have to create a sub-container and then style it to text-alignleft.

mnx12

16-08-2007 20:12:19

I think I found a workaround! I used this (the second post that's by Phantasm)
http//collect.myspace.com/index.cfm?fuseaction=messageboard.viewThread&entryID=30069092&groupID=105054707

So this is the new code

[code145a5f1a183]
<style>
body div td td {height:150px; vertical-align:top;}
.ridurl==http://=http:///url td td, td.text div td td {height:150px;}
.katamariurl==http://=http:///url DIV generator {http://www.abrax.us/Katamari/ContentGen.php}
.katamariurl==http://=http:///url {adjust the TOP and MARGIN-LEFT to position it}
.Flashurl==http://=http:///url {
width: 563px;
height: auto;
text-align:center;
position: absolute;
left:50%;
top: 130px !important;
top: -125px;
margin-left: -280px !important;
margin-left: -120px;
}
</style>
<div>ALL THE BANNER/CONTACT CODE HERE</div>
[/code145a5f1a183]


So will everyone check and make sure it looks like it should in all your browsers?