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.
Related
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.
I am in a collaborative work of generating a website for disabled people, mostly will run on limited number of educational centers-offices that will donate tablets and old-notebooks to attendants. I am telling you this because i want to give you an idea about the possible users and different OS and browsers.
I want to generate CSS code that will be compatible with all possible browsers; older and newer browsers..
I am writing from scratch and i build it by visiting http://browsershots.org/ each time to see if there is any compatibility issues, but it takes time. Also i use http://jigsaw.w3.org/css-validator/ but again too many manual work..
What i would like know is: do you happen to know any tool that you feed your CSS file that is compatible with, say IE at the beginning, and hands you the extended version of the CSS file that covers many of the compatibility issues?
Any help is greatly appreciated..
In simple words there is no easy way to generate one CSS for all browsers.
For details, It highly depends a lot of over how extensively are you using the CSS, what version of CSS is that etc plus there are many places where different browser renders same CSS property in different ways, so its not really simple enough for all the situations.
But, for a little help, with the time passing there are different tools and scripts that can make your task of achieving CSS compatibility for all browser easier, I would recommend you go through the following tools they can be useful to you while trying to maintain your CSS.
15+ techniques and tools for cross browser CSS coding
Some CSS-preprocessor/helpers to help you in maintaining your CSS throughout:
Less: The dynamic stylesheet language.
Sass makes CSS fun again.
Compass is an open-source CSS Authoring Framework.
I'm not sure such a tool exists. That said, there are some advices to write cross-browser CSS:
Use a reset stylesheet (e.g. http://meyerweb.com/eric/tools/css/reset/);
Use IE conditionnal comments such as <!--[if IE]><![endif]-->;
Practice a continuous coding: open few browsers (e.g. IE, FF, Chrome) and check the run-of-river display they provide;
Use IETester to check IE5.5+ rendering, depending of the IE versions you want to cover;
Use absolute positions and specify widths and heights (especially when using floating elements) whenever you can;
If you want to try CSS3, use PIE;
Try to write pure, simple CSS, avoid exotic layouts.
Netbeans IDE has a feature which helps you to construct CSS from simple tick boxes and drop downs. I haven't confirmed the validity against W3 yet though, but the code generated looks good.
Also a useful resource to check use is http://www.w3schools.com/cssref/default.asp. It does take time to reference the properties you wish to use, but it is always worth confirming their compatibly if your going to experiment with layouts, and a must if using CSS3.
W3 Schools gives a clear indication of which browser supports a stated property. See example image below which is shows the compatibility for box-pack.
This is the first time I will be implementing for IE9 and since I've installed Windows 7 which came with IE9, every site I have checked that we've built has some issues in IE9.
What I'd like to know is:
Is there a way to absolutely use minimal CSS to sort out all three browsers or will there always be the need for conditional css for the different IE versions?
Is there a specific doctype I should be using that will sort a lot of this out?
Many thanks,
James
It depends on your needs and requirements. My personal website has exactly one style sheet that works across all major webbrowsers. But my personal website is very simple.
Nope. But please, do pick and include a doctype. This article explains how it will effect rendering in IE.
1) 8 and 9 are pretty similar, 7 has a few things missing. Yes, you will always have to take into account all 3. This may be by removing any problems with the browser BEFORE you style with a CSS reset, although this doesn't solve everything, or use conditionals.
2) Not really, the browser will automatically select one if one is not defined. Either way, it won't change how the page renders.
The best way to minimise the problems is to use an initial CSS Reset file to bring as many of the differences back into line as possible.
Also, consider using a well established CSS framework such as 960 Grid or Blueprint. This will at least mean you are adopting a well used / contributed to framework which will minimise the cross browser inconsistencies that you are unaware of.
The CSS reset idea is a good one if you are just starting out but will hide differences between browsers that may confuse you later.
The best doctype to use now is <!DOCTYPE html> which puts all browsers into standards mode.
Recently, I have been battling with: weird table borders/margins, div alignments, positioning problems, and am having a down right nightmare supporting Internet Explorer 6. I know a lot of you like me are forced to support, IE6-IE8, Web-Kit, and Mozilla based browsers.
My questions to you are:
What are the important rules you use before hand, when developing across multiple browsers to save you time?
How do you prevent yourself from writing incompatible tags?
What is the best way to avoid hacking your code?
Where do you find research on browser compatibility, do you use any tools?
Finally, when do you cross the line/where do you draw it?
I usually code against Firefox (or Safari) first. That usually produces the best results across browsers other than IE. I then hit IE8, IE7, then finally IE6.
Know what tags are going to cause you trouble and avoid using them at all costs. It's all about how familiar with each browser's issues.
Don't use hacks. Use IE conditional comments. By using conditional comments, you can load one stylesheet for all other browsers, one for IE8, one for IE7, and yet another for IE6 (if you need that kind of granularity to fix your issues). It will give you nice clean stylesheets with as little hack-i-ness as possible.
LitmusApp
There really aren't lines to cross. If you need compatibility, you need compatibility. You just whiddle down your issues as best as you can one at a time until you have something usable.
I would say to start with standards-compliant code. Always test in a standards-compliant browser first like Firefox, or Safari/Chrome. I prefer Firefox for the addons (such as Firebug, HTTPFox and the Web Development Bar). Then work your way DOWN (and by down, I mean all versions of Internet Explorer).
Try to stay away from temporary fixes per situation or site and generalize your code as much as possible. For example, as Justin Neesner said in his answer, using conditional comments and a general style sheet for IE6 , 7, and 8 will knock out most of your problems with layout and formatting, without using (too many) hacks. You can reuse the IE stylesheets, and just place the site-specific code in it.
Use a testing platform like browsershots, netrenderder or LitmusApp so you can see what your site is doing in as many versions of browsers out there. Studying browser compatibility deeply will make you pull your hair out, but any great resource like quirksmode.org can give you information on the little gnats of incompatibility, so you don't go crazy, and bald.
As far as when do I cross/draw the line, it's 99% Internet Explorer issues, and if it's close enough to looking like FF or Chrome/Safari, I'm done. Almost like art, it's not when you're finished adding, it's when you're done removing the crap you don't want to see; that's when you know it's done.
I say there is not that much you can do except sticking to the basics:
Code standards compliant HTML
Validate early, validate often
For Javascript, use a framework like JQuery, Prototype or Dojo
Pick one "main browser" you optimize for first.
in every project, there will be a number of issues, but if you stick to these points, not too many.
I find it extremely helpful to build 100% W3C valid code. Not because it matters - much of what the W3C validator complains about will not make any difference in real world browsers - but because being able to run a validation, and getting a green light and knowing that all is well on that end is very helpful.
To test multiple IE instances at once, you can use IETester. It's not perfect - conditional comments won't work in it for example - , but mostly usable in everyday development work.
use a doctype like html 4.1 transititional which makes ie6 render in standardsmode. You can also use a reset stylesheet.
Use strictly compliant HTML and CSS markup and do not use browser proprietary extensions to CSS.
IE 6 does not implement CSS correctly beginning with its absolute ignorance of the box model.
IE 8 on the other hand has a test suite to prove they implement every aspect of CSS 2.1 correctly (which no other browser does).
Develop for Firefox as stated above and make a decision about supporting IE 6 & 7 or not. Frankly, I no longer develop separate style sheets for those browsers. They don't have enough market share (at least on my site.)
Given the interest in HTML 5 and the lack of interest in XHTML 2, develop HTML 4.01 Strict and follow these practices: (which are recommended in HTML 4, and required in HTML 5 and XHTML 1.1)
all elements and attribute names must appear in lower case,
all attribute values must be quoted,
non-Empty Elements require a closing tag,
no attribute minimization is allowed,
In Strict mode, all inline elements must be contained in a block element.
Why to learn HTML 4.01 Strict with references.
Also see the CSS 2.1 Test Suite
So I have been running around for a while now, 26 days later I think I am ready to give some feedback to my findings.
Coding:
First of all, I found that column systems seem to cut down the amount of HTML and CSS written. They are also very cross-browser friendly. Although there are many of them, I found that the 960 Grid System works the best for me: http://960.gs
Next up I found that Ruby has a cool extension for CSS called, LESS. This has been ported over to .NET and can be found at: http://www.dotlesscss.com. It is easy to setup, and is very powerful when used right.
Javascript, can be tricky but I found out that avoiding certain selectors and shortcuts in languages like JQuery will not only speed up the performance of your application, but exhibit less awkward behavior.
Testing the browsers:
Here comes the interesting part. Without any software I found that testing my applications against Internet Explorer 6 and Safari at the same actually helped increase the speed of my development. Firebug and Firefox actually cause me to develop around the problems and this is what causes a lot of extra code. When developing simple code against IE6 and Safari I found that going back to Firefox and IE8 is incredibly easier. Most problems I have had were with border widths, which were easy fixes.
The best software solution I found that was accessible to me was Expression Web with Superpreview, if you ever wonder why Microsoft releases a bunch of version of IE, its probably so they can sell you tools like these.
Anyway, that's my 2 cents for right now.
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!