Safari & Firefox Website Rendering Issue (mac only)

[uKnowChinchilla]

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

 

[Eraserhead]

Very strange, what does it look like in Firebug?

 

[MKSinSA]

Try resizing your column

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.

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!

 

[uKnowChinchilla]

@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.

 

[Eraserhead]

@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??

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.

 

[MKSinSA]

@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.

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.

<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.

 

[uKnowChinchilla]

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.

<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.

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

 

[MKSinSA]

Mozilla looks great

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

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

 

[adamfishercox]

If you have to use it, align=top should be align="top"