myspace + css = just shoot me

August 13, 2007 10:39 PM

Web designers: help! My poor CSS skills are driving me nuts.

Ok, this is why I did not want to make a myspace thing, because I knew this would happen. I allowed myself to be convinced, though. Now, I can't rest until it looks the way I want, even though the html generated by myspace is a total trainwreck. No, seriously. It's horrible.

Problem: I want the main content table to not center on the page. I want it where I want it. I have it working in Firefox and Safari just fine. IE is being difficult.

Gist of the question, essentially I have
[body]
[some other stuff]
[table ... align="center"]
etc

to work with. IE will not let me horizontally position that table anywhere other than the center, no matter what I do (it seems like).

Any suggestions? If it would help, I'll make the page viewable, if you promise not to make fun. My obsessive streak will not let this go, and I'm stuck at the moment.

posted by ctmf to Computers & Internet (16 answers total)

Response by poster: Ok, it's at www.myspace.com/[my mefi username]
be gentle, I'm new at this.
posted by ctmf at 10:42 PM on August 13, 2007

If you can use css, try this and replace the 0px with whatever values you need.


< div id="css" position:relative; left:0px; top:0px>

content

< /div>
posted by alse at 11:11 PM on August 13, 2007

correction:
< div id="css" position:relative; left:0px; top:0px> content < /div>
posted by alse at 11:13 PM on August 13, 2007

< div id="css" s t y l e=quote position:relative; left:0px; top:0px unquote> content < /div>

remove spaces from style and add quotes where it says
posted by alse at 11:19 PM on August 13, 2007

Response by poster: CSS is all I get, zen garden-style, only with the html coded by someone who didn't get the concept. I can't change the html. Also, there are some challenging additional restrictions, like not being able to use the # or \ character, for instance.

I thought of the relative positioning, and at first it sounds like it would work, but the problem is: the original position is based on the browser width. Since the table is centered, it could be anywhere, so a hard coded offset will not always (or even sometimes) get me where I want to go.

I think I need to override that align=center on the table, and I can't figure out how to do it.

I also tried that-table:before {content: '<div class="... } to try to generate an element I could get a handle on and position, but no dice. It didn't show up in the html.
posted by ctmf at 11:29 PM on August 13, 2007

on second thought, I don't think myspace will allow you to do what you want.. give position:absolute a try
posted by alse at 11:46 PM on August 13, 2007

It's not your poor CSS skills, it's all about MySpace being one of the worst-built sites around.

A combination of float:left and margin:0 might override the table alignment and push it left in all major browsers (put clear:both on the next element to clear the float), but it may depend upon what else is going on in the page.

(If you haven't already read Mike Davidson's article it's worth a look)
posted by malevolent at 12:03 AM on August 14, 2007

Have you tried the !important tag? the rules of the cascade define the inline style as definitive, but playing with the !important tag might do something..
posted by troybob at 12:03 AM on August 14, 2007

like:

table { position: relative !important; left: 0px !important; }
posted by troybob at 12:15 AM on August 14, 2007

yeah, sounds like position: absolute is what you want here.

Just try this..

< div position: absolute; top: 0px; left: 0px;>
CONTENT GOES HERE
< / div>

(remove spaces where necessary, of course)

You don't need to give the div an ID or a class, you can write styles inline.

Optionally, you can wrap the whole thing in a div with a custom class like < div username> and then in the CSS, you could write..

div.username {
position: absolute;
top: 0px;
left: 0px;
}
posted by revmitcz at 1:16 AM on August 14, 2007

MeFi's content filtering screwed that last sentence up. I was trying say..

< div username>

(remove spaces, again)
posted by revmitcz at 1:17 AM on August 14, 2007

grr.. just put the word "class" between the div and the username.
posted by revmitcz at 1:17 AM on August 14, 2007

revmitcz, the problem is that the HTML is not under ctmf's control; only the css is.
posted by flabdablet at 3:13 AM on August 14, 2007

I'm not sure if this is going to work as I can't preview it in IE...

body.bodyContent {position: relative; left: 0; top: 0; width: 1025px;}

I reckoned that the table that is aligned center that you are talking about is contained within bodyContent - so if you set a width then it should center in that?
posted by twistedonion at 5:52 AM on August 14, 2007

Looks like myspace wraps their whole page-wrapping table (TABLES!! AHHH!) in a center-aligned div. So, you'll need to attack that div.

Try this in your CSS :
body div { text-align: left; position: absolute; top: 0px; left: 0px; }

body div table { text-align: left; position: absolute; top: 0px; left: 0px; }

That basically says "the div that comes after the body tag should do this... and the table that comes after the div that comes after the body tag should do this..."
posted by revmitcz at 1:00 PM on August 14, 2007

When I had a MySpace page (long deleted for link to real page), I used the html/css as provided here, which seems to just provide an opaque layer over the actual page, on which you can do whatever you want.

Maybe checking out what he's done could help?
posted by timepiece at 7:38 PM on August 15, 2007