[CSS / HTML / DIV] Tło strony - obrazek z liniami poziomymi

[ciekawski]

Witajcie,

jestem w trakcie pisania szablonu. Korzystam z DIVów, i mam takie tło: .
Jest to wycięta linia ze zwykłego szkolnego zeszytu. Po lewej stronie znajduje się treść, po prawej menu, wszystko rozciąga się tak, jak powinno i generalnie działa, poza jedną rzeczą.

Mianowicie chciałbym, aby tekst przylegał ściśle do linii - niech to po prostu wygląda tak, jak zapisany zeszyt. Niestety, tekst co linie "podskakuje" o piksel, dwa w górę, przez co po kilkunastu zdaniach wyrazy znajdują się ponad liniami, aby w pewnym momencie "obrócić się" i wrócić na stare miejsce - tuż nad linią. Dokładnie tak, jak chciałbym, aby było w całym dokumencie. Poniżej zamieszczam CSS, może Wy będziecie w stanie mi pomóc?

Kod:

#container{
                width:750px;
                margin:0 auto;
                background:#ffffff url('./gfx/tlo.gif') repeat;
                

                }
#tresc{
                width:555px;
                margin:0 auto;
                float:left;
                display:inline;
                margin-left:10px;
                overflow:hidden;
}
#tresctxt{
                width:540px;
                line-height:21px;
                margin:0 auto;
                clear:both;
                margin-top:5px;
                font-weight:bold;
                text-align:justify;
                font-size:8pt;
                float:left;
                display:inline;}
#menu{
                width:140px;
                float:left;
                display:inline;
                margin-top:-8px;
                line-height:23px;
                margin-left:40px;
                overflow:hidden;
}
#menutxt{
                width:130px;
                font-weight:bold;
                text-align:justify;
                font-size:9pt;
                margin-top:17px;
                }

Jak z poniższego kodu widać, próbowałem sprawę załatwić odstępem między wierszami, jednak na nic się to zdaje

Kod:

<div id="tresc" style="color:#035054;">

                        <p id="tresctxt">
                        <!-- TREŚĆ STRONY -->
                        <br>To jest wlasnie tekst, który powinien być na swoim miejscu. A nie jest.<br> Aby przekonać się o tym, wystarczy skopiować go kilkanaście razy. <br><br>
                        
                    
                        <!-- KONIEC TREŚCI STRONY -->
                        
                        </p>
                        
                    </div>

                <div id="menu">
                        <img src="./gfx/info.gif" style="margin-top:14px;"><br>

                    <p id="menutxt" style="color:#000;">
                        
                    Menu. Podobnie jak treść, przeskakuje :(<br>
                    </p>
</div>

Jest to tylko wycinek z kodu, nie chcę zasypywać Was całym szablonem, bo trochę tego jest...
Jeżeli tylko możecie - bardzo proszę o pomoc.
Pozdrawiam!

edit: tak mi przyszło do głowy jeszcze... może wina leży po stronie obrazka? Mój ma wymiary: 750 x 18 px. Próbowałem z wartością parzystą i nieparzysą, ciągle to samo... choć może jest jakiś "złoty środek" na tę bolączkę?