In Firefox 19.0.2, an input tag using the browsers styling agent has the following layout:
In Firefox 18.0.1, the same input has this layout:
As you can see the padding, border-width and width properties have all changed.
Considering the amount of sites utilizing a fixed position layout, is this a poor design decision? I'm assuming a large volume of sites will break when viewed in FF19.
Is this a common problem with new versions? Is there an approach to handle this issue?
Firefox is but one browser, and 19 is but one version of that browser. Compare those styles with styles of other browsers and you'll surely see differences.
There are browser reset libraries (take your pick) to rectify this very issue -- not just when a single browser changes between versions, but also for IE vs FF vs Chrome vs Safari vs...
Related
I'm having some trouble with font's on cross-browser compatibility. FireFox and Chrome look virtually the same, maybe a bit smoother on FireFox, but on IE9 it seems condensed and a bit bolder? I've used every CSS value for font to try to set a default for every browser but nothing works. Any ideas what IE9 is doing to distort the font? I do like the way it looks in IE9 but I want it to match between browsers.
It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.
Microsoft says,
Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations
However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.
The font rendering is dependent not only to the browser but also the operating system.
Please see the following two articles which are explaining the difference and what you can do with CSS to overcome it:
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
I have an HTML5 canvas image where I've drawn some points and I want to align some div tags and text input tags next to the points.
Unfortunately, browsers do not agree with the space between each div and input tags.
I've found a hack for the input tag, by specifying height with CSS. Now input tags have the same space between them for every browsers. It seems the default height of input tags was not the same depending on the browser, very very weird.
I've tried the same thing for my div tags, but I can't get the right alignment for every browsers.
text input tags alignment working with every browsers with CSS hack:
http://jsfiddle.net/baptx/XcKZj/
div tags alignment is not the same depending on the browser (configured for Firefox):
http://jsfiddle.net/baptx/92gPY/
I'm using Firefox on Linux and I've noticed that Windows version does not render the same margins.
Chrome does also not agree with Linux Firefox, when running on Linux or Windows.
Opera is great, it always agree with Linux Firefox, running on Linux or Windows.
I first thought, it was due to web browser engine, Gecko rendering differently compared to Webkit, but if Windows and Linux version of Firefox do not agree, it should be something else.
Has anyone and idea where it comes from and how to fix this with div tags?
Why: because the prescribed stylesheet does not prescribe spacings like margins.
The solution: use a CSS reset stylesheet, and explicitly declare your own defaults in your site-wide stylesheet.
Here's a website with some resets: http://www.cssreset.com/
It sounds like you need to include a reset css into your styles. This will help unify (but not completely eliminate) the differences between browsers.
Here are two popular resets:
Eric Meyer's reset
YUI Reset
Padding is never the same in Firefox and IE, while IE adds padding to the height and width, Firefox just ignores it. what is the correct interpretation and what is the nest way to achieve the same look in all the browsers. Does firefox and Ie differ in margin a well?
In modern browsers, you can use the box-sizing CSS property to instruct the browser about the exact box model you want. If such property is missing, all browsers built since year 2000 (aprox.) will default to the good old W3c box model. In such model, neither margin nor padding are part of the content dimensions (width and height), as this figure illustrates.
In practice, I'd dare say that 99% of web sites rely on the latter, and the rest are legacy sites that were designed for Netscape and Internet Explorer 4 and have been abandoned since then.
If you need to support very old versions of Internet Explorer, make sure you have valid HTML with an appropriate DOCTYPE. Otherwise, IE will render under quirks mode and might revert to old box sizing model.
You need to use a reset CSS to ensure the different defaults the different browsers have chosen are neutralized.
The differences you see are due to different default values for margin and padding that each browser has for different elements.
One additional wrinkle is that some browsers require some content to be in a container (say table cell or div) before applying width/height to it. This can easily be done by adding a non-break-space - .
All browsers from the last 10 years render the box model correctly IF you are not running in compatibility or quirks mode. That means you have to have a valid doctype, it must be on the first line (anything before the doctype throws IE into quirksmode) and you can't do illegal things that also throw it into quicksmode.
If you have valid content, with a valid doctype, content will render the same.. although different browsers may have different default values for some styles, which is where a good html reset file comes in handy. This levels the playing field so all browsers have the same default styles.
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.
Will we need to use a CSS Reset if we don't consider any version of IE (Internet Explorer)?
I'm making a website where I don't necessarily to consider any version of IE. Would it be OK to not to reset anything for Safari, Chrome, Firefox and Opera?
Is it only IE which forces us to use a CSS reset, or do other browsers also have inconsistencies?
The point of css reset files isn't solely to make certain functionality work in older versions of internet explorer, it's to make the job of presenting using css the same between browsers.
Yes, you would still need to if you want to support many browsers. It is not only Internet Explorer that needs reset.
Which browser was it, I forgot, but either it was Firefox or Opera that had different default settings too, not just IE.
Nevertheless, it is a safe move to do, and you can rest assured that it will save you a few problems.
Usually, a reset is only about a few kilobytes, which is not much.
I think this post here should give you a good idea WHY to use RESETS and how it isn't ONLY about IE (flavours) that cause problems:
... there are all kinds of
inconsistencies, some more subtle than
others. Headings have slightly
different top and bottom margins,
indentation distances are different,
and so on. Even something as basic as
the default line height varies from
one browser to another—which can have
profound effects on element heights,
vertical alignments, and overall feel.
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
You always should use a reset.