Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
My website PackageNow.net is based on HTML5 and CSS3. All other browsers do not give any problems but IE8 and lower do.
Website wrong view
I tried to apply the PIE solution, and tried to apply different CSS styles attached to the website if IE is lower then 9
The website should look like this...
Website correct view
I would understand if the layout would be a little but different, but this is not normal...
Please help because some of my customers still have IE8 and below. I added a script that says that there browser is out of date, but I need to provide a website that works. otherwise i lose customers.
Sorry for my bad english, hope you understand what i try to say.
Thanks! Roy
Yes that's probably the expected behaviour (depending on what you're doing) and is perfectly normal for IE8.
in IE8 a lot of HTML5 mark-up / elements won't be understood batively by the browser and it won't know if it's supposed to display in-line or as block and you need to provide the HTML5 shim to deal with those.
Also there are very few supported CSS selector rules in IE8 and a list can be found at Selectivizr how getting support for thise. Of course you'll then need something like JQuery to provide that support
Also some of the :pseudo attributes just aren't supported and you need to write JavaScript to emulate these and add appropriate style rules too..
There are many other reasons why IE below IE9 does not render a HTML5 / CSS3 layout. There are hardly any supported CSS3 features in in IE8 (even with PIE which only does some of them). If you take a look at Browser Support Reference
you'll see what is an is not support by the browser, without a polyfill to assist..
luckily developers have made lots of other feature available in HTML5 through the use of Helpful Polyfills, so check out the list to see if you need some of these.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm a very newbie to the world of UI developing. Right now I'm using HTML and CSS to develop the layout. I use Google Chrome (because it is a very good browser, and from my point of view it is the best right there) to debug my code, but I just downloaded Firefox to see how my design will look like (I was thinking pretty much nothing will change) only to be staggered when I found that my design looks terrible and all what I went through was not compatible with Firefox.
I need someone with an expertise in that field to tell me how to properly perceive such incompatibility (Some professional techniques ) between browsers and what should I do now for my current design and for the future when developing other sites?
PS
the question might not have some genuine English as of my background, but I assure to you that I'm not demanding rather than asking politely, that's how it sounds in my region. Thank you
Updated
Since the browsers are all developed by mainly different people, there's always the possibility of running into compatibility issues.
There's two steps I can think of when it comes to preventing this kind of issues:
Use a CSS reseter. What that means is a stylesheet containing a set of CSS for bringing all items to the same starter value (i.e. chrome has a 30px padding in list items, firefox has 35px but the css resetter tells both of them to have 30px padding - Just an example). For more info about CSS resets, have a look at this question: CSS reset - What exactly does it do?
Prefix your CSS correctly. Browsers implement properties differently, so while -webkit-transition:0.2s; worked in an early version of chrome, firefox had its -moz-transition:0.2s implementation only, until it became a standard that transition:0.2s should be the accepted syntax. There's lots of tools that can help with that, like Autoprefixer, or pleeease.io
Regarding Mobile responsiveness, the key is to avoid using many fixed width elements (i.e. 1024px for the main container) or having media queries and adapting the fixed sizes to certain display sizes using media queries.
The internet's knowledgebase can help you really understand more about this, but if you just want to try it out, you can view some popular media queries on this SO question: Media Queries: How to target desktop, tablet and mobile?
you will have to learn as you go, start with the simple things & make sure you have a good foundation. There are a lot advanced CSS3 animations, transitions & transformations as CSS3 is becoming more & more powerful. Check at "Can I Use" to see which browsers support your CSS. Responsive design is based on media queries (checking screen size) & using percent rather then px for example so the design can change depending on the device. Also MDN is a great tools for reference which also notes browser compatibility.
a good practice is to set padding margin to 0 and using box-sizing on first lines of your stylesheet to reset browser layout like this
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
this will help you control your site layout a bit better
The second part of your question:
Write this code to make your website compatible in the head part
Modify the "1.0" part accordingly.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am designing a website using bootstrap ,HTML,CSS,CSS3 and PHP as Server side language. But when i checked it on different Browser I found that it is not compatible for all browser by examining some appearance and functionality of HTML elements. I want my web page should look on every browser.
I wanted to know :
1) What are the aspects that we have to take in consideration while designing cross-browsing website?
2) How can i design a page which can give me the same output on different browser.
1) Before you use any html5 element. Just check on caniuse.com. To see if it's compatible with the browsers you want. If you are desperate to use that element, provide error callback or just alternative callback.
2) Use prefixes like -webkit- or -moz- etc for partially supported css rules on browsers(you can check on caniuse). If they do not support the rule at all, fallback to images but mind page load. You can also use cssreset library like normalize.css to standarise default styling across browsers.
Your problem is not at all PHP related. PHP runs on a server and generates (HTML) output. That output must be compatible with the browsers, but it's not specific to PHP to get it that way. Therefor I've removed PHP from your title and tags.
The remaining question:
First aspects to take into consideration, is that no two browsers are the same. Even if you have the same browser, they can run on a different machine, have a slightly different update, run on different screen sizes, etcetera.
Also, browsers have their own CSS already built in. A h1 element has a big bold font. The exact size, family and boldness might vary across browsers. Therefor, many websites will start with a CSS Reset (Thanks, #Vucko). This is basically a bunch of CSS code that you can include, which will remove all markup or at least make it the same across browsers.
But even after that, don't aim for pixel perfect. Sometimes nearly is good enough.
This especially goes for unimportant features. For instance, rounded corners and shadows are not supported by old IE browsers, or may look slightly different. Instead of mimicing those CSS features by building big HTML structures and add background images, I think you should cut your losses and accept that a shadow won't show or the corners are squared when otherwise the site works okay.
It's good to follow standards. If you follow standards, and make sure your HTML is valid, it will show nearly the same in most browsers.
There might still be differences, expecially if you use new features that are not fully supported in all browsers. Using features that are widely supported, boils down to a lot of practise, a lot of knowledge, and being able to use at least these sites:
http://validator.w3.org/ - Check if your site is valid.
http://caniuse.com/ - Good overview of browser compatibility of specific HTML/CSS features.
http://www.quirksmode.org/ - A similar site.
Especially those overviews are very helpful. You can see in a glance whether a feature is supported or not, and whether you need special CSS prefixes (like -webkit-) in your CSS to make it work for some browsers.
The answer is actually the same as for 1: Don't. Make it look good on the most important browsers, and make it work on the less important ones. If a browser is really old, don't care about it. The oldest Windows that is still supported is Vista. Vista will run IE upto version 9. So IE8- users should just upgrade their browser. If you do want to support it, only make it work and look reasonable, but don't try to make it pixel perfect. Don't try to do that in any browser, for that matter.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Is Snap.svg vs HTML5 native SVG DOM API relatively the same as jQuery vs HTML5 native DOM ?
Other than cross browser differences, which I hope SVG is pretty well supported by any modern browsers (am I right?), what benefit does Snap.svg bring?
What would be the upside or downside of bypassing Snap.svg and code close to the metal with the SVG DOM API?
Snap really just manipulates SVG under the hood and makes it easier, so in that sense it is similar. You don't have to fiddle with markup or any of that stuff.
The Animation it uses however isn't SVG, so you can't really export Snap Animations as SVG animation markup, which in some cases may be important, but I think most of the rest is basically SVG that can be manipulated.
Snap is relatively well supported by modern browsers. If you need older backwards compatibility, you may want to look at Raphael (same author), but then there is a trade-off where you can't use things like proper SVG groups (it uses sets/arrays which aren't SVG).
The downside of not using a library like Snap is that you get bogged down on markup errors, namespaces, write lots more code to do the same thing. The upside is you get to understand SVG properly, you don't need to rely on an external library. Snap you can do animations, make things look nice pretty fast, often in one liners. Its really difficult in pure markup along once things start to get a little tricky like transformations, manipulating paths etc.
Even if you go down to pure SVG there is still fiddly things like browser inconcistencies, so you also need to figure support relating to that as well.
Lastly I would say that some mobile SVG performance (mainly things like animation/filters etc), isn't that great, so if that is a requirement, I would have a think about if thats the correct solution, and try and do some initial tests.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I am just getting into the world of programming and websites and I have an specific question I hope won't bother you. I am building a website (elcamal.com) and I'm concerned with the fact that I only tested and designed in Chrome, but now that I tested in Firefox, Safari and IE, it's totally ruined, specially in Safari.
It seems that the problems are not so bad, it's just some issues with the grid.
What would be the first steps to make my web compatible with at least Firefox and Safari? I would like to know if it's something that I can learn or if I need to hire someone.
Thanks for your patience and have a good day.
To make your website Cross Browser Compatible you need keep lots of thing in mind. Some points are below:-
Try to use standard CSS features.Each tag is properly taken care.
Try to avoid hacks to achieve something.(howeversometime we need to use hack to fix something but make them minimal).
Try to use conditional comments instead of CSS hacks. With conditional comments you can link to separate style sheets for different browsers.
<!--[If IE]><link type="text/css" href="IEtest.css" /> <![endif]-->
Testing play important role you should check since the beginning of development in major browsers.
Imp:-Clear Your Floats. This refers to divs which serve as containers to other divs and should wrap around them but sometimes don’t.
Try to use javascript library like jQuery, YahooUI, MooTools, Dojo abstract away the differences in the DOM, AJAX and JavaScript.
Define Valid Doctype.
Enable HTML 5 in major browsers:- When working with HTML5 we need to include the "HTML5 shiv" to ensure that CSS will recognize and be able to style those elements in browsers that aren't yet hip to HTML5.
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
You will find some good point by yourself while developing the page. Try to Google.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
HTML 5 has interesting features for developer and user, but if customers are still demanding to have support for old browsers should designer/developer go for HTML 5 ? Or should stick to good old ways using JavaScript libraries, flex and flash to do the heavy lifting.
If accepting HTML 5 is too early, how long you think it will take to use HTML 5 features for big web application? (hear by big i mean application still reaching huge number of users with different OS and browsers combination)
Do you think HTML5 will carry all the issues(cross browser stuff) that web developers have faced over decade, or it will make life easier?
In a word: Yes.
People are STILL using IE6, and will be using IE7 for many years to come. If you're creating a public-facing application then you have to take into account browsers that may be being used by millions of potential visitors.
There are features that will degrade gracefully, and those are great.
If you're building a web based app that's not public, then you can go ahead an use whatever you like. I do a lot of development work where the final project is limited to a specific browser but in those cases the application is never available to the public.
Sitepoint has some very nice articles about this very subject:
http://articles.sitepoint.com/article/html-5-snapshot-2009
http://www.sitepoint.com/blogs/2009/05/26/html-5-now-or-never/
Also, check out the following to see what browsers support what new up-and-coming (or been here a while) features:
http://a.deveria.com/caniuse/
No, I think it isn't early.
Start now and slowly start adopting new elements (except video/audio as they are the least supported). For IE, you have JS solution that adds new elements and adds ability to style them.
Try, really. You'll see how much it's easier to tag your document :)
When people talk about "cross browser issues" they almost always mean "IE issues". Modern browsers, that is, anything but IE, pretty much work well with modern standards and practices and dumbing down the web just for IE is just sad.
There are a number of javascript workarounds to make older, non-standard browsers like IE work with HTML5 though I don't recall them off the top of my head but parts of HTML5 can be made to work easily in IE; such as the new elements aside, section, etc.
In my situation, we just completed an ecommerce solution using HTML5 elements with no problems but had to include the workarounds and hacks for IE.
Naturally, you need to take your audience into account. Check your analytics. But there are some great tools if you want to take advantage without leaving everyone behind:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I'd also recommend you take some time at html5doctor.com where they discuss what can and can't be used now. A really cool resource they are working on is the html5 reset: html5doctor.com/html-5-reset-stylesheet/
Oh, and use ogg ;)
I recommend you take in use any new feature you think is interesting but make them degrade gracefully. It can be a bit of work, but that's the life you choose if you go outside the life of using libraries. However you will probably learn some very valuable skills.
Using HTML 5 isn't an all-or-nothing solution, much like CSS3 there are specific features you can start using today that will enhance your sites for browsers capable of using them.
It's up to you to make a decision on what those features are and how far you can take them. If IE6 and no-Javascript are big factors in your audience, then this will likely be limited. However, if you are happy for those users to get a not-so-pretty but still-usable experience then go ahead!