|
|
Firefox Mac incorrectly rendering my website!
|
|
|
|
Professional Poster
Join Date: Nov 2004
Location: Belgium
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 1999
Location: San Jose, Ca
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Nov 2004
Location: Belgium
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status:
Offline
|
|
There's some good ideas here.
nice site btw!
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Nov 2004
Location: Belgium
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Nov 2004
Location: Belgium
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|