Vertikale Navi mit Bildern -> Problem mit span.active

[drumsinvitro]

Hallo liebe TL-Freunde,

beim updaten einer Site von 2.5.9 auf 2.7.6 habe ich ein Problem beim Anpassen der Stylesheets des vertikal aufgebauten Menüs. Die <p>-Tags wurden durch die bekannten <span>-Tags ersetzt. Jeder Menüpunkt hat ein Hintergrundbild, welches vorher einfach für aktive und inaktive <p> und <a> Tags durch CSS Hintegrund und Größenangabe für diese sowohl für active als auch normal gelöst wurde. Das geht beim <span>-Tag nicht, weil es ja keine Höhenangaben annimmt. Dadurch wird der aktive Button zu klein angezeigt, das jeweilige Hintergrundbild abgeschnitten.

Nutze ich die Listenelemente <li> zum setzen des Hintergrundbildes und der Größe, funktioniert das zwar, aber es beschränkt ein li-Tag in der Höhe, wodurch das jeweilige Untermenü nicht mehr korrekt angezeigt wird, sondern von den dem li-Element nachfolgenden Geschwisterelementen überlagert wird.

Hat jemand einen Tipp wie ich den <span>-Tag formatieren könnte, damit das ganze Bild angezeigt wird, oder wie ich ein Listenelement in der Höhe beschränken kann, dass es die richtige Höhe samt Hintergrundbild hat, aber das jeweilige Untermenü auch noch angezeigt wird?

Es ist etwa wie folgt aufgebaut:

altes HTML, TL 2.5.9., 1. Listenelement aktiv:

<ul class="level_1">
  <li class="active submenu first">
    <p class="active submenu first">titel</p>
    <ul class="level_2">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ul>

altes CSS für 2.5.9.:

#hauptnavigation
{
	width:198px;
	overflow:hidden;
	margin:40px 0px 5px 0px;
}

#hauptnavigation li
{
	display:block;
	font-size:10pt;
}

#hauptnavigation *
{
	margin:0;
	padding:0;
}

#hauptnavigation a,
#hauptnavigation p
{
	overflow:hidden;
	display:block;
	font-weight:bold;
	text-decoration:none;
}

#hauptnavigation .level_1 a,
#hauptnavigation .level_1 p
{
	width:190px;
	height:24px;
	padding-top:8px;
	padding-left:8px;
	background-color:#afc2d5;
	background-image:url("tl_files/images/menu_dots.png");
	background-position:right center;
	background-repeat:no-repeat;
	border-bottom:1px solid #ffffff;
	color:#ffffff;
}

#hauptnavigation .level_1 p.active,
#hauptnavigation .level_1 a.trail
{
	background-color:#00537e;
	background-image:url("tl_files/images/menu_dots_dark.png");
}

#hauptnavigation .level_2 a,
#hauptnavigation .level_2 p
{
	height:20px;
	padding-top:4px;
	background-color:#f3f6f9;
	background-image:url("none");
	border-bottom:1px dotted #00537e;
	font-size:80%;
	color:#00537e;
}

#hauptnavigation .level_2 p.active,
#hauptnavigation .level_2 a.trail
{
	background-color:#f3f6f9;
	background-image:url("none");
	color:#000000;
}

#hauptnavigation .level_2 li.last
{
	padding-bottom:1em;
	background-color:#f3f6f9;
}

neues HTML, TL 2.7.6., 1. Listenelement aktiv:

<ul class="level_1">
  <li class="active submenu first">
    <span class="active submenu first">titel</span>
    <ul class="level_2">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ul>

neues CSS für 2.7.6.:

#hauptnavigation
{
width:198px;
overflow:hidden;
margin:40px 0 5px 0;
}

#hauptnavigation li
{
display:block;
font-size:10pt;
}

#hauptnavigation *
{
margin:0;
padding:0;
}

#hauptnavigation a,#hauptnavigation span
{
overflow:hidden;
display:block;
font-weight:bold;
text-decoration:none;
}

#hauptnavigation .level_1 li
{width:190px;
overflow:visible;
background:#afc2d5 url("tl_files/images/menu_dots.png") right center no-repeat;
border-bottom:1px solid #ffffff;
color:#ffffff;
}

#hauptnavigation .level_1 li.active
{
background-color:#00537e;
background-image:url("tl_files/images/menu_dots_dark.png");
}

#hauptnavigation .level_2 li
{height:20px;padding-top:4px;
background-color:#f3f6f9;
background-image:url("none");
border-bottom:1px dotted #00537e;font-size:80%;
color:#00537e;}

#hauptnavigation .level_2 a,#hauptnavigation .level_2 span
{background-color:#f3f6f9;
background-image:url("none");
font-size:80%;color:#00537e;
}

#hauptnavigation .level_2 li.active
{background-color:#f3f6f9;
background-image:url("none");
color:#000000;
}

#hauptnavigation .level_2 li.last
{
padding-bottom:1em;
background-color:#f3f6f9;
}

Liebe Grüße

drumsinvitro

[drumsinvitro]

Nachdem ich mich nochmal über CSS in Sachen "display:block" belesen habe, klappts wunderbar mit den Höhenangaben in den <span>-Elementen. Das sollte ins Newbieforum verschoben werden?!