[HTML][CSS] Brak powtarzalnego tła w <div> Opcje

[sadistic_son]

Słuchajcie mam stornke wyświetlającą newsy. Każdy news pojawia się jako odzielny blok z zaokrąglonymi rogami i gradientem. Każdy news znajduje sie w <div class=news>. Zasada jest taka, że wnętrze składa się z 3 <div>: góry, środka i dołu. Góra i dół są po to aby narożniki były zaokrąglone. W górze jest img z floatem do lewej i drugi do prawej a pomiędzy nimi wypełnienie backgroundem repeat-x. Tak samo w dolnym divie. Wgląda to tak:

[HTML] pobierz, plaintext 
<div class=news>
 
<!--Gorna ramka-->
<div class="top"><img class="top_left" src="top_left.bmp"><img class="top_right" src="top_right.bmp"></div>		
 
<div class="inside">
Treść newsa
</div>
 
<!-- Dolna ramka-->
<div class="bottom"><img class="bottom_left" src="bottom_left.bmp"><img class="bottom_right" src="bottom_right.bmp"></div>
 
</div>
[HTML] pobierz, plaintext 

A w CCSie tak:

Kod

.top{
padding-top:0px;
background-image:url(top.bmp);
background-repeat:repeat-x;
}

.inside{
background-image:url(inside.bmp);
background-repeat:repeat-y;
padding:0;
margin:0;
}


.bottom{
height:13px;
background-image:url(bottom.bmp);
background-repeat:repeat-x;
border:0;
}

.top .top_left{
float:left;
}

.top .top_right{
float:right;
}

.bottom .bottom_left{
float:left;
}

.bottom .bottom_right{
float:right;
}

Wytłumaczcie mi proszę czemu górny lewy i górny prawy obrazek wyświetlają się ok ale tło między nimi jest 'przykryte' wypełnieniem z <div class=inside>, który jest poniżej <div class=top> w htmlu ?!?!?! . Dzieje się tak i w IE i w FF.


.

EDIT: Już wyczaiłem czemu tak się dzieje. Wystarczy dodać w CCSie w klasie .top wysokość taką jaką mają narożniki czyli 13px i wszystko śmiga.

Ten post edytował Spawnm 14.07.2009, 07:18:13

Powód edycji: [Spawnm] poprawiłem tytuł.