Log In · Register

 
Alignment different in browsers
henrybayuzick
post Jul 8 2009, 03:09 PM
Post #1


Member
**

Group: Member
Posts: 10
Joined: Oct 2008
Member No: 693,488
Hey guys,

I've been working on a myspace profile for a band, and I ran into a problem. In Firefox the code looks great, but in Safari the div is about 50 px off, or so. Can anyone help me get them both to display the same? Createblog has been a huge help the past few times, I hope this time isn't any different.

I have an iMac 24inch.

Thanks

Here's my code: (I use relative so that nothing moves around when you drag the size of the browser, or view it on a different computer, maybe this is poor pratice)
CODE
<style type="text/css">
body { background:url('images/bg.png') no-repeat top center; background-color: ffffff;}
table, tr, td { background-color: transparent; border: 0px; }
table.contactTable {display:none;}
div.profileWidth table {margin-bottom:1500px !important;}
table table div embed, table table div object {position:relative; top: -37; left: 23; z-index:9;}
</style>




<style type="text/css">

div.Table_01 {
position:relative;
left:-221px;
top:-2239px;
width:100%;
height:100%;
}

div.navarea_ {
position:absolute;
left:0px;
top:0px;
width:956px;
height:212px;
}

div.topbanner_ {
position:absolute;
left:0px;
top:212px;
width:956px;
height:475px;
}

div.templatecropped-03_ {
position:absolute;
left:0px;
top:687px;
width:2px;
height:403px;
}

div.cd_ {
position:absolute;
left:2px;
top:687px;
width:299px;
height:403px;
}

div.lowertopbanner_ {
position:absolute;
left:301px;
top:687px;
width:655px;
height:183px;
}

div.space1_ {
position:absolute;
left:301px;
top:870px;
width:153px;
height:55px;
}

div.addus_ {
position:absolute;
left:454px;
top:870px;
width:101px;
height:55px;
}

div.sendmessage_ {
position:absolute;
left:555px;
top:870px;
width:206px;
height:55px;
}

div.commentus_ {
position:absolute;
left:761px;
top:870px;
width:195px;
height:55px;
}

div.youtube_ {
position:absolute;
left:301px;
top:925px;
width:117px;
height:51px;
}

div.facebook_ {
position:absolute;
left:418px;
top:925px;
width:110px;
height:51px;
}

div.buzznet_ {
position:absolute;
left:528px;
top:925px;
width:115px;
height:51px;
}

div.purevolume_ {
position:absolute;
left:643px;
top:925px;
width:151px;
height:51px;
}

div.foe_ {
position:absolute;
left:794px;
top:925px;
width:97px;
height:51px;
}

div.bigcartel_ {
position:absolute;
left:891px;
top:925px;
width:65px;
height:51px;
}

div.everythingzenis_ {
position:absolute;
left:301px;
top:976px;
width:655px;
height:114px;
}

div.names_ {
position:absolute;
left:0px;
top:1090px;
width:956px;
height:50px;
}

div.pictures_ {
position:absolute;
left:0px;
top:1140px;
width:956px;
height:237px;
}

div.twitters_ {
position:absolute;
left:0px;
top:1377px;
width:956px;
height:177px;
}

div.followzach_ {
position:absolute;
left:0px;
top:1554px;
width:206px;
height:41px;
}

div.followvince_ {
position:absolute;
left:206px;
top:1554px;
width:179px;
height:41px;
}

div.followjosh_ {
position:absolute;
left:385px;
top:1554px;
width:178px;
height:41px;
}

div.followjon_ {
position:absolute;
left:563px;
top:1554px;
width:179px;
height:41px;
}

div.followjake_ {
position:absolute;
left:742px;
top:1554px;
width:214px;
height:41px;
}

div.space2_ {
position:absolute;
left:0px;
top:1595px;
width:956px;
height:42px;
}

div.everythingzen_ {
position:absolute;
left:0px;
top:1637px;
width:471px;
height:30px;
}

div.player_ {
position:absolute;
left:471px;
top:1637px;
width:482px;
height:354px;
}

div.templatecropped-28_ {
position:absolute;
left:953px;
top:1637px;
width:3px;
height:429px;
}

div.default_ {
position:absolute;
left:0px;
top:1667px;
width:471px;
height:324px;
}

div.url_ {
position:absolute;
left:0px;
top:1991px;
width:471px;
height:75px;
}

div.space4_ {
position:absolute;
left:471px;
top:1991px;
width:482px;
height:75px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (templatecropped.psd) -->
<div class="Table_01">
<div class="navarea_">
<img id="navarea" src="images/navarea.png" width="956" height="212" alt="" />
</div>
<div class="topbanner_">
<img id="topbanner" src="images/topbanner.png" width="956" height="475" alt="" />
</div>
<div class="templatecropped-03_">
<img id="templatecropped_03" src="images/templatecropped_03.png" width="2" height="403" alt="" />
</div>
<div class="cd_">
<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=320348150&s=143441">
<img id="cd" src="images/cd.png" width="299" height="403" border="0" alt="" /></a>
</div>
<div class="lowertopbanner_">
<img id="lowertopbanner" src="images/lowertopbanner.png" width="655" height="183" alt="" />
</div>
<div class="space1_">
<img id="space1" src="images/space1.png" width="153" height="55" alt="" />
</div>
<div class="addus_">
<a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=145603477">
<img id="addus" src="images/addus.png" width="101" height="55" border="0" alt="" /></a>
</div>
<div class="sendmessage_">
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=145603477">
<img id="sendmessage" src="images/sendmessage.png" width="206" height="55" border="0" alt="" /></a>
</div>
<div class="commentus_">
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=145603477">
<img id="commentus" src="images/commentus.png" width="195" height="55" border="0" alt="" /></a>
</div>
<div class="youtube_">
<a href="http://www.youtube.com/user/EZBand">
<img id="youtube" src="images/youtube.png" width="117" height="51" border="0" alt="" /></a>
</div>
<div class="facebook_">
<a href="http://www.facebook.com/pages/Everything-Zen/35600502061?ref=ts#/group.php?gid=15339575138&ref=ts">
<img id="facebook" src="images/facebook.png" width="110" height="51" border="0" alt="" /></a>
</div>
<div class="buzznet_">
<a href="http://everythingzenoh.buzznet.com/user/main/">
<img id="buzznet" src="images/buzznet.png" width="115" height="51" border="0" alt="" /></a>
</div>
<div class="purevolume_">
<a href="http://www.purevolume.com/everythingzen">
<img id="purevolume" src="images/purevolume.png" width="151" height="51" border="0" alt="" /></a>
</div>
<div class="foe_">
<a href="http://www.friendsorenemies.com/web/foe/users/everythingzenoh/">
<img id="foe" src="images/foe.png" width="97" height="51" border="0" alt="" /></a>
</div>
<div class="bigcartel_">
<a href="http://everythingzen.bigcartel.com/">
<img id="bigcartel" src="images/bigcartel.png" width="65" height="51" border="0" alt="" /></a>
</div>
<div class="everythingzenis_">
<img id="everythingzenis" src="images/everythingzenis.png" width="655" height="114" alt="" />
</div>
<div class="names_">
<img id="names" src="images/names.png" width="956" height="50" alt="" />
</div>
<div class="pictures_">
<img id="pictures" src="images/pictures.png" width="956" height="237" alt="" />
</div>
<div class="twitters_">
<img id="twitters" src="images/twitters.png" width="956" height="177" alt="" />
</div>
<div class="followzach_">
<a href="http://www.twitter.com/zachfromez ">
<img id="followzach" src="images/followzach.png" width="206" height="41" border="0" alt="" /></a>
</div>
<div class="followvince_">
<a href="http://www.twitter.com/vincefromez ">
<img id="followvince" src="images/followvince.png" width="179" height="41" border="0" alt="" /></a>
</div>
<div class="followjosh_">
<a href="http://www.twitter.com/joshfromez ">
<img id="followjosh" src="images/followjosh.png" width="178" height="41" border="0" alt="" /></a>
</div>
<div class="followjon_">
<a href="http://www.twitter.com/jonfromez ">
<img id="followjon" src="images/followjon.png" width="179" height="41" border="0" alt="" /></a>
</div>
<div class="followjake_">
<a href="http://www.twitter.com/jakefromez ">
<img id="followjake" src="images/followjake.png" width="214" height="41" border="0" alt="" /></a>
</div>
<div class="space2_">
<img id="space2" src="images/space2.png" width="956" height="42" alt="" />
</div>
<div class="everythingzen_">
<img id="everythingzen" src="images/everythingzen.png" width="471" height="30" alt="" />
</div>
<div class="player_">
<img id="player" src="images/player.png" width="482" height="354" alt="" />
</div>
<div class="templatecropped-28_">
<img id="templatecropped_28" src="images/templatecropped_28.png" width="3" height="429" alt="" />
</div>
<div class="default_">
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=145603477">
<img id="default" src="images/default.png" width="471" height="324" border="0" alt="" /></a>
</div>
<div class="url_">
<a href="http://www.myspace.com/everythingzen">
<img id="url" src="images/url.png" width="471" height="75" border="0" alt="" /></a>
</div>
<div class="space4_">
<img id="space4" src="images/space4.png" width="482" height="75" alt="" />
</div>
</div>



Reason for edit: Added codeboxes and thumbed images. - TJ
 
 
 Start new topic
Replies (1 - 2)
Mikeplyts
post Jul 8 2009, 09:52 PM
Post #2


Mel Blanc was allergic to carrots.
*******

Group: Official Designer
Posts: 6,371
Joined: Aug 2008
Member No: 676,291
Exactly which classes aren't aligning for you?

EDIT:

Also, can you provide full image URL's for the images used?
 
henrybayuzick
post Jul 9 2009, 10:06 AM
Post #3


Member
**

Group: Member
Posts: 10
Joined: Oct 2008
Member No: 693,488
Thanks for your reply. I am completely okay with absolute positioning but it always seems to differ from browser to browser. Can you guide me to a solution on how to position this div without it changing between browsers?

Thanks.

QUOTE(Mikeplyts @ Jul 8 2009, 10:52 PM) *
Exactly which classes aren't aligning for you?

EDIT:

Also, can you provide full image URL's for the images used?


They aren't up yet, how will this help you, because I can if it will help me get closer to the solution.
 
« Next Oldest · Myspace Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic