ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software

How to make a website browser compatible?

Updated on January 25, 2017

Browser compatibility is not a difficult thing to achieve and this can be done in all browsers, yes all browsers, including Internet Explorer. If the proper technique is applied, that is proper HTML structure and CSS rules used for web development, browser compatibility can be easily accomplished and there will be no need to write a separate style sheet for IE.

The technique, which I am going to share with you, will ensure that your site is compatible in all the major browsers including IE8 and above! This technique involves creating a proper layout that will handle all HTML elements.

Source

INTRO

The HTML elements, which contain the website content are responsible for sizing and arranging itself based on the rest of the surrounding elements, the HTML structure, the CSS rules applied to it and the browser being used. Most of all, the parent element plays a vital role in telling its children element how they should behave. But this is only possible if the right layout has been applied to the parent element as well.

Certain html tags will have a default layout and this helps the tags to arrange and resize the content placed inside of them.

- <html>
- <body>
- <p>
- <hr>
- <table>
- <h1> - <h6>

These are some of the tags that come with a default block layout. The CSS property for this is display:block. This is the rule, which keeps certain elements in check, arranging and sizing them as required, without the developer having to worry about writing extra code, unless required.

Okay, enough of the intro, it is now time to move on towards the important part, how to code a layout using proper HTML structure and CSS rules. There are different types of techniques, which are used, and I am going to explain each of them one by one.

DISPLAY PROPERTIES

A display property specifies how an element is to be displayed, how it will be positioned, the amount of space it will take etc. I am going to discuss about two types of Display Properties and these are:

- display:block
- display:inline-block

Display:Block

This block level element is responsible for showing an element on a new line. No matter how much content is available inside that element, it takes the full available width. Below is an example of <h1> - <h6> html tags that have a display block layout by default and occupy a whole row for themselves

Source

Display:Inline-Block

This is an inline element, which does not posses the ability to occupy a complete space. Instead it only keeps to itself without occupying the whole row and takes that amount of width, which is required by the element and makes sure that it adjusts itself properly. A common example is the anchor tag.

FLOATING

There are two types of floats:

- float left
- float right

By the name it is easy to understand what this type layout is capable of. An important thing to keep in mind is that this floating works best when a specific width is defined. If the width is not given then it will occupy the whole space, the behavior will be similar to that of a non-floating element, such as the heading tags described above. But the position of a floating element will change depending on the layout of the rest of the HTML elements because by default, the float is not produced to work in exactly the same way as display:block.

Floats are one of the common CSS rules used to set the layout of the entire site. Most of the elements used on a webpage are handled using floats because of its ability to set an element to the left or to the right. Unfortunately, due to the lack of understanding, many developers blame float for causing readability and usability issues because it floats the content here and there, making it difficult to control but at the same time it is not possible to develop a site without it. The problem, however, is not with the floats; it is with the lack of knowledge on how to use this useful property.

The word “float” means that without a proper container, the element will float to the left and right, adjusting itself to where it seems fit. In order to fix this, the clear property is used to control the floating elements, however, a more professional approach is to use another layout technique named overflow:hidden, which will be discussed in detail next.

OVERFLOW HIDDEN

This is the mother of all layouts and I mean it with all my heart! This CSS property is the one with which I am able to achieve 100% browser compatibility in all the major browsers including IE8 plus. I will provide step by step explanation on how to use overflow:hidden.

Step1 - Understanding The Need of Overflow:hidden.

One thing which you should realize is that nowadays, the structure of the HTML is created using divs not tables and div tags, by default, do not come with a block layout and therefore, is helpless and cannot organize itself and the contents within it. So, every div tag needs to be assigned a layout property via CSS and this is overflow:hidden. By adding overflow:hidden, the div tag, takes the form of a parent container, inside which other elements can be easily arranged such as floating elements, display:inline etc.

Step 2: How To Use It

You just have to make sure that this layout technique has been properly applied to the parent section.

From the above diagram it can be clear how the floats are controlled by the parent div. One element is floated to the left, the other to the right and the parent div is assigned the CSS rule overflow:hidden. Now, the children elements know where they belong and how they should be position and displayed on a webpage.

W3C VALIDATION

Every website needs to be w3c valid. This is very important and will help in browser compatibility.
When we say that our site is w3c valid, this means that there are no syntax errors and the code which we have written is 100% correct.

There are two types of validation which have to be performed.

Markup Validation:
Tells us if the html code/markup which we have written is correct or not. The html is the root of the website, if our base is not strong then our site will fall.

CSS Validation:
CSS also plays an important role in browser compatibility and is responsible for making our site beautiful and enhances the UI.

Click here to view the w3c Validator free online tool and test if your website passes the standard or not.

I will admit that Internet Explorer is not that bright when compared to other browsers. Think of IE as a child which needs to be spoon fed in order to understand the structure of the site, whereas, the rest of the browsers do not require such type of guidance. You just need one thing in order to make a website browser compatible and that is applying the proper layout. This technique is actually quite simple and easy to implement once you are able to grasp the idea.

So, in order to conclude, layout is basically creating a parent container, which will hold the child elements. In this way, they will know where they have to be positioned and will not scramble here and there.

Comments

    0 of 8192 characters used
    Post Comment

    • MuhammadAmeen89 profile image
      Author

      Muhammad Ameen Sheikh 6 months ago from Lahore, Pakistan

      @Alessio Ganci , I took your advice and was finally able to take some time out and update this hub. I have mentioned about the w3c validation tools and why it is important. :)

    • Alessio Ganci profile image

      Alessio Ganci 12 months ago from Italy

      Good hub. I also add, as a general suggestion, the one of checking HTML code is correct under W3C standards. A perfect HTML code helps a site to be correctly shown by all browsers.