Schwimmdock zu weit rechts

Question

Ich habe eine Record-Management Web-Anwendung, die einen Datensatz Master zeigt auf einem Bildschirm und AJAXes dynamisch erstellte Editoren in einen Editor div, die ich verwendet habe, JQuery ziehbar zu machen. Das funktioniert.

Auch wenn das div nicht ein Fenster ist, dachte ich, es könnte eine gute Idee sein, um es ein bisschen mehr wie ein machen zu handeln, so codierte ich in einem „Schließen“ -Knopf. Die Struktur sieht wie folgt aus:

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

Editorbody ist variabler Dimension je nachdem, was die Menschen zu geben versuchen.

Draghandle Breite wird auf 100% des Editor eingestellt. Schließen-Knopf wird in CSS als float:right eingerichtet.

Mein Problem ist, dass in IE6 und IE7, die Schließen-Schaltfläche zu weit rechts schwimmt. Es ist immer gegen den rechten Rand des Fensters, egal wo ich den Editor div ziehen um zu. In Firefox und Safari sieht es aus wie ich es erwartet - das Fenster so breit wie editorbody und Schließen-Knopf befindet sich in der rechten oberen Ecke

.

Ich bin nicht besonders angebracht schweben: rechts, nur für einen Weg suchen, um die CSS einrichten, die mir das gleiche Ergebnis in allen Browsern geben würde. Irgendwelche Ideen?

"Screenshots"

Hier ist ein Mock-up von dem, was ich auf jsbin tun würde (danke, redsquare)

Beispielcode

Ich arbeite mit rechtlich sensiblen Informationen, damit ich nicht Screenshots des App zur Verfügung stellen kann. Ich habe jedoch einige Aufnahmen gemacht und blockierte den Text und die Schnittstelle, nur die Fensterstruktur zu verlassen.

, wie es in IE7 sieht

, wie es in firefox sieht 3

Answer 1

Sie können nur mit einem JQuery Dialog statt, da seine premade und die Stile zu prüfen, bereits Cross-Plattform arbeiten.

Answer 2

Für das Protokoll, was dies zu beheben gearbeitet wurde die CSS für Schließen-Knopf aus

Ändern

float: right;

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

Die richtigen Ergebnisse in IE erzeugt, und mit einem kleinen Polster für die internen Formularfelder gibt es keine Sorge über Überlappung.

Answer 3

CSS-Hacks nötig ist, um manchmal:

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

Answer 4

für IE spezifische CSS-Hacks können Sie wie etwas tun:

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

So stellen Sie sicher, dass das Sternchen und unterstreichen Hacks nach dem normalen (gültigen) CSS-Stil gesetzt werden.