I am redesigning a website and finding problems with small rendering differences between IE FF and Chrome. Am using CSS and . Is there any way to avoid these differences?
Also, even when I fix the diffences, FF still ocassionally renders incorrectly on some computers. It doesn't appear to be resolution related but only ocurrs on laptops with 15" screens or smaller.
Any ideas or input welcome as I would prefer not to have these differences in the first place to avoid having to make numerous tweaks to fix. Thanks
Different browsers, and different versions of browsers render HTML and CSS differently.
There is no one way to create a web page that will make it look the same in all browsers.
You simply must pick a subset of browsers you wish to support (such as IE6+, FF3.5+, Chrome 9+) and make them look as good as possible in those browsers.
You will never get it exactly the same in all browsers.
Related
I have been trying to accomplish as much as possible without browser sniffing, but frankly I don't see how this one could be done with feature detection.
The site I am building has a global font difference in Firefox compared to the latest versions of Chrome and IE. Absolutely positioned content is overlapping and the font sizes are exactly similar.
Is there any way to deal with this without browser sniffing?
Webkit is an awful renderer in my opinion. As a web designer/developer, I take into account how my design looks at every magnification. Webkit handles this extremely poorly. Margins, padding, and borders all get rendered extremely poorly across various magnifications and there is no CSS you can use that is "cross-zoom" compliant in WebKit. Zoom in and out of any webpage in IE, Firefox, Opera and it is consistent. Take a look at this site, for instance:
http://development.mminc.co/davidphotos/
Try using the carousel at the bottom at different magnifications in IE or Firefox. Works fine, right? Now try the same thing in Chrome or Safari. BOOM! A developer's nightmare! Please, if anyone knows of any tricks of the trade to get Webkit to behave with something that even Trident is able to successfully do I'd like to hear it. I've heard of a jQuery zoom plugin, but that is sort of a last resort. I've looked everywhere for the issue but no one even mentions Webkit zoom issues. It's like it's taboo or something. Personally I think it's one of the biggest blunders of the modern browser era, especially when such a (otherwise) great browser like Chrome is giving me more trouble with presentation issues than IE7.
EDIT: I feel I should be more general and use an example where it is obvious only HTML and CSS are implemented.
http://www.gamespot.com/
Webkit forces a line-break with the top menu w/ zoom tests, but other browsers don't. It is a major issue with the engine and if there are any concrete solutions I'd like to hear them. If there isn't then I think this issue should be addressed and resolved immediately; it is an eyesore to users and a nightmare for developers. The fact that it isn't addressed anywhere on the net is troublesome.
This isn't answering how to fix WebKit zoom issues in general, but it should help with your specific problem.
You're using jCarousel.
Even the simple demo shows the same problems you describe.
So, that plugin is simply broken when it comes to zooming with WebKit browsers.
You could either ask the author of the plugin for advice, or find a different carousel plugin.
For instance, this one doesn't seem to have any problems when you zoom in using a WebKit browser:
http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm (look at the "dispItems" demo)
I'm unsure which browser is the best for a web development. I know that Firefox is the most favoured for the common but it also does tolerate programming failures, so it is not 100% strict.
With what browser should I develop my website to have the best result on all other browsers, so I don't have to fix too much in the CSS?
From personal experience.
I use chrome. For me 100% fine on chrome is like 70% on IE, so I switch between the two a lot.
Chrome 100% = 98% FF , 99.9% Safari and 70% IE.
This is what I've noticed from my experience.
I personally use Chrome, as its built-in developer tools work great, and it has the widest HTML5 support. However, that's not necessarily a good thing because even if your website works 100% with the better browsers, it will probably break with IE.
If you need your website to work with IE, you should constantly test with it. Use the lowest common denominator.
At this point, all of the major browsers implement a lot of CSS3 features a little differently (box-shadow vs -moz-box-shadow vs -webkit-box-shadow for instance). Honestly, your best bet is to use IE, Opera, Firefox and Chrome (I'm pretty sure Safari and Chrome both run off of webkit, so they should be the same). As for what to use as your primary browser, it all depends on what you're looking for really. I enjoy using Chrome, but others swear by Firefox (I find it too clunky).
Now as for older browser support, well that's just an entirely different discussion ;)
Simple answer, all the major ones.
When you develop for the web it's best to think from the view point of the user viewing the site. The main issue is that each browser will render a webpage a little different and that is the main problem you need to solve.
To help with this issue, you'll need to work with some cross-browser rending web-apps such as http://browsershots.org/
To more directly answer your question, I'd go with Chrome with Firebug. Asides from that, you should be able to create CSS browser-compliant sites with practice.
Good luck!
Develop in the browser of YOUR choice with the best development tools for YOU (e.g. Firebug, FirePHP in FF or the Developer Tools for Chrome). Try to use standard, crossbrowser compatible framworks for JS, CSS and available templates for HTML like "Boilerplate" HTML 5. And then test everything continously on the mainstream browsers (IE, FF, Chrome, Opera, Safari).
This way you won't waste your time afterwards fixing browser specific bugs...
I prefer using Firefox, simply because there are so many useful tools for it - Firebug, Web Developer's Toolbar and so on - but really it doesn't matter as long as it's not Internet Explorer.
This is because IE has so many quirks that it's best to get it right in all other browsers, then worry about adding workarounds or other fixes to make it look right in IE (getting things right in IE can take a very long time).
Hopefully now I'm posting the right question :)
In web application I'm using devexpress toolkit, and have the right (correct) result in IE only (using also some java-script), on clicking event for example is working in chrome and safari, but in Firefox and Opera not :(
The grid view are not showed properly in division in any other browser, except IE!
Have you got any idea where I'm missing something ?
You are most likely using non-standard features that are only supported in IE (and perhaps a few more, depending on the feature).
If the page only displays as intended in IE, the code is incorrect and relies on non-standard features or rendering errors in IE. IE has several rendering errors that no other browser has, which makes it less suitable as the first stop for testing. If you build a page for IE, it's almost a guarantee for it not to work in any other browser.
To make the page render correctly in all browsers, you need to first make it work in a browser that follows the standards more closely, like Firefox. Trying to get other browsers to emulate the same rendering errors that IE has would be very time consuming, and doesn't give a robust result.
You might need some extra tweaks to make it render correctly in IE, but this can usually be accomplished in a standards compliant way, for example by setting a specific size on certain elements.
Mine is solved by that...
Devexpress Gridview properly Rendering problem for browsers
Should i check in all? or in any one is enough because all share same rendering engine Webkit.
My question is related to HTML CSS rendering.
I know one difference Safari for windows and MAC both have Font smoothing (anti -alisaing)
Is there any other differences?
There's definitely a difference between Chrome and Safari due to Safari's font rendering. In Safari text tend to be a bit bolder due to the anti-aliasing algorithm and can sometimes take up a few extra pixels on the screen.
Also keep in mind that Safari uses the SquirrelFish javascript engine while Chrome uses V8.
I have found a difference in the way Safari and Chrome select SELECT boxes. I think Chrome seems to ignore line-height whereas in Safari line height seems to make a difference.
Safari Windows 5.1.7 v's Chrome Windows Version 22.0.1229.94 m
I think this is to do with the default user agent style?
I would check, yes.
Whilst the browsers all use the same rendering core, they're not necessarily on the same version (and there are multiple versions of Safari out there in any case).
Also, as slebetman says, font rendering is quite different depending on OS and anti-aliasing settings too, so you need to be aware of that.
Shadows are fast&ugly in chome; slower&prettier in safari (and firefox). IIRC there was some difference in CSS3 transitions too - but really, these details are still in flux anyhow and change from version to version.
In practice, I only check one of the two regularly, which is generally fine. Before putting major changes online, it's obviously not a bad idea to check again, but during development, it's not worth the hassle; they're so similar anyhow...
There are major and minor differences. Do check!
Minor: full support for CSS3 border-radius in Chrome. I've read about, but can't find, this in Safari.
Major: zooming in Chrome zooms everything. (This is the behavior in almost every browser.) Zooming Safari zooms text but leaves other things unchanged. Your ever-so-carefully-laid-out form is highly likely to be trashed if the user zooms in. Leave lots of extra space.