Flotando demasiado a la derecha

Question

Tengo una aplicación web de administración de registros que muestra un registro maestro en una pantalla y los editores AJAX construidos dinámicamente en un div de editor, que he usado JQuery para hacer que se pueda arrastrar. Eso funciona.

Aunque el div no es una ventana, pensé que podría ser una buena idea hacer que actúe un poco más como uno, así que codifiqué un "cierre". botón. La estructura se ve así:

<div id="editor">
  <div id="draghandle" />
  <div id="closebutton" />
  <div id="editorbody" />
</div>

Editorbody es de dimensión variable dependiendo de lo que la gente esté intentando ingresar.

El ancho de Draghandle se establece al 100% del editor. Closebutton se configura en CSS como float: right .

Mi problema es que, en IE6 e IE7, el botón de cierre flota demasiado a la derecha. Siempre está contra el borde derecho de la ventana, sin importar a dónde arrastre el editor div. En Firefox y Safari, parece que esperaba: la ventana es tan ancha como el cuerpo del editor y el botón de cierre se encuentra en la esquina superior derecha.

No estoy particularmente apegado a flotante: correcto, solo estoy buscando una manera de configurar el CSS que me dará el mismo resultado en todos los navegadores. ¿Alguna idea?

" Capturas de pantalla "

Aquí hay una maqueta de lo que me gustaría hacer en jsbin (gracias, redsquare)

código de muestra

Estoy trabajando con información legalmente confidencial, por lo que no puedo proporcionar capturas de pantalla de la aplicación. Sin embargo, tomé algunas fotos y bloqueé el texto y la interfaz, dejando solo la estructura de la ventana.

cómo se ve en IE7"> / a>

cómo se ve en Firefox 3

Answer 1

Es posible que desee considerar simplemente usar un JQuery Dialog en lugar de su prefabricado y los estilos ya funciona multiplataforma.

Answer 2

Para el registro, lo que funcionó para solucionar esto fue cambiar el CSS para closebutton de

float: right;

a

position: absolute;
right: 5px;
text-align: right;

Esto produce resultados adecuados en IE, y con un poco de relleno para los campos de formulario internos no hay que preocuparse por la superposición.

Answer 3

A veces se necesitan hacks CSS:

* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here

Answer 4

para hacks css específicos de IE, puede hacer algo como:

#divId {    
   margin-right: 0; /*Normal styles for all browsers*/    
  *margin-right: 100px; /*The asterisk allows only for IE6 AND IE7 to read this*/        
  _margin-right: 90px; /*The underscore allows only IE6 to read this style*/    
}

Solo asegúrese de que los hacks de asterisco y guión bajo se coloquen después del estilo CSS (válido) normal.