Safari vs. Firefox CSS - Layout Help Needed [Updated With Code]

[M0bile]

I'm trying to make a MySpace layout for my music MySpace page. I have it all done and it looks great... on Firefox (Mac and PC). In Safari the alignments/placements of my .div's are wrong. I was wondering if anyone could please help me on how to correct this.

http://www.myspace.com/briansmocksmusic

As you can see in Safari, somewhere along the way the .div's on the left side of my page become misaligned/misplaced. The picture to the left of the music player overlaps onto the contact table. The "Free Promo Mixes" is supposed to be covering the MySpace URL box. Instead, it appears under it and overlaps onto the comments. In Firefox none of this happens (Mac and PC).

Any help would be appreciated.

 

[miles01110]

A good place to start is by going to the HTML Validator service and entering your html (from 'View Source'). Your page has 320 errors (although it's probably less- some errors cascade). Try fixing those first.

 

[M0bile]

A good place to start is by going to the HTML Validator service and entering your html (from 'View Source'). Your page has 320 errors (although it's probably less- some errors cascade). Try fixing those first.

Thanks for the tip. Unfortunately, 99% of those are not part of my layout code. They are part of the MySpace framework. Here is the specific code I want to fix.

<style type="text/css">
body {
background-color: rgb(255,255,255);
background-image: url(http://img.photobucket.com/albums/v354/spyjeenyusbrian/bg.png);
background-position: center center;
margin-top: 245;
background-repeat: repeat-y;
background-attachment: fixed;
}
table, tr, td {
background-color: transparent;
border: 0px;
}
table table {
border: 0px;
}
table table table table{
border:0px;
}
table table table {
border-width: 1px;
border-color: rgb(102,102,102);
border-style: solid;
background-color: transparent;
}
table table table td {
background-color: transparent;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
-khtml-opacity:1;
}
table table table table td {
filter:none;
}</style><style type="text/css">
body, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12 {
font-family: Verdana;
font-size: 12px;
color: rgb(0,0,0);
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.nametext {
padding: 5px;
font-family: Verdana;
font-size: 12px;
color: rgb(102, 153, 204);
font-weight: bold;
font-style: normal;
text-decoration: none;
display: block;
}
.whitetext12, .orangetext15 {
font-family: Verdana;
font-size: 12px;
color: rgb(102,153,204);
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.man:link, a.man:active, a.man:visited, a.man:hover, a, a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.text:link, a.text:active, a.text:visited, a.text:hover, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited, a.redlink:hover {
color: rgb(0,51,153);
font-weight: bold;
font-style: normal;
text-decoration: none;
}
a.navbar:hover, a.man:hover, a:hover {
color: rgb(0, 51, 153);
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.badge {
position: absolute;
left: 1px;
top: 1px;
}

.topbanner {
top: 0;
left: 50%;
margin-left: -400px;
width: 800px;
height: 245px;
position: absolute;
}

.temphead {
position: absolute;
left: 50%;
top: 419px;
width: 800px;
z-index: 1;
margin-left: -400px;
}

.side {
position: absolute;
left: 50%;
top: 491px;
width: 346px;
z-index: 1;
margin-left: -400px;
}

.promo {
position: absolute;
left: 50%;
top: 993px;
width: 302px;
z-index: 1;
margin-left: -376px;
}

.march {
position: absolute;
left: 50%;
top: 1027px;
width: 302px;
z-index: 1;
margin-left: -376px;
}

.nov {
position: absolute;
left: 50%;
top: 1337px;
width: 302px;
z-index: 1;
margin-left: -376px;
}

.june {
position: absolute;
left: 50%;
top: 1647px;
width: 302px;
z-index: 1;
margin-left: -376px;
}
</style>
<div class="topbanner">
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm1lZGlhZmlyZS5jb20vP3cyemF5aGVoemRq"><img src="http://img.photobucket.com/albums/v354/spyjeenyusbrian/top.gif" border="0"></a></div>
<div class="temphead"><span></span></div>
<div style="width: 800px; height: 72px; position: absolute; margin-left: -400px; _margin-left: -400px; left: 50%; top: 419px;"><img src="http://img.photobucket.com/albums/v354/spyjeenyusbrian/header.png" width="800" height="72" alt=""></div>
<div class="side"><span></span></div>
<div style="width: 346px; height: 310px; position: absolute; margin-left: -400px; _margin-left: -400px; left: 50%; top: 491px;"><img src="http://img.photobucket.com/albums/v354/spyjeenyusbrian/side03.png" width="346" height="310" alt=""></div>
<div class="promo"><span></span></div>
<div style="width: 302px; height: 966px; position: absolute; margin-left: -376px; _margin-left: -376px; left: 50%; top: 993px;"><img src="http://img.photobucket.com/albums/v354/spyjeenyusbrian/promodlhead01.png" width="302" height="966" alt=""></div>
<div class="march"><span></span></div>
<div style="width: 302px; height: 302px; position: absolute; margin-left: -376px; _margin-left: -376px; left: 50%; top: 1027px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm1lZGlhZmlyZS5jb20vP3cyemF5aGVoemRq"><img src="http://img.photobucket.com/albums/v354/spyjeenyusbrian/march09dl.png" width="302" height="302" alt="" border="0"></a></div>
<div class="nov"><span></span></div>
<div style="width: 302px; height: 302px; position: absolute; margin-left: -376px; _margin-left: -376px; left: 50%; top: 1337px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm1lZGlhZmlyZS5jb20vP3FuejR1eXlnbXd0"><img src="http://img.photobucket.com/albums/v354/spyjeenyusbrian/nov08dl.png" width="302" height="302" alt="" border="0"></a></div>
<div class="june"><span></span></div>
<div style="width: 302px; height: 302px; position: absolute; margin-left: -376px; _margin-left: -376px; left: 50%; top: 1647px;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm1lZGlhZmlyZS5jb20vPzNqbW5lemVkandt"><img src="http://img.photobucket.com/albums/v354/spyjeenyusbrian/june08dl.png" width="302" height="302" alt="" border="0"></a></div>

 

[SrWebDeveloper]

I tried to validate just your CSS and it returned these errors:

6 body Value Error : margin-top only 0 can be a length. You must put a unit after your number : 245 28 table table table td Parse Error opacity=100) 29 table table table td Property -moz-opacity doesn't exist : 1 30 table table table td Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 1 31 table table table td Property -khtml-opacity doesn't exist : 1 34 table table table table td Property filter doesn't exist : none

That first one is very important, the others not so as they regard opacity for different browsers. So fix that margin property in the body selector by adding on the end "px" after the 245 before doing anything else.

Now for a comment which I hope you don't take personally, but I feel obligated to say since this is a teaching forum:

You've got tables involved in layout other than just tabular data. You've got tons of inline CSS (i.e. "style" attribute added to HTML tags) instead of separating content from style and using only a stylesheet and div's and span's. Nearly everything is absolute positioned, but I've never seen so many negative numbers in all my life, and the inline styling overrides the directives in your style tag at the top of your HTML. Combined with 320 errors in the HTML itself, there is a good chance anyone who tries to help you will be LOST in your code. Your code needs an entire re-write if you ask me, CSS and HTML. All that on top of styles in CSS3 which are not cross browser supported and other styles that hack the 2.1 CSS. What a freakin' mess and a lesson to those following this topic - PLEASE DON'T CODE THIS WAY.

Note: I understand you didn't write all the code, I am not delegating any blame, just pointing out the technical reality. NOTHING PERSONAL.

Sorry for the brutal truth, I'm sure someone here might be willing to dive into the spaghetti and try to work out the issues for you. I don't have the time, but if you find nobody willing to dive in, you'll know why. I seriously wish you the best of luck and hope it all works out, honest. Just because I'm being negative does not mean there isn't a solution at hand. Just do not expect cross browser compatibility to be easily resolved when 326 combined CSS/HTML errors exist on the site. But here's hoping!

-jim

 

[M0bile]

Thanks for the help. No offense taken and you're right- I wrote very little of this code.