Safari & Firefox Website Rendering Issue (mac only)

Discussion in 'Web Design and Development' started by uKnowChinchilla, Aug 20, 2009.

  1. uKnowChinchilla macrumors newbie

    Joined:
    Aug 19, 2009
    #1
    Hello everyone,

    I have currently been working numerous hours trying to figure out a simple yet frustrating issue on a website. The site looks perfectly fine on the browsers for PC (Firefox, Internet Explorer and Safari). Yet when it comes to the browsers on a Mac, there is a text issue. Everything on the mac browsers look fine except for the text in the center. It seems that a huge gap is left in the center, to the right hand side of the film strip rating. I would appreciate any assistance on what can be done to resolve the issue. Below is the link to the site and pictures for reference. Thank You!

    Website:
    http://www.mindbending.tv/gijoeriseofcobra.htm

    Mac Website Render (safari)
    http://95.233.213.85/safaritest/1250750658-full.jpg

    PC Website Render (firefox)
    http://api.browsershots.org/png/original/94/940dee950db2930cad6fa5946ac13783.png
     
  2. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #2
    Very strange, what does it look like in Firebug?
     
  3. MKSinSA macrumors regular

    MKSinSA

    Joined:
    Aug 1, 2009
    Location:
    Alamo City, Lone Star State
    #3
    Try resizing your column

    on the right. It seems to be just a hair wide and is pushing the graphic on top of it. Or, make the film smaller, but I'm not sure it can take much more shrinkage.

    Cheers! :cool:
     
  4. uKnowChinchilla thread starter macrumors newbie

    Joined:
    Aug 19, 2009
    #4
    @Eraserhead: Very strange indeed and it has been bugging me for days on! This is the first time using Firebug and I am unsure of what you would like to me try out with Firebug. Perhaps seeing the site on Firebug from a mac computer through firefox??

    @MKSinSA: It seems that the I have figured out how to make it work correctly on Safari (mac) but then it distorts the film image drastically on a number of PC browsers. Here are the comparisons:

    Original Link:
    http://mindbending.tv/slumdogmill.htm

    Mac Website Render (safari)
    http://95.233.213.85/safaritest/1250786110-full.png

    PC Website Render (firefox)
    http://www.mindbending.tv/images/mozillarenderpc.JPG

    Based on me testing a number of things out. Shifting the cells, with the movie stills in the bottom of the page, downward creates a gap in the text. Now if I move the cells upward, this fixes the text issue on safari but then messes around with the film strip image on pc browsers.
     
  5. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #5
    Firebug allows you to see where the elements are and if there are some rogue margins causing the problem. It also lets you edit the CSS live so you can see what is wrong with it.
     
  6. MKSinSA macrumors regular

    MKSinSA

    Joined:
    Aug 1, 2009
    Location:
    Alamo City, Lone Star State
    #6
    It looked great on the Mac and now is much better over on my PC this time. I think you may need to shift the image up inside its cell. Insert the highlighted part and see what it does for you.
    Code:
    <td><img name="review1_r8_c4" src="reviews/review_details/[I][COLOR="Red"]rating-4.jpg[/COLOR]" [/I]
    width="68" height="67" [B][COLOR="red"]align=top[/COLOR][/B] border="0" id="review1_r8_c4" alt="" /></td>
    Really hope that helps.
     
  7. uKnowChinchilla thread starter macrumors newbie

    Joined:
    Aug 19, 2009
    #7
    I felt like a kid as soon as I hit the preview button only to see that it applied no changes to site :(. It still continues to distort the image from my end. Thanks for the attempt though, I may just have to bite the bullet for this page and leave it as is. As for your PC MKSinSA, does the site load well on both mozilla and internet explorer?

    Here is the page with the align=top code included:
    http://mindbending.tv/slumdogmillalign.htm
     
  8. MKSinSA macrumors regular

    MKSinSA

    Joined:
    Aug 1, 2009
    Location:
    Alamo City, Lone Star State
    #8
    Mozilla looks great

    and even shows the box where you want it. In IE, the black fill sort of pyramids with blue at the top. I'm not sure if that's because of all the plug-ins I have going or not, so I just turned off the CSS to see the basic layout.

    Really sorry that didn't do it for you. I'll play around with it at some point for future reference and all. Will post if I discover anything.

    Good luck on the site, though! Good review ;)
     
  9. adamfishercox macrumors 6502

    Joined:
    Aug 15, 2007
    #9
    If you have to use it, align=top should be align="top"
     

Share This Page