[CSS] piksel różnicy w FF Opcje

[eccocce]

To są widoki z czterech przeglądarek:
Firefox 3.6.15
Opera 11.01
IE 8.0
Chrome 10.0.648

Mały czerwony pionowy pasek nad napisem zaznacza odległość górnej krawędzi napisu od górnej krawędzi niebieskiego button. W FF pasek ma wysokość 4px a w pozostałych tak jak powinno być, czyli 3px.

Kod CSS wzięty z Firebuga FF

Kod

#step_button2 {
    background-image: url("box3/step/step2.png");
    color: #FFFFFF;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 26px;
    width: 80px;
}
index.css (wiersz 205)
div {
    margin: 0;
    padding: 0;
}

Kod HTML:

Kod

<div id="step">
                        <div id="step_button">
                            <div id="step_button1"></div>
                            <div id="step_button2">
                                KROK 1/2
                            </div>
                            <div id="step_button3"></div>
                        </div>
                    </div>

[gargamel]

poeksperymentuj z paddingiem i borderem.

[eccocce]

Inny prosty test:

HTML

Kod

<div id="test">TyjgD</div>

CSS

Kod

#test {
                margin: 0;
                padding: 0;
                border: solid 1px #000000;
            }

Tekst w FF jest o 1 px niżej niż w innych przeglądarkach... :/

[rocktech.pl]

Może reset wystarczy ? CSS RESET

[eccocce]

Dzięki wielkie. Dorzuciłem atrybut line-height: 1 i nagle wszystko jest OK (tak samo we wszystkich przeglądarkach). Sam reset.css bardzo przydatny, jeszcze raz dzięki.