With the launch of the new ireckon.com website and with most sites come problems with different browsers interpreting the code behind a website differently. Whilst most users view websites in Internet Explorer 7 and a high percentage in Internet Explorer 6, there is a certain percentage that view websites on Macs' in Safari or in Windows on FireFox or Opera (two alternatives to Internet Explorer).
This variety of browsers can cause a range errors in websites, from as small as different size fonts, to images displaying in different places on the page and/or elements displayed behind other elements.
Whilst most problems can be fixed with solid simple coding, some problems require what we call a "hack". These are something we try and use as little as possible, but as sites become more and more complex with advances in website technology, the older browsers like IE 6 and evermore so IE 7, these hack's become more and more useful.
The one hack that we find rules all other hack's consists of a few simple lines of CSS (see below for an example). As browsers interpret the same CSS differently this hack can be used to bring the browsers back into line. Below I have a simple example of how we use the hack.
Example
One of the most common problems we have is that Internet Explorer and FireFox interpret borders differently. Fox example, Internet Explorer will put a border on the index of a table, div or whatever tag you define a border on. While FireFox will put the border outside the table, div etc. While both are correct and both work just fine, this poses a problem when you have a website that is a certain size (down to the pixel). This 1px difference from the way a border is interpreted can throw out the whole layout of a website.
Below is an example of how we can set different widths of divs to fix the problem.
First off we define the CSS that will control the element in FireFox:
width: 150px !important;
Second we define the width of the element in IE 6:
width: 50px;
and thirdly we define it for IE 7:
*:first-child+html .examplediv {
width: 100px !important;
}
So all together this would look like the following:
.examplediv {
width: 150px !important;
width: 50px;
}
*:first-child+html .examplediv {
width: 100px !important;
}
FireFox would have a div width of 150px, Internet Explorer 6 would have a div width of 50px and Internet Explorer 7 would have a div width of 100px.
Whilst this is quite a simple example, this little bit of CSS can solve many a mind-bending problem.
Although, just for reference, the problem with the borders being interpreted differently in browsers can also be solve by defining the correct DOCTYPE.
About Erin
