0

For whatever reason, the most simplest of styling fails to work at this point. FF31.0.1 works fine, Chrome works fine, IE11 works fine, but FF29.0.1 refuses to acknowledge this simple style.

See this for example:

http://twitchplayspokemon.org/

Next to the larger images, there should be smaller sprites next to them. People are reporting cases like this: https://i.stack.imgur.com/UQCWY.png

The <td> that contains both images is styled with position: relative; whilst the second image is a position: absolute; bottom: 0; right: 0;. Why does this not work?

Mave
  • 2,413
  • 3
  • 28
  • 54

1 Answers1

1

You should not use the CSS position property with table cells. I'd suggest either not using tables or not depending on the relative positioning.

Another option is to fill the table cell with a relatively positioned <div/> tag that can then work with absolutely positioned child elements.

macguru2000
  • 2,042
  • 2
  • 18
  • 27
  • I guess you could if you set their `display:block` but there'd be no point in using a table in the first place, indeed... – webketje May 29 '14 at 22:26
  • 1
    I'm pretty sure that would just introduce a world of hurt. Especially if the wrapping element does not have a display of block too. – macguru2000 May 29 '14 at 22:31
  • As you can see, there is absolutely no way to not use a table. It's silly that you can't have positioning, or at least absolute, in a table element. Other browsers surpass the spec, and Firefox does too starting from either 30.0 or 31.0. – Mave May 31 '14 at 10:18