Thursday 18 March 2010

Client - cross browser testing issues

I've had to tackle a few minimal Internet Explorer bugs, but this time, Internet Explorer (no doubt through a fault) is rendering text correctly whilst the others (Firefox, Chrome, Opera) do not.

How I want it to look:


How it shouldn't look:


What is strange is that this unordered list works on other pages. I have checked and I believe that it is an issue to do with
  • not wrapping?


  • SOLVED:

    I managed to overcome this problem by removing the float:left on the
      and adding a big margin-left so that it clears the images that are a consistent feature on most pages.

    ------------------

    Elsewhere, Internet Explorer 7 has been playing up, true to form.


    The padding or height of the showreel was being ignored. This was easily fixed with a conditional styling statement at the top of the page.

    -----------------------

    The shadow effect that I have applied around the outside of the master div is not completing at the bottom of the page's content. Instead it runs off the bottom of the screen.


    I managed to get it so the bottom shadow is displayed through informing IE7 to impose margin-bottom:0px on the sideshadows. The problem lies in the fact that I can't set a strict height for the side shadows as they expand with the content on the page. Overflow:hidden doesn't work.


    Out of frustration, and with regret, I have had to turn off the shadows for IE7.

    --------------------

    Lastly, IE7 is clipping longer sections of the custom font text found in the navigation bar.


    If you look you can see it on foot health and foot health tips. I attempted to fix this by increasing the width of the line, increasing the padding and altering the word-spacing. The problem lies in the fact that SIFR reproduces text in the same size area that the default font, in this case Arial takes up.

    After trying out a number of the Javascript options, I had not made any progress. Altering the styling in one place means it disrupts the rest of the browsers.

    Fortunately the documentation page for sifr3 proved quite detailed in allowing slight adjustments. After trying tuneWidth, fitExactly and a few others, unsuccessfully, I tried letter-spacing, combined with tuneWidth and have managed to find an inbetween that fits both IE7 et al. Phew.

    --------------

    Ultimately this all signifies the benefits people can get from having the latest browser version.

    @

    No comments: