Flottant trop loin à droite

Question

J'ai une application Web de gestion des enregistrements qui affiche une fiche sur un seul écran et AJAX intègre de manière dynamique des éditeurs intégrés dans une division d'éditeur, que JQuery a configurée pour pouvoir être déplacée. Cela fonctionne.

Même si la div n'est pas une fenêtre, j'ai pensé que ce serait peut-être une bonne idée de la faire ressembler un peu plus à une seule, alors j'ai codé dans un "fermer" bouton. La structure ressemble à ceci:

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

Editorbody est une dimension variable en fonction de ce que les gens essaient d'entrer.

La largeur du draghandle est fixée à 100% de l'éditeur. Closebutton est défini dans CSS comme float: right .

Mon problème est que, dans IE6 et IE7, le bouton de fermeture flotte trop à droite. C'est toujours contre le bord droit de la fenêtre, peu importe où je fais glisser l'éditeur div. Sous Firefox et Safari, il semble que je l’attende - la fenêtre est aussi large que editorbody et closebutton se trouve dans le coin supérieur droit.

Je ne suis pas particulièrement attaché à float: oui, je cherche simplement un moyen de configurer le code CSS qui me donnera le même résultat sur tous les navigateurs. Des idées?

"Captures d'écran"

Voici une maquette de ce que j'aimerais faire sur jsbin (merci, redsquare)

exemple de code

Je travaille avec des informations juridiquement sensibles, je ne peux donc pas fournir de captures d'écran de l'application. J'ai toutefois pris des photos et bloqué le texte et l'interface, ne laissant que la structure de la fenêtre.

son apparence dans IE7

à quoi ça ressemble dans firefox 3

Answer 1

Vous voudrez peut-être simplement utiliser un JQuery Dialog à la place, ainsi que les styles travaille déjà sur plusieurs plates-formes.

Answer 2

Pour mémoire, ce qui a fonctionné pour résoudre ce problème a été de changer le CSS pour closebutton de

.

float: right;

à

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

Cela produit des résultats corrects dans IE, et avec un peu de remplissage pour les champs de formulaire internes, vous évitez les chevauchements.

Answer 3

Des piratages CSS sont parfois nécessaires:

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

Answer 4

pour les hacks css spécifiques à IE, vous pouvez faire quelque chose comme:

#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*/    
}

Assurez-vous simplement que l'astérisque et les hacks soulignés sont placés après le style CSS normal (valide).