• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Button oben rechts ausrichten

Status
Für weitere Antworten geschlossen.

Rodney2k

Neues Mitglied
Hallo Leute,

ich möchte einen normalen HTML-Button oben rechts in meinem Fieldset ausrichten. Dazu positioniere ich das Fieldset mit position: relative;

Der Button wird dann per
.MyButton { position: absolute; top: 10px; right: 10px; }
ausgerichtet, was auch ungefähr funktioniert.

Der IE (7) zeigt ihn dann ungefähr richtig in der oberen, rechten Ecke an, ohne den Border des fieldsets zu berühren.
Der Firefox (2) zeigt ihn aber völlig verschoben ein ganzes Stück tiefer und weiter links an.

Wie kommt es zu dieser unterschiedlichen Interpretierung?
 
Werbung:
Vielleicht hast du nicht bedacht, daß .MyButton auch ein <input>-Element ist. Es könnte Styles enthalten, die diesem Element zugeordnet sind.
Du könntest in den anderen Elementen auch float mit verkehrten clear verwendet haben. Oder die anderen Elemente sind auch absolute positioniert.

Da es im IE7 nach deinen Wünschen angezeigt wird, tippe ich auf ein Clearfehler.

Ansonsten müsstest du das Formular und das css für alle darin enthaltenen Elemente zeigen.
 
Ja, ich habe bedacht, dass es ein Input ist, dafür sind keine Styles angegeben. Einen Clearing-Fehler kann ich ebenfalls an dieser Stelle ausschließen.

Wie sieht denn ein üblicher Hack aus, damit ich für den IE und Mozilla verschiedene Werte festlegen kann?
 
Werbung:
fieldset position

Hi rodney,
eigentlich lässt sich von fieldset absolute positionieren:
html:
Code:
<form action="#" method="post" id="form">
  <fieldset>
<label>input 1</label><input type="text" name="#" />
<label>input 2</label><input type="text" name="#" />
<input type="submit" name="#" id="submit" />
</fieldset>
</form>
css:
Code:
  * {
margin: 0;
padding: 0;
}
#form fieldset {
position: relative;
height: 100px;
}
#submit {
position: absolute;
top: 10px;
right: 10px;
}
Anders sieht es aus, wenn du auch <legend> gesetzt hast.
Dann stimmt der Bezugspunkt von <fieldset> nicht mehr einheitlich.

Eine Idee währe ein <div> um alle Elemente außer <legend> zu ziehen und von diesem absolute positionieren.
html:
Code:
<form action="#" method="post" id="form">
<fieldset>
<legend>Formular</legend>
<div class="hilfsbox">
<label>input 1</label><input type="text" name="#" />
<label>input 2</label><input type="text" name="#" />
<input type="submit" name="#" id="submit" />
</div>
</fieldset>
</form>
css:
Code:
  * {
margin: 0;
padding: 0;
}
#form fieldset {
position: relative;
height: 100px;
}
#submit {
position: absolute;
top: 0px;
right: 10px;
}
.hilfsbox {
position: relative;
}
Wie sieht denn ein üblicher Hack aus, damit ich für den IE und Mozilla verschiedene Werte festlegen kann?
Mit einzelnen Werten für diverse Browser würde ich mich da nicht verfriemeln.

Ansonsten gibt es den sogenannten Sternchenhack für IE 5-6:
Code:
* html #form .submit {
}
Für IE7:
Code:
* +html #form .submit {
}
 
Danke für deinen ausführlichen Post ;Jump
Die nicht mehr einheitliche Ausrichtung bei Verwendung eines legend-Tags war der Knackpunkt.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben