IE/FF Problem mit der höhe beim a und input

[dotnet]

Hallo,
habe ein kleines IE problem.
Mein "input submit" wird in IE von der höhe genau wie mein "a" angezeigt, im FF ist das "a" oben und unten 1px kleiner. Was mache ich falsch?

input.button, a.aButton {
    margin: 0px 10px 0px 0px;
    background-color: #EAEAEE;
    border: 1px #CFCFD3 solid;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    padding:5px;
}

input.button{
    padding:5px ;
}

input.button:hover, .aButton:hover {
    background-color: #DEDEE4;
}

 

[vast]

vielleicht bringt es dich weiter, zusätzlich noch die line-height zu definieren, um das in den Griff zu kriegen.
Einen Versuch wert.

 

[dotnet]

hey, hat leider nichts gebracht :cry:

 

[vast]

ok, war ja auch nur geraten. ;)

Ich rate auch gern weiter: Erben beide Elemente die gleiche font-family? Wenn nicht, mal festlegen.

Falls das auch nicht hilft, müsste man mal dein html incl. doctype sehen.

 

[vast]

ahja, da sich zB Safari auch gern gegen das stylen von buttons wehrt - du könntest auch theoretisch zwei a.aButtons machen und dem einen einfach die Funktion des submit-Buttons geben:

<a class="aButton" href="javascript:document.formname.submit();" title="absenden">absenden</a>

dann siehts auch gleich aus. Ich habe nämlich so die Befürchtung, das dies crossbrowser-mässig knifflig werden könnte.

 

[threadi]

Dein Link ist kein Blockelement, folglich wirkt sich das padding nach oben und unten nicht aus. Daher auch der Unterschied in den Browsern, wobei es der FF richtig macht und der IE falsch. Probier es mal mit "height: 1%;" für den Link.

 

[dotnet]

hey,
habe es probiert, leider klappt das nicht.
Auf CSS trick - submit button should look same everywhere | The Bloggers Watch
habe ich die css angeschaut, der unterschied liegt in der font, wenn ich die so lasse wie er, ist es ok, ich habe aber arial und da kommt der unterschied. Habe auch schon mit line-height versucht das zu formatieren, hat aber leider nicht geklappt.

 

[vast]

gut, im oben genannten Link werden ja quasi nur CSS-hacks angewendet. Das hätte ich gern vermieden.
Muss aber zugeben, das ich glaube, dass es ohne so nicht zu lösen ist.

Dein Link ist kein Blockelement, folglich wirkt sich das padding nach oben und unten nicht aus.

Doch, das wirkt sich schon aus, soweit die line-height das ermöglicht, wenn ich mich nicht irre.
Hab ich aber zuerst auch ausprobiert, bringt auch nicht das gewünschte Ergebnis.

Ich würde vorschlagen, das so wie in #5 beschrieben zu machen.