#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    205
    Rep Power
    17

    Background-position issues with Opera 9.62


    I'm using background images on a <span> tag.

    Code:
    .thespan {
      display: -moz-inline-box;
      display: inline-block;
      height: 16px;
      width: 16px;
      margin: 2px;
      /* using longhand on purpose, since other classes override bits later */
      background-image: url(../img/iw_ds_sprite.gif);
      background-repeat: no-repeat;
      background-position: 0px 0px;
    }
    And already there's an issue. IE (even 6!) FF2 and 3, and Safari all do what I expect. However, Opera is off by about 40 pixels.

    There is a shell around the span - changing this shell's class makes the internal background-position change, like so:

    Code:
    .theshell .thespan {
      background-position: 0px -40px;
    }
    This actually works, except it doesn't. Opera, having been wrong in the first place, is now wrong by the same amount - it jumps to -80px.

    I've been pulling my hair out on this...I can't believe that it works in IE6 but not Opera!

    Any help is greatly appreciated.

    Tim
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    205
    Rep Power
    17
    One more tidbit -

    Adding to the frustration, Dragonfly (the built-in developer tool in Opera) shows that it is using the correct class and the correct value. It just then displays off by 40 pixels anyway.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    205
    Rep Power
    17
    Sigh.

    Nevermind. It wasn't a CSS issue at all. I edited the image in the GIMP, which somehow corrupted the image in a way that Opera doesn't like. Redoing the same edit in Fireworks, it's just fine.

    Tim

IMN logo majestic logo threadwatch logo seochat tools logo