web design & development explained

During the time when Internet Explorer was the only browser widely available thanks to Microsoft’s Windows systems some smart people created Cascade Style Sheet which helps us define the looks of the website without any hassle. Since then CSS went through a lot of improvements leading to new abilities, optimizing its structure and giving designers new possibilities. Then the market spawned open-source browsers like Firefox or Safari and the revolutions begun.

Couple of years back CSS as standard was focused on IE as a major browser. Developers of IE were never very eager to implement changes, that’s why IE lost its position on the market and that is why loads of other programmers and developers came into thinking about making the web a safer and better looking place. The first step was to definitely tighten up the relationship between CSS and browser allowing the browsing engine to flexibly interpret CSS structure and render it on the screen exactly how the designer wanted it to. Thanks to creators of WebKit rendering engine Apple achived the compatibility goal within juts few months by creating Safari. Not long after Mozilla Foundation improved their Gecko browsing engine and became known as a web developer’s most friendly browser (great compatibility in rendering and loads of dev-tools available through add-ons).

Now we have even more browsers, but the idea behind the compatibility is the same. The only exception is IE. Why? CSS was defined to help designers achieve desired results while building webpages. The main priority is always for the web page to look the same  in any browser, but it seems that IE dev-team would like to show the web as it should like through the window of their browser. They use CSS freely interpreting values defined within the style-sheets which basically leads to some minor and major glitches, issues and so on.

Proof #1: Forms rendering.
Firefox and Safari are the only two browsers that can display properly CSS styled forms. After adding background image for to some of the objects IE is going crazy with vertical positioning. While in Firefox and WebKit-based browsers (Chrome and Safari) the forms are displayed accurately and all the elements are in line, while the IE likes to favor input-text elements and puts them couple of pixels above the line-height (IE7: 10px) or slightly below (IE8: 3-4px;). In IE8 though there is a slight improvement, but nothing really worth writing about. You won’t be able to position these elements even by adding margins and padding as putting those parameters leads to moving the whole block down or up.

Proof #2: Floats & Margins.
Everything would be fine if not some kind of a stupid error in IE6 that doubles all the floating margins used to push the floated element from the edge of the container. Usually treated by using padding and margins at the same time to fill the space properly, but in IE7 & IE8 this has been already fixed.

Browsers and different CSS selectors and elements.
Even though W3C is working on CSS3 there are still browser which are not fully compliant with CSS2.1 standards. IE6 is the complete disgrace for Microsoft, it has problems even with :hover and :active parameters for links! The two most standard-compliant browsers at the moment are Firefox 3.5 (beta) and Opera 10. No wonder that it’s hard to get your designs running smoothly while you have to struggle with making your website cross-browser compatible.

Summing it all up you’ll never find a perfect and totally supportive browser for CSS. But the last couple of years proved that we’re heading in the right direction, as Firefox, Safari and Chrome are taking over the web. The only thing web designers should be worry about is that you can never be sure of your websites to look and work in the same way in two different browsers. This world of uncertainty is making our jobs difficult but it proves that we can take pride in what we do because of the knowledge we have.

Bookmark it!