[Erledigt] margin: auto für input (type submit) wird im IE8 ignoriert

Squall · 06.10.2010, 12:35

Hallo Forum,

ich gebe mir heute mal wieder eine kleine Schlacht mit dem IE und scheine wohl zu verlieren.

Hab die dateien zum testen/debugen angehängt, da ich denke das Schnipsel hier nichts bringen. Aber keine Sorge, habe alles aufs wesentliche reduziert.

CSS und HTML sind valide (ausser -moz-radius & -webkit-radius)

Nun zum Problem:
Ich will dass der submit-button, genau so wie alles andere, zentriert steht. Geht auch überall (sogar IE7) ausser im IE8 da ist er nähmlich linksbündig und ich weiß einfach nicht mehr was ich machen soll.

Ist euch ein derartiges Problem mit dem submit button schon bekannt?
Gibt es Workarounds?
oder habe ich bloß irgendwas falsch bedacht/übersehen?

Danke & Gruß
Squall

eagle275 · 06.10.2010, 12:46

du weist dein margin-auto einem #loginFormACP-Element zu ...

aber laut SelfHTML hast du die Reihenfolge verdreht ...

input #loginFormACP sollte es wohl heißen, wenn ich das richtig gelesen habe

Asipak · 06.10.2010, 12:47

Hi, gib' dem Button eine feste Breite.

Squall · 06.10.2010, 13:05

@eagle
input #loginFormACP würde ein element beeinflussen das die id "loginFormACP" hat und im input liegt. Da der Input aber ein selbst-schließender-Tag ist kann ich mir dass schlecht vorstellen. Kannst du vielleicht den Link posten wo du das gelesen hast?

@asipak
Das versteht sogar der IE, allerdings ist der Button nicht immer gleich groß. Der Value ist variabel und somit könnte mal "senden" drin stehen und mal "Ich bin sicher dass ich dieses Formular senden möchte".

eagle275 · 06.10.2010, 13:13

selfhtml dazu :

Element#Name { CSS-Eigenschaft:Wert; ...}
Für Name einen Namen notieren.
Trifft auf HTML-Elemente mit <Element id="Name">...</Element> zu.
#Kopf trifft z.B. auf <div id="Kopf">...</div> zu.
Für Element ein HTML-Element wie z.B. h2 oder pre notieren.
p#Kopf trifft z.B. auf <p id="Kopf">...</p> zu, nicht aber auf <div id="Kopf">..</div>.

und für Asipaks vorschlag du kannst doch den Style direkt im Button nochmal leicht modifizieren - mE müsste ein style="width: xyzpx;" das erledigen - und die xyz Angabe könnte dein php_script dann von der Länge der Buttonbeschriftung ableiten (etwa strlen mal 8 + Leichter Aufschlag) und schon hättest du eine feste Breite für den Button und die passt sich trotzdem an

Squall · 06.10.2010, 15:23

Nachdem keiner einer bessere lösung weiß hab ich mir jetzt eine funktion geschrieben die jeden Buchstaben des worts prüft und den em-wert festlegt.

Ist zwar keine schöne Lösung aber Sie funzt erstmal (drecks IE)

Für die die es interessiert:

PHP-Code:

  function CalculateStringWidthInEm($string) {

    $counter = 0;

    while (strlen($string) > 0) {

        $sign = substr($string, 0, 1);

        switch($sign) {

            case 'i':

            case 'l':

                $counter += 0.35;

                break;

            case ' ':

                $counter += 0.45;

                break;

            case 'I':

            case 'j':

            case 'r':

                $counter += 0.5;

                break;

            case 'f':

                $counter += 0.55;

                break;

            case 'J':

            case 'L':

            case 'k':

            case 's':

            case 't':

            case 'x':

            case 'z':

                $counter += 0.65;

                break;

            case '1':

                $counter += 0.75;

                break;

            case 'A':

            case 'B':

            case 'C':

            case 'E':

            case 'F':

            case 'D':

            case 'G':

            case 'H':

            case 'K':

            case 'N':

            case 'P':

            case 'R':

            case 'S':

            case 'T':

            case 'U':

            case 'V':

            case 'X':

            case 'Y':

            case 'Z':

            case 'a':

            case 'b':

            case 'c':

            case 'd':

            case 'e':

            case 'g':

            case 'h':

            case 'n':

            case 'o':

            case 'p':

            case 'q':

            case 'u':

            case 'v':

            case 'y':

            case '0':

            case '2':

            case '3':

            case '4':

            case '5':

            case '6':

            case '7':

            case '8':

            case '9':

                $counter += 0.85;

                break;

            case 'O':

                $counter += 0.9;

                break;

            case 'Q':

                $counter += 0.95;

                break;

            case 'M':

            case 'm':

            case 'w':

            default :

                $counter += 1;

                break;

            case 'W':

                $counter += 1.15;

                break;

        }

        $string = substr($string, 1);

    }

    return $counter;

}

ChrisB · 07.10.2010, 13:20

Schöne Frickel-Lösung ... </sarc>

Ich würd' den Submit-Button ja einfach inline lassen, und per text-align:center im umgebenden Element ausrichten ...

Squall · 08.10.2010, 09:51

Zitat:

Zitat von ChrisB

Ich würd' den Submit-Button ja einfach inline lassen, und per text-align:center im umgebenden Element ausrichten ...

Funktioniert leider auch nicht beim IE8, aber danke

ChrisB · 08.10.2010, 14:06

Dann machst du was falsch ... ich hab's ausprobiert.

halskrause · 11.10.2010, 13:48

Ich löse sowas oft mit JavaScript...

Aber hier eine Alternatilösung:

PHP-Code:

  
#loginFormACP input[type=submit] {
    display: inline;
    margin: auto;
    margin-top: 15px;
}

#loginFormACP {
    position: relative;
    width: 300px;
    margin: auto;
    padding-top: 50px;
    text-align: center;
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
PHP dynamisches Formular: Input type abfragen	sdako	PHP Tipps 2010	10	05.10.2010 09:14
[Erledigt] input type image als variable senden	Capfly	PHP-Fortgeschrittene	21	22.07.2010 10:11
[Erledigt] Wert aus DB in input type radio lesen	feeet	PHP Tipps 2010	7	21.07.2010 15:23
Erhaltung der Eingaben bei input Type File	nieselfriem	PHP Tipps 2010	1	17.05.2010 19:46
[Erledigt] MySQL Link Resource in einer statischen Variablen speichern	Lenki	PHP-Fortgeschrittene	8	18.03.2010 16:37
[Erledigt] input type text und input type image in einer Linie	scherpa747	HTML, Usability und Barrierefreiheit	1	16.09.2009 12:02
[Erledigt] Zeilenumbruch im Input type text???	Squall	PHP Tipps 2009	12	16.04.2009 15:59
[Erledigt] input type file?	Sermon	PHP Tipps 2009	8	05.03.2009 19:17
input type text standart angewaehlt		HTML, Usability und Barrierefreiheit	4	19.02.2009 00:54
Wireshark SSL Handshake debugging-Handshake protokoll mittels PHP + Curl	brian johnson	Off-Topic Diskussionen	0	06.11.2008 11:54
HTML/CSS: Input: Button: Type=Image: Nur Submit moeglich?	SvenLittkowski	HTML, Usability und Barrierefreiheit	8	03.11.2007 00:45
[Erledigt] input type wird nicht korrekt gefüllt		PHP Tipps 2005-2	5	11.07.2005 12:55
input type per javascrpt ändern		HTML, Usability und Barrierefreiheit	3	01.05.2005 11:12
input + submit ?		HTML, Usability und Barrierefreiheit	9	27.02.2005 23:31


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.10.2010, 12:46
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	du weist dein margin-auto einem #loginFormACP-Element zu ... aber laut SelfHTML hast du die Reihenfolge verdreht ... input #loginFormACP sollte es wohl heißen, wenn ich das richtig gelesen habe

06.10.2010, 12:47
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.072	Hi, gib' dem Button eine feste Breite.

06.10.2010, 13:05
Squall Erfahrener Benutzer Registriert seit: 19.03.2009 Beiträge: 539 PHP-Kenntnisse: Fortgeschritten	@eagle input #loginFormACP würde ein element beeinflussen das die id "loginFormACP" hat und im input liegt. Da der Input aber ein selbst-schließender-Tag ist kann ich mir dass schlecht vorstellen. Kannst du vielleicht den Link posten wo du das gelesen hast? @asipak Das versteht sogar der IE, allerdings ist der Button nicht immer gleich groß. Der Value ist variabel und somit könnte mal "senden" drin stehen und mal "Ich bin sicher dass ich dieses Formular senden möchte".

06.10.2010, 13:13
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	selfhtml dazu : Element#Name { CSS-Eigenschaft:Wert; ...} Für Name einen Namen notieren. Trifft auf HTML-Elemente mit <Element id="Name">...</Element> zu. #Kopf trifft z.B. auf <div id="Kopf">...</div> zu. Für Element ein HTML-Element wie z.B. h2 oder pre notieren. p#Kopf trifft z.B. auf <p id="Kopf">...</p> zu, nicht aber auf <div id="Kopf">..</div>. und für Asipaks vorschlag du kannst doch den Style direkt im Button nochmal leicht modifizieren - mE müsste ein style="width: xyzpx;" das erledigen - und die xyz Angabe könnte dein php_script dann von der Länge der Buttonbeschriftung ableiten (etwa strlen mal 8 + Leichter Aufschlag) und schon hättest du eine feste Breite für den Button und die passt sich trotzdem an

06.10.2010, 15:23
Squall Erfahrener Benutzer Registriert seit: 19.03.2009 Beiträge: 539 PHP-Kenntnisse: Fortgeschritten	Nachdem keiner einer bessere lösung weiß hab ich mir jetzt eine funktion geschrieben die jeden Buchstaben des worts prüft und den em-wert festlegt. Ist zwar keine schöne Lösung aber Sie funzt erstmal (drecks IE) Für die die es interessiert: PHP-Code: function CalculateStringWidthInEm($string) { $counter = 0; while (strlen($string) > 0) { $sign = substr($string, 0, 1); switch($sign) { case 'i': case 'l': $counter += 0.35; break; case ' ': $counter += 0.45; break; case 'I': case 'j': case 'r': $counter += 0.5; break; case 'f': $counter += 0.55; break; case 'J': case 'L': case 'k': case 's': case 't': case 'x': case 'z': $counter += 0.65; break; case '1': $counter += 0.75; break; case 'A': case 'B': case 'C': case 'E': case 'F': case 'D': case 'G': case 'H': case 'K': case 'N': case 'P': case 'R': case 'S': case 'T': case 'U': case 'V': case 'X': case 'Y': case 'Z': case 'a': case 'b': case 'c': case 'd': case 'e': case 'g': case 'h': case 'n': case 'o': case 'p': case 'q': case 'u': case 'v': case 'y': case '0': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9': $counter += 0.85; break; case 'O': $counter += 0.9; break; case 'Q': $counter += 0.95; break; case 'M': case 'm': case 'w': default : $counter += 1; break; case 'W': $counter += 1.15; break; } $string = substr($string, 1); } return $counter; }

07.10.2010, 13:20
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Schöne Frickel-Lösung ... </sarc> Ich würd' den Submit-Button ja einfach inline lassen, und per text-align:center im umgebenden Element ausrichten ... __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

08.10.2010, 14:06
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Dann machst du was falsch ... ich hab's ausprobiert. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

11.10.2010, 13:48
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Ich löse sowas oft mit JavaScript... Aber hier eine Alternatilösung: PHP-Code: `#loginFormACP input[type=submit] { display: inline; margin: auto; margin-top: 15px; } #loginFormACP { position: relative; width: 300px; margin: auto; padding-top: 50px; text-align: center; }`