Question

I have designed some popup moving menu with JQuery, it looks perfekt in webkit browsers, but i have one problem in mozilla, when i move my popup window, layout of some components in this window changes! For example button add changes from: alt text http://img697.imageshack.us/img697/5973/capture2fw.jpg to: alt text http://img685.imageshack.us/img685/8836/capturerl.jpg or to: alt text http://img695.imageshack.us/img695/2971/capture3ta.jpg , and it’s absolutly random. What can it be? This image is in span:

<span class="sw_link_add"></span>
.sw_link_add {
   background:url("/img/confirm_new.png") no-repeat scroll right center transparent;
   cursor:pointer;
   padding-right:30px;
   padding-top:2px;
}

Answer 1

Is it a reason you use <span> instead of <img>? I have experienced problems controlling height and width of <span> elements (or inline text elements in general) where the content may give you unwanted trouble (even when content is empty). Things like line height, font size etc. can make the height unpredictable.

You could try experimenting with different font-sizes and line-heights .