Support Forum » CSS

Acid 2 Test - Why are there still differences?

(3 posts)

  1. Robo_1
    Member

    I've got an annoying problem at the moment with Opera 9. It seems to be ignoring an overflow: hidden rule, and to be frank, Opera is second only to IE for giving me headaches when it comes to testing time, but I got to thinking, why is this?

    If Opera, Safari and Firefox have all passed the Acid 2 rendering test, then why are there still fairy huge discrepancies with how each browser renders css? I thought all these web standards and acid tests were supposed to eliminate this, and ensure that all browsers which have passed the test are rendering to the same spec.

    Often I find Safari and Firefox (and recently IE8) render everything the same, but Opera always seems to be the one singing out of tune, and it's getting on my nerves.

    Sorry for the rant, but I just don't understand why web standards haven't eliminated this situation, even when the vendors are supposedly building browsers to the required spec!!

    Posted: 1 year #

  2. JohnAllsopp
    Member

    Hi Robo,

    I wonder whether you might be able to post some screenshots to give a sense of exactly the problems you are seeing.

    A couple of points. OPera looking different is often cause they get it right ;-) Their standards support really is very veery good.

    Acid II is controversial among many in the industry - it's more a compliance test than a real world one (and it was developed by Håkon Lie, who as well as being the co-inventor of CSS, is also at Opera Software).

    The most important thing to realize is that browsers may well not render the same page identically - there are so many factors (most important of them is user preferences), but the other big factor is browser defaults (for things like margins of elements, font weights and sizes (for example headings) and so on)

    A good browser reset (like Eric Meyer's)

    http://meyerweb.com/eric/tools/css/reset/

    aims to override all these differences - if you start from here, you might get a lot closer. But, this is all generalities, if you show me some specific screenshots, or a page I can look at, that would help too!

    thanks

    john

    Posted: 1 year #

  3. Robo_1
    Member

    HI: John

    Thanks for the response.

    Well I had quite an interesting problem with firefox originally. There's a recognised bug with the browser, where it's rendering messes up when scrolling an iframe using a mootools/jsquery sliding animation. The whole screen around the iframe tears when the animation kicks in.

    As posted on the mozilla forums, the only known fix is to wrap the whole effect in a div of the same size, but set it's overflow to auto, this then hides the screen tear.

    For some reason Opera (and IE6&7 but I sorted them out with conditional comments) seemingly refused to recognise that the inner div was set to overflow hidden, and should be hiding the wider divs and iframe contained within. Instead the width of the inner elements were causing the overflow:auto div to show massive scroll bars, even though the content itself was still contained in the overflow: hidden div inside it. In Opera the effect did at least still work, whilst in IE the full content spilled out!

    I've since fixed the problem by using a nifty piece of javascript to target all gecko based browsers (http://github.com/rafaelp/css_browser_selector/tree/master) and as that's the browser with the inherent problem, I've decided it's better to fix that by setting the overflow status of the appropriate div to auto for gecko based browsers, whilst leaving it as visible for everything else. The site will be radically different with js turned off anyway, so there's no lasting consequences, even though I'm well aware that it's a practice best avoided.

    Thanks for the reset link too. Up to now I've just been using * {margin: 0; padding:0;} but I can see it goes quite a bit deeper than that, so thanks, I shall be updating accordingly :)

    If you're still interested in seeing code, then I'll happily send you the css in question.

    Posted: 1 year #

RSS feed for this topic

Reply

You must log in to post.

0.054 - 9 queries