what's with the different browsers? Options

[OCSpersonel]

How do you code a layout to look the same in all Internet browsers??? I built a myspace that looks fine in firefox, but nothing else. How do I fix that?

[synatribe]

for firefox, chrome and safari, it should not be any different but for IE 6 or 7 you have to add and underscore like this

in IE

CODE

.class{
_padding:xxpx;
}

while in
Firefox, Chrome, Safari, Opera

CODE

.class{
padding:xxpx;
}

will work just fine :]

[OCSpersonel]

heres my code:

CODE

<style>
object {position:relative; height:45px; width:420px; left:550; z-index:9;}
object {top:900px!important; margin-left:-400px!important;}
object object, td td td object {position:static; margin:auto!important;}
</style>

<style>
.userProfileURL {display:none;}
</style>

<style>
body {
font-family:arial, verdana, sans-serif;
font-size:62.5%;
background-color:ffffff;
}
.main{
background-color:ffffff;
width:960px;
height:900px;
position:absolute;
left:50%;
top:133px;
z-index:1;
margin-left:-480px;
}
.container {
background-color:cccccc;
width:800px;
height:100%;
margin-left:80px;
}
</style>



<style>
table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
table td table tr td.text table {visibility:hidden;}
table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
.comments{width: 500px; height: 440px !important; position: relative; left: 30; top: -2300px; overflow:scroll !important; overflow-x:hidden !important; z-index:4px;}
.blurbs .orangetext15 {display:none;}
</style>



<div class="NAV" style="position: relative; left:-130px; top:90px; width:850px; height:090px; overflow: auto; z-index: 4;"><center>

<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYyJmZyaWVuZElEPTIxNTY5NTQ4NCZNeVRva2VuPWNjMjhkOWE3LWMyYTktNDA2Zi05ZTgzLWI2O
I0NzI3ZTkwNw=="><img src="http://img140.imageshack.us/img140/5241/messagebutton.jpg" border="0" /></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0yMTU2OTU0ODQ="><img src="http://img140.imageshack.us/img140/6084/addbutton.jpg" border="0" /></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbHVja3liYXN0YXJkY28uY29tL2NhcnQv"><img src="http://img140.imageshack.us/img140/8855/storebutton.jpg" border="0" /></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWFkaXNvbmF2ZWRpYW1vbmRzLmNvbS8="><img src="http://img140.imageshack.us/img140/2770/madbutton.jpg" border="0" /></a>



</div>
<div class="content" style=" position:relative; left: -160px; top:-230px;">
<img src="http://img246.imageshack.us/img246/8053/contentj.jpg" />
</div>




<div class="silver" style="position: relative; left:235px; top:-1800px; width:600px; height:1500px; overflow: hidden; z-index:6;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="210" width="445">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/slides/photoslider.swf?u=215695484&aid=965525" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="culture=en-US" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" src="http://lads.myspace.com/slides/photoslider.swf?u=215695484&aid=965525" height="210" width="445" wmode="transparent" flashvars="culture=en-US" />
</object>..

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="210" width="445">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/slides/photoslider.swf?u=215695484&aid=965483" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="culture=en-US" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" src="http://lads.myspace.com/slides/photoslider.swf?u=215695484&aid=965483" height="210" width="445" wmode="transparent" flashvars="culture=en-US" />
</object>..

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="210" width="445">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/slides/photoslider.swf?u=215695484&aid=267027" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="culture=en-US" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" src="http://lads.myspace.com/slides/photoslider.swf?u=215695484&aid=267027" height="210" width="445" wmode="transparent" flashvars="culture=en-US" />
</object>..

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="210" width="445">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://lads.myspace.com/slides/photoslider.swf?u=215695484&aid=877086" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="culture=en-US" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="all" src="http://lads.myspace.com/slides/photoslider.swf?u=215695484&aid=877086" height="210" width="445" wmode="transparent" flashvars="culture=en-US" />
</object>..
</div>

in firefox on my mac the photosliders dont come up, in IE 7 the music player goes up about 20 pixels, in safari the photo sliders are super small and the music player moves and in IE 8, since its one big div with a couple of dives on top, the big div is off to the right by about 30 pixles.

am i doing something wrong? i know the flaws are minor but im trying to make the few myspaces i design flawless and professional looking

myspace.com/luckybastardco

[fixtatik]

this is making the slideshows not show up:

CODE

embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}

everything else is messed up because you're using relative positioning. relative positioning is fine on a regular website, but on myspace your HTML is nested within a table, so it's relative to the position of those tables.

instead, position your divs as such:

CODE

.divname { left:50%; margin-left:##px; position:absolute; top:##px; }

where margin-left:##px; is the negative of half the width of your div, if you want it in the exact center of the page.

[Mickey]

I closed and moved your other topic about positioning the Blogs table but here's the link just for reference.

[OCSpersonel]

so i understand this is probably like trying to teach a 5 year old trig when it comes to helping me, but i really appreciate it.

the code for my slide show things, i cant find it, is that what i need to put in the code?



and just out of curiosity, is there a professional coder i can take my myspace design to and he can code it? i can handle the design portion, but i need someone to either code it for me, or some one to consult me so i dont have to come back here with stupid questions and annoy you guys.

[fixtatik]

the "embed" code is on line 48 of your codes (near the bottom of your CSS).

the positioning is what you need to change. you're positioning your divs like this:

CODE

position: relative; left:-130px; top:90px;

that doesn't work properly on myspace because of where your divs start. on a blank HTML page, a div would start at an X position of 0 and a Y position of 0 (the top left of the page). on myspace, divs start at an X position of about 50% of your browser's width. but because different browsers have different ways of rendering table padding & line height, using relative positioning from the point where divs start on myspace makes them look differently in different browsers.

instead, all of your divs need to be positioned like this:

CODE

position:absolute; left:50%; top:##px; margin-left:##px;

like i said before, you'll need to change the ##px to put it where you want it.

as far as you designing and someone else coding, i do that, but it's not for free.

[miguelS]

Relative positioning is much more accurate than absolute positioning, assuming you establish a core first.
Absolute positioning should only really be used if one is positioning something close to the top/sides.

[fixtatik]

^ not on myspace. depending on which section you place HTML, it'll start in different places in different browsers.

[miguelS]

My test overlays say different.

[fixtatik]

i usually build layouts similar to how miguelS is describing, but i've noticed people get confused about how to do it when they're starting to learn. even if you were to use relative positioning within that "core," you'd still need to use absolute positioning to start it.

[tokyo-rose]

Topic Closed, and Moved to Myspace Resolved Topics. Please PM a moderator if you would like this reopened.