Anchor, Button és Input…

…avagy hogyan legyen minden böngészőben ugyanolyan a gombunk. Hát ezt is sikerült – valamilyen szinten – megalkotni. Íme a kód minden körítés nélkül:

.button {
    border: 1px solid red;
    background: yellow;
    font-size: 12px;
    color: #000;
    display: inline-block;
    font-family: Arial;
    text-decoration: none;
    text-align: center;
    padding: 1px 1px 2px!important;
    margin: 0;
    cursor: pointer;
    vertical-align: bottom;

    /* Internet Explorer 7 button padding hack */
        overflow: visible;
        !width:auto!important;
    /* Internet Explorer 6 button padding hack */
        _width: 0;
        _padding: 0;
}

a.button {
    _padding: 1px 1px 2px;
}

/* Firefox button padding hack */
input.button::-moz-focus-inner,
button.button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Egyelőre csak IE6 és 8, valamint Firefox 3 és Safari alatt néztem meg, de remélhetőleg IE7 alatt is működik a dolog, holnap kitesztelem!

És kezd már elegem lenni az IE6 és 7 töketlenkedésekből!

Képes inline gombok létrehozása sprite-tal CSS-ből

Gondoltam megosztom veletek, hogyan is szenvedtem végig, mire végre minden böngészőben ugyanúgy nézett ki.

Adott ez a HTML kód:

<a href="#">gomb</a>

CSS:

a {
    display: inline-block;

Sprite pozicionalasa a gombunknak.
    background: url(mysprite.gif) no-repeat 0 0;

A majdan kilogo szoveg elrejtese
    overflow: hidden;

A gomb mereteinek megadasa
    width: 16px;
    height: 16px;

Kitoljuk a szoveget a gombon kivulre
    text-indent: 16px !important;

Az elozo sorban levo !important azert kellett, hogy a "modern" bongeszok figyelmen kivul hagyjak a kovetkezo sort!
Internet Explorer 6 es 7 alatt is ha text-indent-et adunk egy inline-block elemnek, akkor azt margokent alkalmazza azt.
    text-indent: 0;

Firefox 2 nem ismerte meg az inline-block tipust.
    display: -moz-inline-box;

Firefox 3 alatt az 1px-es font meretet nem jelenitette meg, ha be volt kapcsolva, hogy minimum mekkora legyen a megjelenitheto betumeret. Emiatt megjelenhetett egy 1px magas "csik", ami a szoveg volt. Ez a betumeret eleg ahhoz, hogy a szoveg kicsusszon a kerning miatt.
    font-size: 100px;

Internet Explorer figyelmen kivul hagyja a height+overflow tulajdonsagokat, ha nagyobb a font meret a height-nel, es szethuzza a font meret megjelenitesehez szukseges meretre az elemet.
    line-height: 1px;

Amennyiben ez nincs megadva, Internet Explorer alatt osszevissza jelennek meg az elemek.
    vertical-align: top;

A tobb szavas szovegek becsuszhattak a megjelenitesbe Firefox 3 alatt.
    white-space: nowrap;
}