root66: Zeilenumbruch ignoriert Padding

Beitrag lesen

Hallo,

ich möchte Menüpunkte rechts-ausrichten. Leider hält sich bei mehrzeiligen Menüpunkten die erste Zeile nicht an das rechte Padding. Das Span innerhalb des Links benötige ich, weil A in meinem Original eine background-grafik enthält und der Text innerhalb dieser Grafik mit Paddings ausgerichtet werden soll. Es soll quasi wie in dem Beispiel aussehen, nur dass der Umbruchfehler in der ersten Zeile des Menüpunkte behoben ist.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Test</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<style type="text/css">  
<!--  
#submenu {  
list-style-type: none;  
width: 300px;  
padding: 0px 0px 0px 0px;  
}  
  
#submenu a {  
text-align: right;  
color: yellow;  
font-size: 12px;  
display:block;  
background: red;  
width: 300px;  
text-decoration: none;  
padding-top: 10px;  
padding-bottom: 9px;  
line-height: 12px;  
}  
  
#submenu a span {  
	background: blue;  
	padding-right: 20px;  
}  
  
-->  
</style>  
</head>  
<body>  
<ul id="submenu">  
<li><a href="#"><span>Dies ist ein sehr langer Men&uuml;punkt, der auf jeden Fall umbrechen soll</span></a></li>  
<li><a href="#"><span>Ein kurzer Men&uuml;punkt</span></a></li>  
</ul>  
</body>  
</html>  

Woran liegt es? Getestet in IE8 und Firefox 3.5.7

VG,
root66