I have finished designing my website but it displays differently on firefox, chrome and internet explorer. I believe i have done everything right but i dont know what is happening. Actually, google chrome displays it as i want it to, but firefox and internet explorer does not. My internet explorer version is 10 and firefox is 29. Please any help is much appreciated. thanks
This is the link to hosted site: http://www.ruebenpersonal.netai.net.
http://pastebin.com/xTnXeGhq - Link to the html source code.
Some browsers are uses the same rendering engine and some are not.
For example:
Google Chrome and Safari browsers are using : Webkit Engine (See: http://www.webkit.org/)
Firefox is using Gecko Engine (A.K.A. Moz) - (See: http://en.wikipedia.org/wiki/Gecko_(software)
Opera is using : Presto (See: http://www.opera.com/docs/specs/productspecs/)
So differences between rendering engines are normal. Which is why we are using their css properties like;
-webkit-border-radius /* For Webkit */
-moz-border-radius /* For Gecko */
-o-border-radius /* For Presto */
border-radius /* For IE9+ */
Some older browsers like Internet Explorer 6, 7, 8 are not giving support for most of CSS3 methods. To enable that methods, there are available to use JS engines like html5shiv or modernizr.
Note: You can use a service like this to generate starter templates that supports almost every browser.
Initializr: http://www.initializr.com/
Each browser uses different rendering engines. This means that certain HTML elements, CSS styles, etc. will be interpreted differently or not at all by browsers that do not share the same rendering engine.
To understand more, I would refer to this link: http://taligarsiel.com/Projects/howbrowserswork1.htm
As far as developing for multiple browsers, I would look into the modernizr javascript library, http://modernizr.com/, and for quick reference, caniuse.com.
Hope this is helpful.
Related
CSS filters are kinda supported by most browsers.
But as it has the Working Draft status, is it recommended to use it? (in production)
As you can see on your picture of the website caniuse, if you do not need your website to get this functionnality on Opera Mini & IE, you can use it.
As most used browsers (Firefox, Chrome, Safari) set up this proprety, you can take it for granted.
just like the title says, my website layout appears to be fine on all other browsers at various zooms, sizes and what not, but not in Safari.
The website adheres to HTML5 and CSS3 standards according to W3Cs validators, and I cannot spot any errors myself.
Website can be found at : http://www.kehza.co.uk/Arcade
It's very basic atm, I want the layout to work on all browsers before I progress. (catch bugs early on).
Edit :-
In Safari at certain zooms, massive white space appears at the bottom of the page, also a border is massively out of place.
See images for difference thanks :)
The latest version of Safari for Windows is 5.1.7, but some of the CSS tags that you are using require Safari 7.0. One example is the box-shadow for the #wrapper element. This is why the website does not display correctly in the Windows version of Safari.
Source: http://caniuse.com/#search=webkit-box-shadow.
It is rumored that Apple has dropped development for Safari on Windows. You will probably want to decide what legacy version of Safari that the website will support. If you are planning on using features of CSS3, then you will want to test the website in a later version of the Safari browser, available on the OSX platform.
How do i change the browser mode using code
I have tried
But this only changes the document type. By default my page goes to ie8 compat view. I want it to render in ie8. The alignment is correct only in ie8 view.
Your web development is done in a standard (W3C), so it only works in internet explorer 8 (obsolete). Use ie8 is not the same as using the compatibility view for ie8, the differences are very large, the engines are different and therefore the final views are also different.
Do not waste time developing for older browsers, use standards, learn from w3c.
I am doing some videos from Microsoft Virtual Academy and stumbled upon -ms-flex or so called Flexbox in css3.
I would like to implement a web app on html5 and css3 and this -ms-flex would help me very much.
Is this available in webkit or fennec based browsers on mobile devices?
If this can be used, are there any limitations of use?
Also are there any equivalent for those browser if that is not supported?
I found that : safari has webkit-box and maybe there are others for the rest of the browsers(Opera, Chrome and Mozilla or Dolphin)
Alright, extending from comment:
According to can_i_use, You can use flex box on many modern browsers with proper prefix:
WebKit browsers (Chrome, Safari, Android stocked browser, Chrome for Android, iOS Safari) with -webkit- prefix;
Gecko/Fennec browsers (Firefox, Firefox for Android) with -moz- prefix;
Trident browsers (IE 10) with -ms- prefix;
Presto browsers (Opera desktop) without prefix.
You should be able to find some tutorial/example on MDN, or (as usual) Google.
Do any browsers support the HTML5 context menu attribute?
This has been added to Firefox 8.
See this for an example of it working https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309
Right now, the contextmenu attribute is not supported by any browser version. According to caniuse.com it doesn't have support for any current browser versions (IE 9, Firefox 4, Safari 5, Chrome 11, Opera 11.1, or any mobile browsers - iOS, Opera, or Android). It is unknown if it will be supported in future versions.
It was discussed in April 2010 regarding adding it to Webkit. But it doesn't look like it's been added to the nightlies yet.
According to this wiki page for now there is no any popular layout engine except Firefox's Gecko that fully supports the menu element. Meanwhile, you can try some script solutions, like jQuery Context Menu Plugin.
You can use Modernizr for HTML5 feature detection.
It is working well here with Firefox 9.
Firefox 8 Aurora implements this feature. But unfortunately it doesn't seem to work for me now...
Pretty sure it's supported with a polyfill: https://github.com/medialize/jQuery-contextMenu