Button mit Hintergrundfarbe beschriften

    Hallo,
    seit längerem versuche ich einen Button, der eine Hintergrundfarbe haben soll, mittig zu beschriften.
    Das gelingt mir nicht mit allen Browsern.

    Diese Klasse nutze ich:
    .button_blue{
    background: white url('../Bilder/blue.png') no-repeat top;
    width: 75px;
    height: 20px;
    color:black;
    }

    Und so sieht der Code für den Button aus:
    <button class="button_blue" type="submit" name="subAdv" value="A">
    <div align="center">
    <p> AdvB<br/> </p>
    </div>
    </button>

    Beim IE ist gar keine Beschriftung zu sehen, weder im Button noch außerhalb.
    Beim Firefox steht sie unter dem Button.
    Aber mit Chrome steht die Schrift wie gewünscht mitten im Button.
    Hat jemand einen Tip?
    Ich suche schon seit Tagen und komme einfach nicht weiter.

    henry59

    Danke für die Antwort.
    Das hat leider nichts gebracht, egal ob ich es in der Klasse oder im div-Tag unterbringe.
    Hat noch jemand eine Idee?

    ok, zerlegen wir das ganze mal:
    ein button hat standardmässig seine texte mittig ausgerichtet, warum is das bei dir offensichtlich nicht der fall?

    dann is grundlegend ein block-element nicht in ein inline-element zu legen, wieso stopfst du gleich ein div und ein p in deinen button?
    dann schreibste noch das align-attribut in den code vom div -was völlig unsinnig ist, denn:
    a) wie bereits erwähnt die mittige ausrichtung
    b) werden aussehen und script ausgelagert, damit die entsprechenden codes anständig getrennt und sauber sind.


    möglicher lösungsweg:
    du lädst deine seite irgendwo hoch, damit man den code live inspizieren kann, damit man mögliche abhängigkeiten entdeckt und dir entsprechend helfen kann :)

    Teilerfolg: blue.png auf 75x20px verkleinert (war 80x40)[INDENT=2] Mit Firefox ist jetzt die Schrift im Button.[/INDENT]
    Lösung: In meinem .css-File war folgende Notierung

    body {
    background-color: #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 2em;
    color: #336699;
    margin-top: 0.1em;
    margin-right: 0.1em;
    margin-bottom: 0.1em;
    margin-left: 0.1em;
    }

    ‚line-height’ war das Problem. Werte über 1.0em führen dazu, dass die Schrift vertikal nicht mehr mittig ist und nach unten verschoben wird, jedenfalls im IE.

    Vielen Dank für Deine Unterstützung. Das hat mich in die richtige Richtung gestupst und mir sehr geholfen.