Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Firefox Mac incorrectly rendering my website!

Firefox Mac incorrectly rendering my website!
Thread Tools
Goldfinger
Professional Poster
Join Date: Nov 2004
Location: Belgium
Status: Offline
Reply With Quote
Apr 13, 2010, 02:57 PM
 
Hi there,

I painstakingly designed my own website, I'm no webdeveloper. It validates and renders perfectly on Safari 4, IE8 and Opera. It also renders correctly on Firefox on Windows. But is does NOT on Firefox 3.6.3 on the mac! Everything is off by a few pixels.
It wa designed with absolute positioned divs.

Anybody know how or why this is happening. I mean, every browser including IE (!) renders it correctly except for Firefox on the Mac.

This is the website BENOITVERMEEREN - PHOTOGRAPHY

You can see the differences when looking at the white box, that fine line under "client login" and the form text boxes on the client login page.

iMac 20" C2D 2.16 | Acer Aspire One | Flickr
     
larkost
Mac Elite
Join Date: Oct 1999
Location: San Jose, Ca
Status: Offline
Reply With Quote
Apr 13, 2010, 11:41 PM
 
Welcome to the wonderful world of web development, where there are 1001 pitfalls, and nothing ever works everywhere.

I am really glad I got out of it.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Apr 14, 2010, 12:37 AM
 
GoldFinger: every browser has different CSS defaults. You can painstakingly try to tweak your site so that it looks the same in each browser, or use a CSS reset library to put them all on the same playing field. A CSS reset library will strip out all of the defaults so that you have to explicitly define them.

I personally like the YUI CSS reset library, I use it with all of my sites.
     
Goldfinger  (op)
Professional Poster
Join Date: Nov 2004
Location: Belgium
Status: Offline
Reply With Quote
Apr 14, 2010, 07:16 AM
 
Thanks besson, I'll look into that YUI CSS reset library.

I just though it was an error in my coding. What really surprises me is the difference between Firefox Mac and Firefox Win. Aren't they supposed to have the same engine ? I would expect IE to be a PITA but not Firefox!

It looks good enough on all browsers, it's just FF mac that's completely off.

thanks anyway!

iMac 20" C2D 2.16 | Acer Aspire One | Flickr
     
Oisín
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status: Offline
Reply With Quote
Apr 14, 2010, 11:33 AM
 
There does seem to be an error in your code on the client login page: you end a label tag for “Username”, but you don’t start it anywhere (and there’s no label at all for “Password”, which there should really be).

As for the oddness in Firefox on Mac, it has to do not with the positioning of elements, but with fonts. I just took a perfectly aligned screenshot of Safari’s rendering and Firefox’s rendering next to each other, and the elements that you say are out of place are actually the ones that are in place.

Safari (along with all other browsers, apparently) seems to have an ever-so-slightly shorter line height for Verdana than Firefox on OS X does. This means that the same amount of text, once it’s spanned a few lines, will take up a bit more vertical space in Firefox.

Since you’ve positioned pretty much every single thing on the page absolutely, that means that the further down you go (i.e., the more text the page has), the more out of line the elements that are absolutely positioned (and therefore do become placed at exactly the same spot in all browsers) will be from the text, which allots its own space on a per-line basis.

You might be able to work around this by specifically setting the line-height of your text elements in pixels, but really the better way to solve the issue would be not to use so much absolute positioning for everything. Positioning everything absolutely to the extent you have done here makes the page very unwieldy to change, too.
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Apr 14, 2010, 12:10 PM
 
There's some good ideas here.

nice site btw!
     
Goldfinger  (op)
Professional Poster
Join Date: Nov 2004
Location: Belgium
Status: Offline
Reply With Quote
Apr 14, 2010, 07:22 PM
 
Thanks for those suggestions Oisin. What you're saying about those fonts makes perfect sense. I'll look into that in the coming days.
The reason for using absolute positioning is just because that gave me, quickly, the look that I wanted. And seeing as I'm a complete newbie at designing webpages I took the easy road*. Relative positioning, for example, boggles my mind.

And, thx Andi*pandi! I really like the minimalstic look here (I went through 5 design before choosing this one!).

*this website is also part of a school assignment, where we need to develop an online portfolio. And it needs to be ready rather quickly. I may update that site later on using more "accepted" methods of designing a webpage". But, it works for now.

iMac 20" C2D 2.16 | Acer Aspire One | Flickr
     
Goldfinger  (op)
Professional Poster
Join Date: Nov 2004
Location: Belgium
Status: Offline
Reply With Quote
Apr 15, 2010, 06:07 PM
 
Just for future reference: the line height property did the trick! Thanks a lot Oisín! A quick and easy fix!

iMac 20" C2D 2.16 | Acer Aspire One | Flickr
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 04:49 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,