Browser Compatibility Issues – Part V

Elements have different properties in different browsers. For example <ul> would have different margin and padding in IE from other browsers.

For this reason, many people have been using for long reset.css, which in turn resets all the property values which will return the values

ul {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}

This approach, though being useful, I did not always like using. I would rather reset my own properties for the element I see behaving differently or better style it right away.

A newer way for having your elements react similarly on different browsers is by using normalize.css , though this one is more HTML5 focused, and this is where the web is going if not there already..

The advantages would be mainly that it preserves some of the defaults which may be useful and not inconsistent with browsers. This is handy rather than resetting everything to zeros. With this being said, you will have more control over your elements styling. It also corrects some bugs which are not corrected by CSS. Here’s a full of list of the advantages of using normalize.css.

Another reference on Best Practices:

https://speakerdeck.com/dmosher/so-you-want-to-be-a-front-end-engineer

Advertisements

Browser Compatibility Basics – Part I

With all the browsers we have today and the ones which are emerging as I am writing this post, it seems to me that the job of UI developers could be counted more than “it’s just HTML” cause it seriously can turn into nightmare at times.

Understanding the browser engines are as important when it comes to HTML/XHMTL as well as CSS and its IE hacksand the different box model which IE renders from all other browsers.

This being said, however one would still have to add some exceptions especially with those large websites where it is irrational to add IE CSS hack for every class property which is being added.

For this reason, well renowned large websites still resort to creating IE CSS files, or within the same CSS file add a different class for the body which will make all the elements inheriting from it behave similarly.

Here’s the way it’s being added:

<!–[if lte IE 6]><body class="news ie"><![endif]–>
<!–[if IE 7]><body class="news ie7″><![endif]–>
<!–[if IE 8]><body class="news ie8″><![endif]–>
<!–[if !IE]>–><body class="news"><!–<![endif]–>

Albeit, one should know that most of the IE browser issues could be solved by using a reset CSS (CSS Tools: Reset CSS and CSS Tip #1: Resetting Your Styles with CSS Reset) before starting including other CSS files. The reset is advised to be included in a separate CSS file and a good read on that would be here: Killer Collection of CSS Resets. Though some would disagree with that making mention that default browser CSS actually make sense and was made for a purpose and rather designers should use well crafted CSSs to address different browser issues. Here a good read for such an argument: Should You Reset Your CSS?

Browser issues are many anyways and they are the main limitation for our restraint at least where I work for going on HTML5. There are countless of articles on this..

IE7 Absolute Positioning

So I think there should be a dedicated blog for all the IE7 ‘misconduct’. I work with a company that puts emphasis on cross-browser compatibility starting with IE7.

Now lots of issues are there with IE7. One of them is the absolute positioned div within a relative position div. The child div often flies outside of its container.

Reason: (at least as I assume:) is that it is not knowing where to be placed even though absolutely positioned within the container.

Solution: child div which is absolutely positioned has to have both positioning properties of (left or right) and (top or bottom)

Example:

   <div style="position:relative;border:1px solid #000;">
       <div style="position:absolute;bottom:10px;"> submit button </div>
   </div>

Image

As you can see the submit button is flying outside of the container itself

Example resolved: 

    <div> style="position:relative;border:1px solid #000;">
        <div style="position:absolute;bottom:10px;right:10px;> submit button </div>
    </div>

Image