Jak zlikwidować kreskę-prawy brzeg obrazka?

Mam problemy z uwidoczniającymi się krawędziami obrazka (obrazek jest podkładem do nagłówków pozycji menu - po lewej i prawej i na górze strony).

Dokładniej uwidacznia się prawa i dolna krawędź obrazka, ale dolną umiem zlikwidować a prawej w ten sam sposób nie mogę.

Widoczna krawędź ma ok. 0,3mm grubości, ale uwidacznia się przy wszystkich pozycjach nagłówków menu, gdzie obrazek jest taką owalną (z zaokrąglonymi rogami) ramką w niejednolitym kolorze, obrazek stanowi wielokolorowy owal na tle ciemnoniebieskiego prostokąta.

Ten obrazek jest wklejony jako podkład nagłówka tabeli - czyli komórki nagłówkowej.

Obrazek jest umiejscowiony w lewym, górnym rogu tabeli, więc siłą rzeczy po prawej stronie ma krawędź która jest w kolorze bacgroundu tabeli.

Stronka jest pisana z użyciem CSS, a odwołania do obrazka znajdują się w pliku template_css.css

Wkleję może stosowny fragment kodu z tego pliku:

table.moduletable th {

  		 font-size: 12px;

		 font-weight : bold;

  		 font-family : Verdana, Arial, Helvetica, sans-serif;

  		 color : #FFFFCC;

		 height: 42px;

  		 text-align : left;

       vertical-align: middle;

		 padding: 0px 0px 0px 0px;

       width: 220px;

		 background: url(../images/menu-d4.gif) no-repeat left top;

		 background-color: #37698C;

		 display: block;


}

Plik menu-d4.gif to właśnie mój plik obrazka, który ma po prawej widoczną krawędź jasnoniebieską o tej grub. ok. 0,3 mm którą właśnie chciałabym zlikwidować! Dodatkowe fragmenty pliku …css, jakby się przydały:

table.moduletable {

        margin: 0px 0px 10px 0px;

        width: 100%;

		  color: #990000;

		  text-align: left;

        background-color: #37698C;

	     /*border: 1px solid #669900;*/

}

table.moduletable td {

       font-size: 12px;

		 font-weight : bold;

  		 font-family : Verdana, Arial, Helvetica, sans-serif;

  		 color : #990000;

       padding: 0px 0px 1px 3px; 

	  	 height: 18px;

	  	 background-color: #37698C;

}

Uwidaczniające się niepotrzebnie krawędzie, na stronach www to moja pięta achillesowa jak do tej pory, dlatego postanowiłam w końcu spytać na forum bo jakoś nigdzie nie umiem doczytać na ten temat!

Obrazek menu-d4.gif ma rozmiary w pix 225szer i 45 wys jakby było potrzebne do analizy problemu.

Ustawiając w pliku …css wysokość na 42pix chowam dolną uwidaczniającą się krawędż, nie mogę tak samo zrobić z prawą krawędzią a szerokość lewego lub górnego menu - tj. tabelki jest większa niż te 225pix i krawędź uwidacznia się!

Ten problem spędza mi sen z powiek - pomocy - help! #-o

albo prze edytuj obrazek tła tak aby był takich samych rozmiarów lub większy od elementu którego ma być tłem, ewentualnie dodaj do stylów

background-repeat: repeat-x;

spowoduje to powtarzanie obrazka tła wzdłuż osi x

Szczeguły na temat background-repeat masz tu

To repeat odpada bo obrazek nie może się powtarzać wzdłuż osi - jest to prostokącik o długości wzłuż osi x 225pix czyli coś w stylu 7cm na ekranie.

Na tle tego niebieskiego prostokącika, jest nieco mniejszy - dwukolorowy prostokącik z zaokrąglonymi rogami.

Na tle tego obrazka jest tekst nagłówków menu.

Strona składa się z 2tabeli jedna pod drugą.

W pierwszej tabeli lewy panel jest szerszy i tu widać prawą krawędź.

W drugiej tabeli środkowy panel jest szeroki i tu widać tę prawą krawędź!

Zeby było śmieszniej pisałam o efektach w IE8, bo w firefoxie akurat widać lewą krawędź a prawej nie i obrazek sytuuje się na środku kolumny.

W IE8 obrazek jest po lewej stronie kolumny ( w komórce nagłówkowej oczywiście).

W tym momencie się zagubiłem. Podaj adres pod jakim jest strona to zobaczę jak to wygląda bo w tym momencie już za bardzo nie wiem.