Box model

Ako je neki block element (DIV, TABLE) preširok te se zbog njega pojavljuje horizontalni scrollbar, pokušajte sljedeće:

  #block {
      box-sizing: border-box !important;       /* for M$IE 5.x, but doesn't hurt in 6+ as well.
                                                  also proposed for upcoming CSS3 */
      -moz-box-sizing: border-box !important;  /* for Mozilla/Gecko */
  }

Za više informacija pogledajte ovdje http://www.quirksmode.org/css/box.html.

Kako zamijeniti tekst slikom?

/(NAPOMENA: kako bi ovo radilo, dotični HTML element mora biti block-level element.)/
Jedan od načina je content dotičnog elementa staviti u neki HTML tag koji po defaultu nema nikakav stil, npr. DIV ili (preporučeno) SPAN. Dakle:

<h1>Ovo je neki naslov</h1>

postaje

<h1><span>Ovo je neki naslov</span></h1>

Zatim se CSS-om dotičnom elementu (ovdje H1) dodijeli background image, te mu se podesi veličina tako da odgovara veličini tog image-a, a child element (SPAN) se sakrije (display: none). Također se overflow stavi na hidden (za slučaj da je originalni tekst širi od replacement slike). Dakle:

H1 {
    background-image: url(foo.jpg);
    background-repeat: none;
    width: 100px;    /* prilagoditi prema velicini slike */
    height: 100px;   /* prilagoditi prema velicini slike */
    overflow: hidden;
}
H1 SPAN {
    display: none;
}

Međutim, ova metoda se ne preporučuje, jer osim što izgleda ružno (zahtijeva jedan dummy element u strukturi HTML-a), većina screen readera ima problema sa display: block, te time HTML gubi svoj accessibility. Srećom, postoji alternativno rješenje: u CSS dotičnog elementa se jednostavno stavi atribut text-indent sa jako velikom negativnom vrijednošću, npr. -9000px. Dakle, HTML ostaje kakav je i bio, a novi CSS je:

H1 {
    background-image: url(foo.jpg);
    background-repeat: none;
    width: 100px;    /* prilagoditi prema velicini slike */
    height: 100px;   /* prilagoditi prema velicini slike */
    text-indent: -9000px;
}

Začuđujuće, obje metode rade dobro na svim mainstream browserima. :-)

Za više informacija o prvoj metodi vidi ovdje http://www.stopdesign.com/articles/replace_text/, a o drugoj vidi ovdje http://phark.typepad.com/phark/2003/08/accessible_imag.html.