Galleggiante troppo a destra

Question

Ho un'applicazione web per la gestione dei record che mostra un record master su uno schermo e gli editor AJAX incorporati dinamicamente in un div editor, che ho usato JQuery per rendere trascinabile. Funziona.

Anche se il div non è una finestra, ho pensato che potrebbe essere una buona idea farlo agire un po 'più come uno, quindi ho scritto un codice in " chiudi " pulsante. La struttura è simile alla seguente:

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

Editorbody ha dimensioni variabili a seconda di ciò che le persone stanno cercando di inserire.

La larghezza del draghandle è impostata al 100% dell'editor. Closebutton è impostato in CSS come float: right .

Il mio problema è che, in IE6 e IE7, il pulsante di chiusura galleggia troppo a destra. È sempre contro il bordo destro della finestra, indipendentemente da dove trascino il div editor in giro. In Firefox e Safari sembra che me lo aspettassi: la finestra è larga come l'editor e il pulsante di chiusura si trova nell'angolo in alto a destra.

Non sono particolarmente legato al float: giusto, sto solo cercando un modo per impostare il CSS che mi dia lo stesso risultato su tutti i browser. Qualche idea?

" Screenshots "

Ecco un modello di ciò che mi piacerebbe fare su jsbin (grazie, redsquare)

codice di esempio

Sto lavorando con informazioni legalmente sensibili, quindi non posso fornire schermate dell'app. Tuttavia, ho scattato alcuni scatti e bloccato il testo e l'interfaccia, lasciando solo la struttura della finestra.

come appare in IE7"> / a>

come appare in Firefox 3"> come appare in Firefox 3

Answer 1

Potresti prendere in considerazione la possibilità di utilizzare un JQuery Dialog invece dalla sua versione precedente e dagli stili funziona già multipiattaforma.

Answer 2

Per la cronaca, ciò che ha funzionato per risolvere questo problema è stato cambiare il CSS per closebutton da

float: right;

a

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

Questo produce risultati corretti in IE e con un po 'di riempimento per i campi del modulo interno non ci si deve preoccupare della sovrapposizione.

Answer 3

Gli hack CSS sono necessari a volte:

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

Answer 4

per gli hack css specifici di IE puoi fare qualcosa del tipo:

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

Assicurati solo che gli hack di asterisco e di sottolineatura siano posizionati secondo il normale (valido) stile css.