Flutuante Too Far direito

Question

Eu tenho uma aplicação web de gestão de registro que exibe um registro mestre em uma tela e Ajaxes construído dinamicamente editores em um div editor, que eu usei JQuery para fazer draggable. Que funciona.

Mesmo que o div não é uma janela, eu pensei que poderia ser uma boa idéia para torná-lo agir um pouco mais como um, então eu codificado em um botão "fechar". Os olhares estrutura como esta:

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

Editorbody é variável de dimensão, dependendo do que as pessoas estão tentando entrar.

largura de Draghandle é fixado em 100% do editor. CloseButton está configurado em CSS como float:right.

Meu problema é que, no IE6 e IE7, o botão para fechar flutua muito longe direita. É sempre contra a borda direita da janela, não importa onde eu arrastar o div editor em torno de. No Firefox e Safari parece que eu esperava que - a janela é tão grande como editorbody e closebutton fica no canto superior direito

.

Eu não estou particularmente ligado a float: right, apenas procurando uma maneira de configurar o CSS que vai me dar o mesmo resultado em todos os navegadores. Alguma idéia?

"Screenshots"

Aqui está uma maquete do que eu gostaria de fazer em jsbin (graças, redsquare)

código de exemplo

Eu estou trabalhando com informações legalmente sensível então não posso fornecer capturas de tela do aplicativo. Tenho, no entanto, tomada alguns tiros e bloqueou o texto e interface, deixando apenas a estrutura de janela.

como olha no IE7

como olha no firefox 3

Answer 1

Você pode querer considerar apenas usando um JQuery diálogo vez desde a sua premade e os estilos já trabalham plataforma cruzada.

Answer 2

Para o registro, o que funcionou para corrigir isso foi mudando o CSS para closebutton de

float: right;

para

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

Isso produz resultados adequados no IE, e com um pouco de preenchimento para os campos do formulário internos não há nenhuma preocupação sobre sobreposição.

Answer 3

hacks CSS são necessários às vezes:

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

Answer 4

Para o IE hacks específica css você pode fazer 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*/    
}

Apenas certifique-se o asterisco e hacks sublinhado são colocados após o estilo css normal (válido).