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?
Related
I remember Joel once told a trick for scaled images to be displayed smoothly in IE:
img {-ms-interpolation-mode:bicubic;}
Which makes downsized images (with a smaller size than that of the actual image by CSS or HTML width property) smooth without looking rugged.
Is there any similar CSS rules for this to work across all major modern browsers such as Firefox and Chrome?
Is there any similar CSS rules for this to work across all major
modern browsers such as Firefox and Chrome?
No.
-ms-interpolation-mode is obsolete as of IE9. There is the image-rendering CSS property, but it is experimental and the supported values vary across the browsers. This SO question addresses best practices for the image-rendering property, which will cover most browsers, and you can even throw in the IE-specific tag for IE7 and 8, but later IE versions and certain combinations of browsers and upscale/downscale are not supported.
Obviously you can do something server-side to dynamically rescale images, and if you really need high quality that will be your best choice.
zoom:0-1; will scale just about anything.
For some reason IE9 renders Arial font bolder than other browsers such as: IE7, IE8, Chrome, and Firefox. I have looked for the reason in the CSS but couldn't find anything wrong.
Another thing that happened is that I had word-spacing of 1 or 2 pixels in most of my website, but IE9 showed it too wide, so I made conditional css for it with normal word-spacing.
You can see the difference in the attached screenshot, and also find it in this temporary link:
http://pat.co.il/shirg/matanuziel.com/
Any ideas will be appreciated.
Thanks
The problem is the browser, not your site.
Internet Explorer 9 uses sub-pixel positioned ClearType to render text by using DirectWrite. This can cause rendering differences compared to other browsers and is expected behavior. It can cause text to blur slightly more, just as you're seeing.
As a side note, you should consider using TypeKit if you want to use non-standard fonts and have them render (resonably) well for all users. Note that there will still be minor rendering differences across browsers, probably on the same order of magnitude as what you're experiencing here.
And as Alan stated, using normalize.css is a good idea.
It might be worth looking at normalize.css. I don't know if it'll address your specific issues, but I've found that it's a nice starting point.
I'm building a pretty heavy J.Query website and, as always, it looks great in the modern browsers - but I am coming across all types of alignment issues in IE 6 & 7. More severely in IE 6. I'm working on building a conditional IE Style sheet for those browsers and am wondering - is there a way to align all divs with CSS? Can I permanently position everything to be, and stay center throughout all browsers and window sizes?
Ultimately; any suggestions on fixing margin issues that occur in older IE's? Stuff that looks great in modern browsers and pushed off to the right and top in IE 6 & 7. ..If the conditional is the inevitable route, what's a good way to start defining the parameters within?
are we talking horizontally or vertically?
Horizontally, the "margin:0px auto" should always center the div horizontally along the screen, so long as the width is set. This works for all browsers IE6+ i believe.
There's a pretty good forum here : http://www.webmasterworld.com/forum83/8003.htm
It sounds to me like your problem is that you have poorly written CSS. Certainly, IE6 has plenty of issues, but if you're seeing problems in other modern browsers, then your problems are with your CSS, not standards conformance.
If I were you, i'd just ignore IE6. It's down to less than 5% of the market (some surveys say as little as 2%). Just let it die.
As RCNeil says, using margin centering works with everything. If it's not working, then you have something else causing your problem and we can't possibly guess without seeing your page.
NOTE: in older versions of IE, if your document is being rendered in quirks mode, then you will have problems with auto margin. Make sure your document renders in standards mode.
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.
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.