I need help with absolute positioning on MySpace

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


16-08-2007 16:59:41

So for this profile

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

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;}
<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>

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


16-08-2007 17:10:40

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


16-08-2007 17:11:26

What do you mean?


16-08-2007 18:25:29

try margin 0 auto 0 auto;


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.


16-08-2007 20:12:19

I think I found a workaround! I used this (the second post that's by Phantasm)

So this is the new code

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;
position: absolute;
top: 130px !important;
top: -125px;
margin-left: -280px !important;
margin-left: -120px;

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