div mit abgerundeten Ecken und andere Probleme

[ingobar]

Hallo,

ich bräuchte mal eine Tipp zur Realisierung folgender Grafikvorgabe:

Das hat einen Rahmen mit abgerundeten Ecken, wobei der obere Rand (doppelte Linie) anders aussieht als der unteren (doppelte Linie mit anderem Abstand als die obere). Links und rechts gibt es nur zwei parallele Linie.

Ich habe jetzt folgendes versucht:

  
<div style="position:absolute; left:auto; right:auto; width:99%; " >  
	<div style="width:800px; height:240px; left:105px; top:0px; position:absolute; margin:0px; " >  
		<img src="images/menu_dark.gif" alt="" style="left:76px; top:151px; border:0px" usemap="#menu" id="menuImage">  
	</div>  
	<div style="top:240px; bottom:0px; height:191px; left:105px; width:800px; position:absolute; margin:0px; " >  
		<img src="images/table_left_viewer.gif" alt="" ><img src="images/table_r_photos.gif" alt="" >  
	</div>  
	<div class="content" >  
		<div class="content_top">  
			<img src="images/content_top.gif" alt="" >  
		</div>  
		<div class="content_middle">  
		test, test, test, test, test, test, test, test, test, test, test, test, test, test,  
		test, test, test, test, test, test, test, test, test, test, test, test, test, test,  
		</div>  
		<div class="content_bottom">  
			<img src="images/content_bottom.gif" alt="" >  
		</div>  
	</div>  
</div>  
  

Das css sieht so aus:

  
.content {  
	left:105px;  
	top:407px;  
	position:absolute;  
}  
  
.content_top {  
}  
  
.content_middle {  
	background-image: url(images/content_middle.gif);  
	color:#fefefe;	  
}  
  
.content_bottom {  
}  

Jetzt habe ich das Problem, dass der Text nicht innerhalb des divs bleibt, sondern drüberhinaussteht.

Das ganze soll ürbigens zB so aussehen:

Das Menü ganz oben mit dem Scheinwerfer habe ich mit einer image-map gemacht, wobei immer die ganze Grafik ausgetauscht wird. Direkt darunter befinden sich zwei Grafiken (links das Logo und rechts der dreizeilige Text), die dem User zeigen, wo er ist.

Das Problem sind einfach die vielen verschachteten und übereinander liegenden Rahmen - vor allem auch in Bezug auf die Image-Map

Gibt es da vielleicht was besseres als mein noch nicht funktionierender Ansatz? Soll ich gleich auf webkit-border etc., also css3 gehen?

Wäre schön, wenn mir da jemand einen Tipp für eine einfache Umsetzung geben kann.

ingobar