kiasta
12-19-2007, 12:58 PM
Ok yes I know this is a myspace layout...but it is still a CSS problem. Everything is almost perfect except 2 problems.
1:) The layout is positioned a little too high in IE (as well as the buttons I'm using is a little bit too far to the right).
2:) The spaces between the boxes (you will notice the difference in IE and FF) are not spaced apart like they should be in FF.
<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=228707545">Page</a>
<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,.btext,.redtext,.red btext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
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;}
table, tr, td{ background-color: transparent; border: 0px; }
body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}
body div table td form{display:none!important;}
body{background-color:5b7d7e; background-image:url(http://i113.photobucket.com/albums/n206/kiasta/pagebak.jpg); background-position:top left; background-repeat:no-repeat;}
.toplinks{position:absolute; left:50%; top:128px; margin-left:-400px; z-index:0; height:40px; width:623px; background-color:c8d4d4; border:1px solid black}
.headline{position:absolute; left:50%; top:170px; margin-left:-400px; z-index:0; height:150px; width:623px; background-image:url(http://i113.photobucket.com/albums/n206/kiasta/header.jpg); background-repeat:repeat-x; border:1px solid black}
.cb1{position:absolute; left:50%; top:322px; margin-left:-400px; z-index:0; height:150px; width:623px; background-color:c8d4d4; border:1px solid black}
.cb2{position:absolute; left:50%; top:474px; margin-left:-400px; z-index:0; height:288px; width:310px; background-color:c8d4d4; border:1px solid black}
.cb3{position:absolute; left:50%; top:474px; margin-left:-88px; z-index:0; height:288px; width:311px; background-color:c8d4d4; border:1px solid black}
.sb1{position:absolute; left:50%; top:128px; margin-left:225px; z-index:0; height:210px; width:210px; background-color:c8d4d4; border:1px solid black}
.sb2{position:absolute; left:50%; top:340px; margin-left:225px; z-index:0; height:210px; width:210px; background-color:c8d4d4; border:1px solid black}
.sb3{position:absolute; left:50%; top:552px; margin-left:225px; z-index:0; height:210px; width:210px; background-color:c8d4d4; border:1px solid black}
.footer{position:absolute; left:50%; top:764px; margin-left:-400px; z-index:0; height:40px; width:835px; background-color:c8d4d4; border:1px solid black}
a.homebutton{position: absolute; left: 50%; top: 133px; margin-left: -395px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/home.png") 0 0 no-repeat; text-decoration: none;}
a:hover.homebutton{background-position: -100px 0;}
a.addmebutton{position: absolute; left: 50%; top: 133px; margin-left: -292px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/addme.png") 0 0 no-repeat; text-decoration: none;}
a:hover.addmebutton{background-position: -100px 0;}
a.messagebutton{position: absolute; left: 50%; top: 133px; margin-left: -189px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/message.png") 0 0 no-repeat; text-decoration: none;}
a:hover.messagebutton{background-position: -100px 0;}
a.blogbutton{position: absolute; left: 50%; top: 133px; margin-left: -86px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/blog.png") 0 0 no-repeat; text-decoration: none;}
a:hover.blogbutton{background-position: -100px 0;}
a.commentsbutton{position: absolute; left: 50%; top: 133px; margin-left: 17px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/comments.png") 0 0 no-repeat; text-decoration: none;}
a:hover.commentsbutton{background-position: -100px 0;}
a.friendsbutton{position: absolute; left: 50%; top: 133px; margin-left: 120px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/friends.png") 0 0 no-repeat; text-decoration: none;}
a:hover.friendsbutton{background-position: -100px 0;}
</style>
<div class="toplinks">
</div>
<div class="headline">
</div>
<div class="cb1">
</div>
<div class="cb2">
</div>
<div class="cb3">
</div>
<div class="sb1">
</div>
<div class="sb2">
</div>
<div class="sb3">
</div>
<div class="footer">
</div>
<a class="homebutton" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy"></a>
<a class="addmebutton" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD00MzI1NDk3OSZNeVRva2VuPTYwMDczYWY1LWU5Mjkt NGM3YS1iMzU3LTNmMWI2ZGEwYmJmYg=="></a>
<a class="messagebutton" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD00 MzI1NDk3OSZNeVRva2VuPTYwMDczYWY1LWU5MjktNGM3YS1iMzU3LTNmMWI2ZGEwYmJmYg=="></a>
<a class="blogbutton" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9NDMyNTQ5Nzk="></a>
<a class="commentsbutton" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD00MzI1NDk3OQ=="></a>
<a class="friendsbutton" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9Nb2R1bGVzL1ZpZXdGcmllbmRzL0ZyaWVuZHNWaWV3LmFzcHg/ZnJpZW5kSUQ9NDMyNTQ5Nzk="></a>
Pretty much the first part of the code is to coverup most of everything, and also it is not complete. If you can help then I would be greatful thanks.
1:) The layout is positioned a little too high in IE (as well as the buttons I'm using is a little bit too far to the right).
2:) The spaces between the boxes (you will notice the difference in IE and FF) are not spaced apart like they should be in FF.
<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=228707545">Page</a>
<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,.btext,.redtext,.red btext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
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;}
table, tr, td{ background-color: transparent; border: 0px; }
body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}
body div table td form{display:none!important;}
body{background-color:5b7d7e; background-image:url(http://i113.photobucket.com/albums/n206/kiasta/pagebak.jpg); background-position:top left; background-repeat:no-repeat;}
.toplinks{position:absolute; left:50%; top:128px; margin-left:-400px; z-index:0; height:40px; width:623px; background-color:c8d4d4; border:1px solid black}
.headline{position:absolute; left:50%; top:170px; margin-left:-400px; z-index:0; height:150px; width:623px; background-image:url(http://i113.photobucket.com/albums/n206/kiasta/header.jpg); background-repeat:repeat-x; border:1px solid black}
.cb1{position:absolute; left:50%; top:322px; margin-left:-400px; z-index:0; height:150px; width:623px; background-color:c8d4d4; border:1px solid black}
.cb2{position:absolute; left:50%; top:474px; margin-left:-400px; z-index:0; height:288px; width:310px; background-color:c8d4d4; border:1px solid black}
.cb3{position:absolute; left:50%; top:474px; margin-left:-88px; z-index:0; height:288px; width:311px; background-color:c8d4d4; border:1px solid black}
.sb1{position:absolute; left:50%; top:128px; margin-left:225px; z-index:0; height:210px; width:210px; background-color:c8d4d4; border:1px solid black}
.sb2{position:absolute; left:50%; top:340px; margin-left:225px; z-index:0; height:210px; width:210px; background-color:c8d4d4; border:1px solid black}
.sb3{position:absolute; left:50%; top:552px; margin-left:225px; z-index:0; height:210px; width:210px; background-color:c8d4d4; border:1px solid black}
.footer{position:absolute; left:50%; top:764px; margin-left:-400px; z-index:0; height:40px; width:835px; background-color:c8d4d4; border:1px solid black}
a.homebutton{position: absolute; left: 50%; top: 133px; margin-left: -395px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/home.png") 0 0 no-repeat; text-decoration: none;}
a:hover.homebutton{background-position: -100px 0;}
a.addmebutton{position: absolute; left: 50%; top: 133px; margin-left: -292px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/addme.png") 0 0 no-repeat; text-decoration: none;}
a:hover.addmebutton{background-position: -100px 0;}
a.messagebutton{position: absolute; left: 50%; top: 133px; margin-left: -189px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/message.png") 0 0 no-repeat; text-decoration: none;}
a:hover.messagebutton{background-position: -100px 0;}
a.blogbutton{position: absolute; left: 50%; top: 133px; margin-left: -86px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/blog.png") 0 0 no-repeat; text-decoration: none;}
a:hover.blogbutton{background-position: -100px 0;}
a.commentsbutton{position: absolute; left: 50%; top: 133px; margin-left: 17px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/comments.png") 0 0 no-repeat; text-decoration: none;}
a:hover.commentsbutton{background-position: -100px 0;}
a.friendsbutton{position: absolute; left: 50%; top: 133px; margin-left: 120px; display: block; width: 100px; height: 32px; background: url("http://i113.photobucket.com/albums/n206/kiasta/friends.png") 0 0 no-repeat; text-decoration: none;}
a:hover.friendsbutton{background-position: -100px 0;}
</style>
<div class="toplinks">
</div>
<div class="headline">
</div>
<div class="cb1">
</div>
<div class="cb2">
</div>
<div class="cb3">
</div>
<div class="sb1">
</div>
<div class="sb2">
</div>
<div class="sb3">
</div>
<div class="footer">
</div>
<a class="homebutton" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy"></a>
<a class="addmebutton" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD00MzI1NDk3OSZNeVRva2VuPTYwMDczYWY1LWU5Mjkt NGM3YS1iMzU3LTNmMWI2ZGEwYmJmYg=="></a>
<a class="messagebutton" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD00 MzI1NDk3OSZNeVRva2VuPTYwMDczYWY1LWU5MjktNGM3YS1iMzU3LTNmMWI2ZGEwYmJmYg=="></a>
<a class="blogbutton" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9NDMyNTQ5Nzk="></a>
<a class="commentsbutton" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD00MzI1NDk3OQ=="></a>
<a class="friendsbutton" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9Nb2R1bGVzL1ZpZXdGcmllbmRzL0ZyaWVuZHNWaWV3LmFzcHg/ZnJpZW5kSUQ9NDMyNTQ5Nzk="></a>
Pretty much the first part of the code is to coverup most of everything, and also it is not complete. If you can help then I would be greatful thanks.