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

Discussion in 'Web Design and Development' started by M0bile, Mar 18, 2009.

  1. M0bile macrumors regular

    Joined:
    Jun 9, 2008
    #1
    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.
     
  2. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #2
    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.
     
  3. M0bile thread starter macrumors regular

    Joined:
    Jun 9, 2008
    #3
    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.

     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    I tried to validate just your CSS and it returned these errors:

    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
     
  5. M0bile thread starter macrumors regular

    Joined:
    Jun 9, 2008
    #5
    Thanks for the help. No offense taken and you're right- I wrote very little of this code. :rolleyes:
     

Share This Page