Web Design Sydney

Ok found this bug while working on a project that required a scrolling content bar that wound up needing widths defined in the stylesheet greater then 32,767 px.

Some people will immediatly notice the 32,767 as the programatic max value for an ‘Integer’, which is exactly what the problem is. Opera for some reason, and it is completly alone here, as all other browsers even the dreaded Internet Explorer 6, can handle CSS values that exceed this limit. Opera will silently fail, throw no warning about it and ignore all styles that follow non integer numbers in your selector.

There was no way around this I could find to make it work in Opera, simply put.

Any number bigger then 32,767 for a value in CSS when displaying with Opera 10, will be ignored and cause all following styles in that selector to be dropped.

Heres an example.

div #myElement {
    position:absolute;
    height:500px;
    width:50000px; 
    background:#444;
    font-weight:bold;
}

The above code will cause the div ‘myElement’ to have no selectable width, and will never apply the background or font-weight properties!

Solutions

A bad solution

div #myElement {
    position:absolute;
    height:500px;
    background:#444;
    font-weight:bold;
    width:50000px; 
}

The div ‘myElement’ will now get all styles applied correctly up until it hits the width:50000px property. But since no styles are applied after it is encountered the div is styled with all your properties correctly except of course for a width value. The div will still have no width.

Correct solution

div #myElement {
    position:absolute;
    height:500px;
    background:#444;
    font-weight:bold;
    width:32000px; 
}

Now the div ‘myElement’ will be styled correctly and have a width property. Its no 50,000 pixels, but 32,000 which is a valid width in Opera, remember anything greater then 32,767 will fail. Should you need greater then 32,000 pixels of space in Opera, you may need to re-think your design, or go hassle the Opera development team.

Last I saw there were a couple bug reports if you knew what to search for, but nothing had been posted in reply. SO we can only hope that Opera know of the issue and are working to correct it. But in the meantime I’ve given you the power to detect and develop around this quite interesting bug.

Enjoy 🙂