Runda hörn i divar?

Jag har gjort ett litet test som verkar funka. Men flundrar på om det är "rätt". (ser ok ut i fler webbläsare än I.E?)

<style type="text/css">
<!--
.container{	width:145px;background:URL(middle.gif) repeat-y;
          	font-family:tahoma,verdana,arial;font-size:11px;
	   	line-height:16px;
	}

.container_top{position:absolute;width:145px;height:8px;background:URL(top.gif) no-repeat;}

.container_middle{padding:8px 0 0 8px;}

.container_bottom{position:absolute;width:145px;height:8px;background:URL(bottom.gif) no-repeat;}
-->
</style>

<div class="container">
<div class="container_top"></div>
<div class="container_middle">
Rad ett<br>
Rad två<br>
Rad tre<br>
Rad fyra<br>
Rad fem<br>
Rad sex<br>
Rad sju<br>
Rad åtta<br>
</div>
<div class="container_bottom"></div>
</div>

Snyggt,
ser bra ut i FireFox i varjefall.

Sedan om det är bästa/enda sättet att göra vet jag inte

Mvh
Jan-Olov

Hmm...

Din exempelfil funkar i MSIE4, MSIE5, MSIE5.5, Firefox och opera7 också...

Snyggt jobbat :birp

Men du skall få några små tips ändå:

1. Egentligen får man inte ha med understreck i klassnamn i CSS enligt standard - men bindestreck går bra, så döp om klasserna tilll .container-middle osv.

2. Behövs verkligen position:absolute?
   När du lägger tre div:ar efter varandra sådär så kommer de att ligga under varandra, kant i kant som default - dvs utan att du behöver köra med position:absolute ;)

3. Repeteringarna sköter sig själv... Du behöver inte klura på no-repeat och repeat-y när bakgrundsbilden är exakt lika bred som div:en den ligger i (om du inte vill) ;)

4. De "inre div:arna" tar hela bredden av den yttre - så du behöver inte lägga width:145px på allihop om du inte vill...

Du kan alltså reducera din CSS till det här

.container{
  width:145px;font-family:tahoma,verdana,arial;
  font-size:11px; line-height:16px;
  background:url(middle.gif);
}
.container-top{height:8px;background:url(top.gif);}
.container-middle{padding:8px 0 0 8px;}
.container-bottom{height:8px;background:url(bottom.gif);}

... om du t.e.x vill spara bandbredd eller så (jag sa väl att detta var smådetaljer ? ;) ) :birp

Du kan alltså reducera din CSS till det här

Tack för hjälpen, men i I.E. så ser der inte bra ut med förenklingen du gjorde. Container-top/bottom:s bakgrunder hamnar fel.

Ajdå - du har rätt...

Jag fick visst inte med alla detaljer :r

.container{
  width:145px;font-family:tahoma,verdana,arial;
  font-size:11px; line-height:16px;
  background:url(middle.gif);
}
.container-top{height:8px;background:url(top.gif);[b]font-size:1px;line-height:1px;[/b]}
.container-middle{padding:8px 0 0 8px;}
.container-bottom{height:8px;background:url(bottom.gif);[b]font-size:1px;line-height:1px;[/b]}

Ursäkta en gammal förvirrad besserwisser :r

A List Apart har en artikel om detta, Creating Custom Corners & Borders.

Jag ändrade även denna rad:

.container-middle{padding:0 0 0 8px;}

:)
Tack för hjälp.

funkar det i mac? osx & os9?