Saturday, June 20, 2015

Cross Browser CSS coding

11:43 PM Posted by Anuradha Welivita No comments
Okay now have coded the majority of the Main and Q/A pages of AskFedora which you can view here on Openshift: And one of the problems that I faced is that the things that show well in Google Chrome does show well in Firefox as well as in Internet Explorer web browsers. According to the articles that I have referred it is quite a difficult task to achieve the same beautiful and intuitive design across all the browsers. So, cross browser compatibility would require some more trouble :)

Here is what I got to know from my small research about cross browser compatibility. There are some small tips on CSS that you should follow if you are get a cross browser compatible web site. 

Understand the CSS box model

The CSS box model works same across all the browsers (but except for some  versions of Internet Explorer) which is a good thing. Basically box model talks about the layout. It has 4 parts which are:
    • Margin
    • Border
    • Padding
    • Content


The above is an image which describes the CSS box model. When we consider a particular block-level element it has the 4 properties of margin, border, padding and content. The width that we specify by the width property of CSS is the width of the content area and unless we specify a fixed a height, the height of the element automatically gets adjusted according to the content. And also we can specify padding, the width of the border and the width of the margin around the element. The padding and the margin areas are transparent. 

An example of setting all the above properties in a div element is stated below:

    width: 200px;
    padding: 5px;
    border: 3px red;
    margin: 2px;

In most of the browsers the total width of the element is calculated as:
total width = width + left padding + right padding + left border + right border + left margin + right margin
and the total height is calculated as:
total height = height + top padding + bottom padding + top border + bottom border + top margin + right margin

The issue with cross browser compatibility when it comes to the CSS box model is that in Internet Explorer 8 and its earlier versions, it includes padding and width of the border also in the width property. 

How to overcome this problem?

Well this has a simple fix which is including <!DOCTYPE html> to the top of the page. :)

Some important tips to remember when dealing with the CSS box model
  • If the width of the block element is set to 100%, it should not contain any borders, padding or margin because if so it will overflow its parent.
  • Layout problems can occur due to collapsing of vertically-adjacent margins of two separate elements.
  • You need to have an understanding about the difference between fixed, relative and absolute positioning of elements. 
    • Fixed positioning
      • Fixed positioning position the element relative to the browser window and the position of the element does not change when even when scrolling.
                                    position: fixed;
                                    top: 10px;
                                    left: 5px;
                              Here the top and left positions are calculated relative to the browser window.
    • Relative postioning
      •  An element with relative positioning is positioned relative to its normal position. 
                                    position: relative;
                                    left: -10px;
                            In the above code the element is moved to the left by 10px from its normal position.
    • Absolute positioning
      • Absolute positioning position an element with respect to its first parent element which has a position other than static. If there is no such parent element then the containing block will be <html>
                                    position: absolute;
                                    left: 10px;
                                    top: 5px;

Understand the difference between Block and Inline

Every HTML elements has default display property which is either block or inline. Block-level elements are the elements that start on a new line and expand to take up the full width of its parent element. Hence we do not need to set its width to 100%.

Examples of Block-level elements are: <div>, <p>, <form> etc.

The inline elements do not start on a new line and only take up the necessary width and they will just ignore the width and height settings. It's the Inline elements that can be aligned with the vertical-align property and not the block elements. The Inline elements usually has a small space below them to accommodate letters like letter 'g'. And if the Inline element is floated it will become a block element. 

Examples of Inline elements are: <span>, <a>, <img>

Understand the difference between Floating and Clearing

We can specify float by using either float: left or float: right. By doing so the element will float left or right until it hits the margin of the parent container or else another floated element. In order to get the other elements to float around the floated element, they should be either inline or floated in the same direction. 

                float: left;

An element which is cleared will not flow around a floated element and it will usually start from a new line below the floated element. 
                clear: both;

And when making a web site cross browser compatible it is always good to start from Internet Explorer because most of the things that works in Internet Explorer will work in other new browsers also. As I proceed I will further include more details about cross browser compatibility across different browsers.  


Post a Comment