Blog

We had stumbled into the trap of browser compatibility. There was a problem with our main body of the website, we wanted a specific effect, as we were replicating the exact layout of the website that we were updating. The desired effect was one of a purple rectangle, inside that, a white rectangle, slightly smaller, and inside that, another purple rectangle to be the main body content, once again, slightly smaller. To achieve this look we created the first purple rectangle, then another purple rectangle, smaller than the first with a white border. To do this, we used this kind of layout:

<main>                                            //This is a wrapper to ensure that the content stays the desire width

    <div>                                   //This is the divider used for the main background

        <section>                //This is the second rectangle divider with the white border

        </section>

    </div>

</main>

There was, however a problem, that can only be described by “The page looks broken”, the borders were acting strange, margins were not taken into account, and the proportions were all off.

We were taken down a few infuriating routes trying to fix this problem, first of all, we thought that the widths must not be correct, therefore causing the layout to become misshaped and unattractive, we tinkered with the developer tools to no avail. Modifying widths, heights, margins, padding, anything we could think of to try and get our website to work.

We then took the approach that the elements were in the wrong position, and spent some time rearranging elements, once again this was to no avail.

Finally, after much discussion and head scratching we decided to play with the classes that we have applied to each of the element; we had applied a class called “layer”:

This class had been applied to all HTML5 elements, other than the main tag, and due to the display:block CSS, it was creating the effect that it should, however due to the absence of this class on the main tag, the tag (for some reason unknown to us) was not displaying as a block, but when the class was applied, the element went back to behaving as expected, as it was behaving on EVERY other browser, other than Internet Explorer. When we discovered the problem and fixed it, we were left with a feeling of “That was so simple, why didn’t we see that originally”, that is a feeling we’ve been experiencing quite a lot during the first few weeks of our adventure into becoming software developers, there are so many methods for doing one thing, and so many variables that can effect problems.

For something that seemed so simple, it took quite a lot of troubleshooting to find out and discover the cause, then fix the problem. We realise that browser compatibility is a big part of the web development world, and now with our first practical example of how browser compatibility can harm your developments, we hope we encounter it as little as possible, although, that is somewhat of an improbable idea.

Libraries like jQuery can and will help with browser compatibility, all the way down to IE 6, which will be a tremendous help for Ben and I.