I'm looking for the best way to target css specifically for Mac Firefox (2.0 and up) and Mac Safari. In looking around I'm seeing various ways and some that are dated and I'd like to know what people see as the most efficient. I'm a couple pixels off for one nav bar and the clients are all on macs.
I usually use "Conditionnel Comments" to Correct IE , most of the times it's good enough to have no troubles with FF , opera and safari (for Windows ) ,now you even have chrome to test , unless the MAC Safari having difference is an old version . (Konqueror is sometimes surprising ). Opera and IE7 have a couple of bugs that seems to be similar (close to haslayout behaviors , zoom:1 for IE , and position:relative ; for opera can help , use only if needed of course) Else , tag:after {content'';} gives some very good results in opera , and i found out lately in Safari too , it forces sort of a reflow . To check if this would work , just go hover a link and see if it sets yor "nav" at the right position or size expected. ... these are just some hints , but they help to find fast a solution or reason if your css is already well-thought .
has your "nav" problem got to do with margin , does it dessappear if you set margin to zero ? ...
Does it have to do with the fonts used , resolution of the screen , If both macFF & mac Safari behave the same .... then a js checking the OS would maybe more efficient to serve extra rules ?
Honestly, just use JavaScript. If you are talking about some very minor issues, just use JavaScript to add a body class identifying the browser and os.
Thank you for your help...it's interesting, on tow people's Macs there is this slight glitch and on another no glitch...same browser/versions. And on http://www.browsrcamp.com/ it's glitch-free.
The reality is most issuers can be resolved without applying any hacks and simply using different css properties which are displayed correclty from browser to browser.
thank you...I think that that's a good thought but I also think that the reality is at this point in time that with all the various browsers, browser versions, and that in combination with various os's, etc, that the idea of one uniform system of coding is not a possibility at this point in time. Also, a matter of development time in terms of how much one would want to search for the perfect coding in order, for example in my situation here, to code for around 4-5 pixels. In this situation I can live with a hack or two. But I certainly understand what you're saying and I agree that correct coding certainly fixes most issues.
you really shouldn't need a hack. In my experience, both firefox and safari are most likely displaying it the same and correctly (although firefox may correct some bad markup).
Firstly run your code through validator.w3.org - it's amazing how many issues this will fix.
I use a PHP script for all of my CSS now a days. Check out http://www.conditional-css.com/. This allows you to write conditionals in your style sheet towards any browser version of any kind. It has made creating cross-browser valid CSS a breeze!