IE-Problem bei li a:hover mit background-image

silverspoon · #1 (**permalink**) 08.03.2011, 21:57

Hallo,

ich suche schon den ganzen Tag vergeblich nach einer Lösung für folgendes Problem:

Ich habe mein Menü als Liste ohne Aufzählungszeichen formatiert. Bei hover soll eine Grafik vor dem jeweiligen Menüpunkt angezeigt werden. Das funktioniert auch einwandfrei bei Firefox und im IE ab Version 8. Im IE bis einschließlich Version 7 wird die Grafik aber nicht vor dem Menüpunkt, sondern auf (bzw. unter) dem Menüpunkt angezeigt (überlagert).

Ich denke, dass der IE bis Version 7 Probleme mit dem negativen Wert für margin hat und der Hintergrund deshalb nicht weiter links anfangen kann als der Text. Ich hoffe, jemand kann helfen.

Code:

.navi {
   position: absolute;
   width: 150px;
   height: 320px;
   margin: 38px auto auto 15px;     
   padding: 0 0 0 10px;
   font-size: 12px;
}

.navi ul {
	list-style-type: none;
	margin: 0px;
	padding-left: 0px;
}

.navi li {
	line-height: 27px;
	padding-left: 27px;				
	border-bottom: 1px solid #ababab;		
}

.navi li a:link,
.navi li a:visited {
	text-decoration: none;
	color: #000000;
}

.navi .active {
	font-weight: bold;
	color: #233f89
}

.navi li a:hover {
	background-image: url(note.gif);
	background-repeat: no-repeat;
	margin-left: -18px;			
	padding-left: 18px;			
}

HTML-Code:

<div class="navi">
   <ul>
      <li class="active"> Link 1 </li>
      <li> <a href="link2.htm"> Link 2 </a> </li>
      <li> <a href="link3.htm"> Link 3 </a> </li>
   </ul>
</div>

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Problem mit CSS Style	flo007	CSS	3	25.01.2009 17:08
BG Image im IE wird nicht angezeigt?! ohje!	smash	CSS	13	03.11.2006 19:31
Problem mit Background Image im IE	deekee	CSS	4	18.02.2006 12:55
problem mit background image und bg-color	leooo	CSS	2	07.01.2006 17:19