I've got a website that I've just uploaded onto the interwebs, and it's displaying differently using Firefox 3.0.1 on Ubuntu and WinXP.
Two things I've noticed on Ubuntu:
The favicon is missing
The background color isn't displaying (it's set in the stylesheet)
What have I done wrong? The CSS file is being fetched under Ubuntu, so why isn't it applying all of the stylesheet, just the bits it likes? And why isn't the favicon displaying? Are they the same problem?
The answer on the background color: invalid HTML. But I'd love for someone to explain why it works under Windows and not Ubuntu.
The answer on favicon: previously, there was no favicon. The browser cached the lack of favicon. Clear the Firefox cache, and all is well.
I would first suggesting getting you html and css code validated. If there are any errors in your markup, these can cause errors in the rendering.
CSS Validator
HTML Validator
I've also run into differences between FF3 on WinXP and FF3 on OS X (mostly with CSS positioning). The CSS and HTML both validated properly, but I was never able to figure out why there was this difference. I would think that the rendering engine would be the same, but apparently there are at least a few subtle differences.
I agree.. there are subtle differences between the two operating systems. Part of this is just font sizes and how line height and letter spacing is determined. So much of page flow is based on these whitespace elements interact with other page elements.
i believe this is a font issue and a browser / OS issue.
we know that different firefox versions are dependent on the OS - there are some firefox extensions available for Linux, some firefox extensions for windows are available.
it's the font I guess.
Try to download mtts core fonts (microsoft true type ) which includes all the windows fonts so that firefox can display the fonts you specified in the css.
also you could check that you use fonts which are available on both platforms. Otherwise, I suggest rechecking and revalidating your code.
The other issue could be the screen resolution. It might be okay in windows with your high resolution but not with the low resolution ubuntu version.
Almost too obvious to say, but are they both "Firefox 3.01"? One isn't, for instance, Firefox 3.01 revision 3 update 6 service pack 9 and the other, well, you get the picture.
Even if they were both the very latest Firefox for that platform, doesn't mean they're exactly the same thing.
To see what's different, enter about:config in the address bar in Firefox in both Linux and Windows, press Enter, and compare the output
Ubuntu (I believe) apply their own patches to Firefox, so maybe this cause. Having said that, I thought that the patches were only for minor, GUI-type changes.
Related
I'm having a problem with a Wordpress based site I'm building on: In Chrome, on Windows 7, the body text on the sites' homepage is set to display as a Google Font. However the last line of the text is displaying as the default sans-serif font.
I have thought about asking about this on Wordpress.org but as the problem is confined to one browser on one OS (albeit the most commonly used browser on the most commonly used OS, natch) thought better to ask here. Have been looking all day and not seen anyone else have the same problem.
It's the latest version of Chrome and there is no problem in IE, Firefox, Opera etc. No problems (as yet...) on any other platforms at all.
There don't appear to be any problems with any other Google Fonts used in the site.
The site is currently hosted at http://best.videofeet.com
Upon inspection of the source there is no apparent reason why it would render like this.
I'm stumped.
Here's a link to an image of the problem (From VirtualBox on Mac - the only means I have available to me to replicate the bug as described by the client): http://imgur.com/XdJlCbc
OK, I'll take a stab at answering this now I've had a tinker. It looks like Josefin Sans does not have a glyph for ellipsis (…), so Chrome is swapping out that line. There are other people experiencing this with other Google fonts:
https://code.google.com/p/googlefontdirectory/issues/detail?id=204
http://wordpress.org/support/topic/a-problem-with-ellipsis-the-google-font-story
The lack of ellipsis can be tested here
Either swap the ellipsis for three periods and risk the wrath of typophiles, or change the font I'm afraid.
Before and after image showing the paragraph tag with the ellipsis removed in developer tools here:
http://i.imgur.com/RmQwlaa.jpg
This might be a stupid question, but I have a scenario where I fixed someone's webpage, and it is looking good on all major web browsers on my Windows machine. However, when I uploaded the website to Adobe BrowserLab, and when I looked at Safari and Firefox on a OS X, the footer is a bit off from Safari and FireFox on a Windows operating system.
My questions are:
Is there a way to target only Safari and Firefox on OS X and not touching those on a Windows? I mean, is there a way to create a stylesheet only for OS X?
Or are there any conditional comments (for example, ) that targets Mac OS X? If not, are there any other ways?
Or, am I F out of luck?
Thank you people!
Best practice: Try to fix it without doing user agent detection. Analyze the problem, you could try to ask specific advice on your problem here. Especially Gecko and WebKit rendering engines behave almost exactly the same on each platform, bugs should be easy to squash.
If you really can't fix it, you can do JS browser detection, and include a CSS dynamically.
detect: http://www.quirksmode.org/js/detect.html
insert css: http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
This is a bad practice however: whenever you make changes, you need to change each css for each browser.
You can target browsers specifically normally firefox chrome etc work roughly the same and ie may work slightly differently.
A way to target browsers is described here
http://www.webmonkey.com/2010/02/browser-specific_css_hacks/
http://reference.sitepoint.com/css/conditionalcomments
Yes, but this is rarely the right approach. I'd imagine that it's a font issue - perhaps you are using a font that is only on Windows, or one where the OSX version is slightly different.
If you did want to do this, you could either use a server side language (for instance, PHP) to check the user agent, then include an extra style sheet, or use JS to add the styles using the same technique.
When researching this, any info on CSS hacks should be avoided at all costs.
This is a good way to do this: http://www.quirksmode.org/js/detect.html as it avoids hacks, and produces an easy to use object containing the relevant information.
I would only use this technique in dire situations - in all the sites I've ever made, I've never had to do this, other than for old IE and iOS.
You can use JavaScript to target specific browsers but also operating systems for the browser.
http://www.javascriptkit.com/javatutors/navigator.shtml
I designed this website, and I have been unable to place an the element ( div#endinglogo ) in a way that renders properly for firefox / Linux operating system users.
http://motivacionenlinea.com/
I am working with all browsers in windows 7, and although the design appears as it should in the firefox with MY operating system, my guesses to fix firefox/Linux have not worked.
My questions is what is proper margin to give to element div#endinglogo for it to appear where it should.
I have attached two images below.
The first shows how I want the header to look:
http://postimage.org/image/rsd27dvo/
The second shows how I been told it appears in browser firefox when using linux operating system:
http://postimage.org/image/rtgr3pqc/
I have a php file that serves firefoxLinux.css file, or at least that is the intent. Is this file being loaded when you see this website through firefox/linux?
Thank you for your help
In your firefox.css, you have a different negative top margin for your div#endinglogo. Make it -110px (like it is in your chrome.css file) and it should work.
On a related sidenote though, why are you creating multiple stylesheets for different browsers? For most things there are solutions that work consistently across browsers and operating systems, and only in a few cases do you need special styles (i.e. for IE, maybe some older versions of firefox). I think if you were to consolidate your styles you would run into less problems. Of course that's just my two cents.
I'm working on a project with a designer and he insisted on using some specific font for titles and various elements in the page. So we're using a font kit to embed with #font-face.
It's working perfectly on PC (Firefox, IE 7 and 8, Chrome, Safari) but on Mac OS (Safari and Firefox) the fonts are not vertically aligned the same way. After looking on the Web, I didn't find any solution for this except "there always been differences between browsers and platforms, live with it".
I know that fonts are never rendered exactly the same across platforms, but this time it's not something like the font looks more bold or something like that. The font looks as if it's baseline is completely different between Windows and Mac OS X. On Mac OS, the font, at a size of 16px is 3px higher than on PC.
So I'm looking for a backup solution : is there a way to create a CSS specifically for Mac OS users? I do not want to target only Safari because Safari PC is ok, and Firefox Mac is not ok.
Or if you have a solution to fix the baseline difference that does not require a specific CSS file, I'd be happy to hear it.
Thanks!
I'm afraid that browser/os sniffing is your only option. CSS itself has no knowledge of OS nor do i have ever heard of a css hack that targets osx specifically.
This is the easiest way for me to detect OSX and add the OSX class to the document body so you can override css styles for OSX specifically.
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', 'OSX');
}
Same as #ChrisR answer this is the easiest way for me to detect MAC and add the MAC class to the document body so you can override css styles for MAC specifically.
Additionally this keeps the current Body Class and just ADDS Mac on to it
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', document.body.className +' MAC');
}
If setting an explicit line-height doesn't fix the problem, you can serve different stylesheets to each browser using your backend and detecting the OS in your application (via the user agent). You can also do something in JS doing the same thing, but there will likely be a FOUC while JS loads the relevant styles.
There's an easier way. http://rafael.adm.br/css_browser_selector/
It detects the browser and os and allows you to specify classes specific to it.
If you want close-to-perfect and painless, you're going to have to use the common fonts or fonts from an online service such as Google's free font library or one of the for-pay font libraries. These fonts have been designed and tested to work on the web.
Experimenting and including fonts for the user's browser to download and try to display correctly is fine, but won't be perfect and won't be painless. Also, be very careful with licensing restrictions - make sure the fonts your designer wants to use are properly licensed for use on the client's website.
If you have to do browser sniffing and serve multiple stylesheets, at this point I'd say your design is broken and needs to be revised. Show https://fonts.google.com to your designer and see if he likes any of those - they work cross-platform in all modern browsers and some are very slick. EDIT: Oh, and they're free to use without worries of licensing.
I'm not sure if this has anything to do with the recent Safari update, but I'm beginning to notice this a lot. There is a drastic difference in the way each browser is rendering fonts.
for instance, I took screenshots of what I am seeing here on stackoverflow...
http://twitpic.com/q43eh
I have verified that this is a trend via my co-workers machines.
has anyone noticed this or have any thoughts on non-hack solutions?
Font rendering isn't specified anywhere in the standards and therefore may (and will) vary between browsers and platforms.
In particular, Safari on Windows renders fonts like OS X does which tends to look weird to Windows users as Windows has quite a different take on how to render fonts than OS X.
You can definitely notice this, especially if you use Expression Web SuperPreview. This is just a general problem of the web, just like folks can hit Ctrl-+ and make your text bigger. Try not to use many absolute coordinates in CSS and the layout engine will ensure it's still readable
I first noticed this in OSX in October 2010. It is especially noticeable with Helvetica Neue. I suspect that an OSX update broke font anti-aliasing in font sizes above 12 pixels. I've posted an Apple Support message here.