I have a little website, and I wanted to have no margin by doing:
<p id="demo" style="margin-block-start:0em;margin-block-end:0em"></p>
But the object still has a margin on every browser except chrome. (Chrome on IOS also does not work)
What have I done wrong? I have seen some other problems that were related to some small typos, but I can't find any of that here.
Quite simply (at the time of writing), this is a CSS Logical Properties and Values Level 1 experimental property and is not supported by most browsers or is supported but behind an "experimental" flag which is set at an individual user level.
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
MDN
I would suggest a fallback of margin:0 pending final acceptance.
Related
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.
Like the title says I'm just wondering the current support for canvas.toDataUrl? I have it working in Firefox 4 but haven't really tried it in any other browers. When I look it up on Google most of the results are pretty scattered as some are from a year ago. It says its only supported with webkit nightly builds. (which I assume now are the actual releases)
I'd also like to know the support for mobile devices as well.
I personally prefer using caniuse.com for finding out the current browser support. Caniuse covers various major releases of each browser, as well as some mobile browsers. However, I always recommend that with anything mission critical, you test in all browsers just to be on the safe side.
If you take a look again at caniuse.com you will see that the support tables are all color-coded and they tell you whether a browser fully-supports, partially-supports, does not support, or does not support (but a polyfill exists). The canvas.toDataUrl, property would fall under the category of "basic support", which shows that the canvas api (or rather the current working draft for it) is fully supported in all major browsers, and there is a polyfill available for IE.
So while it doesn't go into great detail about the specific properties browsers support, it stands to reason if a browser "fully-supports" the basic canvas API, you can safely assume that includes toDataUrl. Once again, if you dont want to leave things to chance, or if you for some reason do not trust caniuse.com, your best bet is to build a test-suite and personally test your app against all browsers.
Actually it's currently broken in the webkit nightly build, a minor security bug I found a couple days ago:
http://code.google.com/p/chromium/issues/detail?id=91016
But in general in the stable release of Chrome it works just fine. In IE9 it works just fine too.
Is there any problem If i use position:absolue property in HTML 5 ?
position:absolute;left:somepx;top:somepx;
Will it work on all browsers or does the syntax go upside down ? Im using the
<!doctype HTML>
and developing the html using images and with some text, Just placing them in a good looking way using the position:absolute.And im developing using my internet explorer probably its version 7 I think so.But im worried will it work on other browsers like mozilla and google chrome with no error.Will it remain the same way on all browsers? becuase the stackoveflow or google any webpage looks in the same way in all browsers.I just wanted to know what standards they follow that makes them look same on every browser.
Please just let me know is there any harm or pitfall using the position:absolute.Thank you in advance
It seems you make some mistakes when you build your websites.
using absolute positioning where you shouldn't. It is not appropriate to use position: absolute to make a complex layout. Consider looking for some tutorials to learn how to build a layout using especially float, clear, margin and padding CSS properties. Use absolute positioning only where it is explicitly required.
using non standards-compliant browser during website development. IE7 is quite old browser with buggy support for web technologies. This may cause that your website will display fine only in IE7 and messy in every other browser. What you have to do is to develop website in standards-compliant browser (no matter what browser, just make sure you use the latest version available) and then check the website in older browsers (and possibly fix bugs that appear). Don't forget to check the website in all browsers used by your visitors. Compatibility tables like those at QuirksMode are often useful.
Back to original question, browsers don't distinguish between versions of HTML (there is just standards and quirks mode, but you don't need to care about them because you're using doctype that triggers standards mode in all browsers); so there's nothing more to be aware of. Absolute positioning should (and in most cases, will) work well in IE8+ and all widely used versions of Firefox, Chrome, Safari and Opera. Once again, you're supposed to test your website in all widely used browsers; you'll discover possible browser bugs and incompatibilites then.
Another interesting thing to look at is this:
http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html
It may very well be available soon and will probably be a lot better for what you want. For now, do not JUST use Position:absolute, as people have said, it is a really bad way of positioning things and should only be used under very specific circumstances.
Well it has nothing to do with HTML5, it is basic positioning.
And it is not a straightforward process to get your site to display the same in all browsers, you should take a look at resetting style sheets or just test your site in a lot of browsers.
Especially older browsers have a way of changing your design.
absolute positioning is part of css3. html5 is just a combination of javascript+html+css
with unique features. so.it should work with all the browsers. but how all the browser will display, you need to chek it in chrome,mozila,safari,opera...etc in recent versions.
browser compatibility may be issue some time.so,don't worry ,it's better to chek and fix the variations.
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.
I'm trying to figure out which browsers currently (natively) support the CSS3 layout module.
Basically, I'm developing for a specific environment where I can specify what browsers to use, and CSS3 will speed up development times, so hey - why not?
What I'm specifically talking about is
body {
display: 'aaa'
'bcd';
}
and being able to slot page elements into the layout like so:
div#div1 { position: a; }
div#div2 { position: b; }
(div1 is the header, and div2 is a left sidebar)
Opera has the best CSS3 support, followed by webkit (safari). I suggest testing on Opera to see what works.
Here's a compatibility chart (may be out of date)
http://geocities.com/seanmhall2003/css3/compat.html
this one seems better: http://westciv.com/iphonetests/
Be aware that most css3 properties are supported through a prefix (since css3 isn't final). For opera the prefix is -o- and for webkit it is -webkit-. ie: -o-text-shadow.
UPDATE: There is a Javascript implementation of the layout module: http://a.deveria.com/csstpl/ . Have not used it myself and it comes with the catch that you must wait for all the page to load before it can render cleanly. If you're writing an intranet application on a LAN this would probably have a negligible impact but on a slow connection that could make your pages appear unresponsive.
I'm pretty sure no browsers currently implement it. And I wouldn't expect any browser to implement it any time soon either.
It just isn't mature enough yet. It's only a working draft and will still need a lot of attention and discussion before it's going to turn into anything browser implementors will start having a go at. For example, there are (at least) 2 related proposals: Grid Positioning and Matrix Layout.
It is on Mozilla's bug tracker, but for the moment that's little more than a placeholder for future attention. I couldn't find any mention of it at all on the Webkit bug tracker.
If you want to find out more about the ongoing status of these layout modules, you should follow the www-style mailing list.