Opera: Integer Percentages Bug

Testcase: Dirk Jesse [26.03.08 ] highresolution.info

Since years now, Opera (all versions) has an annoying bug in its interpretation of percentage values for element widths. Let's take a look into W3C's Specification for CSS2 from 1998.

In chapter 4.3.1 <integer> and <number> values are defined:

Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign.

For percentage values, the specification tells us in chapter 4.3.3:

The format of a percentage value (denoted by <percentage> in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a <number> immediately followed by '%'.

Bug Description

Next to this paragraph there are two floating DIV containers. The left one has a width of 66.666%, the right one has a width of 33.333%. As percentage values are real numbers, there should be no gap between them. Opera however, cuts the digits behind the dot and handles them as integer values (66% and 33%). That's why in Opera you will see a gap with exactly 1% witdh between both containers.

Live Example

View this website in Opera browser to see the gap.

#left {
  float: left;
  
width: 66.666%;
  ...
}