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
Related
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...
I'm trying to remove styling from select elements using CSS. For example:
http://jsfiddle.net/HTseX/
No matter what I try, there is extra padding between the border of the element and the text, mainly in IE8. Firefox, Chrome and IE9 are simliar to each other, but IE8 is taller.
I'm guessing it just isn't possible. I always try to use the same code in all browsers, so I'm try to make sure I actually need to do specific coding for IE8, or use JS pulldowns.
Thanks.
The select renders slightly differently depending on the browser and operating system in use, and is well known as a troublesome HTML element to style with CSS (because the display is inherited from the operating system, rather than provided by the browser).
Reference
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.
If you look on the right, http://forensicon.net/blog/ - the width for the sidebar names renders differently in IE9 and FF. I'm not sure why it fills all the way to the right in IE9 even when I explicitly give it a width. I'd like to understand what is causing this behavior so I can avoid it in the future.
The problem is you have a comment before the doctype. This puts IE into quirks mode and it won't attempt to perform like all the other far more modern browsers. Remove everything before the doctype.
Yes, this is an age-old problem. Different browsers have different defaults for things like header and list tags.
Use a CSS reset and explicitly style them the way you want.
There may be different CSS base styles defined by the browser that are causing it to render inconsistently. You might want to consider using a base reset CSS that resets all the styles to a common foundation across browsers, and then lay your custom CSS on top of it.
A very popular one out there is YUI Reset CSS
http://developer.yahoo.com/yui/3/cssreset/
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.