Session, let us discuss about the cross browser compatibility issues that occur when working with HTML and CSS. When you try when you work with HTML and CSS, you try to render in different browsers. Each and every browser will show the results in a different way. Of course, HTML elements will try to render it properly, but because of few properties of CSS, they will not be rendered as expected in our in the same manner across all the browsers. The reason is because of the following, that is, you are using different browser versions, different types of browsers, different computer types, depending upon the screen size, then depending upon the font sizes that you are using the HTML errors, when I talk about HTML errors, it depends upon the HTML version. Few HTML elements are supported or not supported in the older version because of Also, the output will not be rendered properly are rendered same in all the browsers.

So cross browser is a capacity of your webpage to support all the browsers. They have to be rendered properly across all the browsers. Is it possible? Yes, you need to follow certain rules and regulations. To solve the cross browser compatibility issue set out a few rules, which can be followed to solve the cross browser compatibility issue using proper doctype. When you're working with html5, you need to specify the doctype and will bracket exclamation mark doctype.

Html, only then it will be understood that html5 document few HTML elements are not supported in the older versions of HTML, like audio video, then Canvas then with a few CSS properties, all these are not supported. So you are support supposed to add this doctype HTML to specify that this is a html5 document. Next understanding CSS box model. Already we have learned what is the meaning of CSS box model. When you are trying to render a component in the browser, you are supposed to specify the width and height. In that scenario, you have to say you have to consider the margin the padding the border of the elements, so that the components are placed properly in the container.

If you don't considering if you are trying to use the width and height, they may overflow out of the container, so you have to have a good understanding about the CSS box model. Of course, about the floating and clearing part floating is to float the elements next to each other clearing is to make the element Come and sit in the default position. And also you must know how to work with CSS positioning, which we have learned. Next image resizing using CSS when you're working with images If you want the images to have exact height and width, it is always better to resize the image using it to outside CSS. First, resize the image with the exact height and width what you need, then add it to CSS part or add it to HTML. The reason is, if you are trying to change the size of an image, by specifying the height and width in CSS, your image, you will not get the exact quality of the image.

Next, CSS reset What is the meaning of the CSS reset? Each and every browser has their own default styling. So when you want to apply the styling, it will be rendered on top of the existing styling which is available in the browser in case of Chrome tries to give top and margin eight pixels. When you're trying to give your own CSS styling. It will be added to the existing HTML This may differ when you go into different browsers. So what do you need to do, you have to neutralize the CSS first, and then only have to start working on it, how to neutralize it, have a look over here, you have to select all the elements.

It's most of the HTML elements, which you're going to use, and specify marginally zero and padding and zero. It means you are telling to the browser don't give your default margin or your default padding. You start there assuming that the margin is zero and the padding is zero. so this will be accepted by all the browser's. Next ational commands in IE, when is Internet Explorer. When you are working with IE versions less than nine, you have the HTML elements and CSS are not supported properly.

So what you need to do is you are going to create separate CSS and JavaScript files, which will be supported by older versions of IE. That should be explained properly over here using this, that using the comments have a look on this. If is less than a less than or equal to you use a script which I have given. If it's dot js, you say a CSS which I am giving, ie hyphen fixed dot CSS. So you can add the conditional comment in your HTML page. Depending upon the user's choice the user is working with are using IE nine or any other browser, it is going to use a default JavaScript and CSS file.

It is going to work on a browser, ie browser less than version eight or nine, then automatically these two files will be picked up. Then when that specific CSS styling, depending upon the browser, you can specify the CSS styling. So there are a few prefix that are to be added with the styling. Suppose say you are adding your opacity. Depending upon the browser, you have to prefix the word like for Chrome and Safari, you have to prefix with kids. For Mozilla, to fix both thoroughfare have to fix that.

Again, it is transition that also I have given. So you have to go in some vendor specific styling. So if you're following these regulations in your HTML and CSS, you can solve the cross browser compatibility issues that occur while working with a web application around Fox.