✔ IE 6, IMG-Link Problem

[Oxinetex]

Hi Leute,
mein Problem ist der IE 6!
Ich habe ein Menu. Bei einem hover über ein link wird entsprechend ein neues Bild geladen. Nun möchte ich, das nur beim hover ein zusätzliches Icon angezeigt wird.

Für IE7 - FF und Opera ist das wie folgt gelöst.


<a> LINK <img></a>

das CSS:

#left a {
	background-image: url(../images/left_a_background.png);
	display: block;
	height: 27px;
	width: 157px;
	margin-left: 3px;
	font-family: "Times New Roman", Times, serif;
	font-size: 15px;
	line-height: 27px;
	color: #CCCC99;
	text-decoration: none;
	text-indent: 15px;
	margin-top: 4px;
	font-weight: normal;
}

#left a:hover {
	background-image: url(../images/left_a_hover_background.png);
	color: #FFFF99;
}

#left a img { 
    display:none; 
} 

#left a:hover img { 
   display: block;     
   position: relative; 
   top:-26px;         
   left:126px; 
   border: none; 
    
}

Hat sowas schonmal jemand gemacht? Jemand eine Idee wie ich das im IE 6 ohne extra Hintergrundbild oder ähnlichen Quatsch hinbekomme.

Danke für eure Mühe!

Grüße

 

[Maik]

Hi,

versuch es mal unter Hinzunahme des span-Elements:

#left a {
        background-image: url(../images/left_a_background.png);
        display: block;
        height: 27px;
        width: 157px;
        margin-left: 3px;
        font-family: "Times New Roman", Times, serif;
        font-size: 15px;
        line-height: 27px;
        color: #CCCC99;
        text-decoration: none;
        text-indent: 15px;
        margin-top: 4px;
        font-weight: normal;
}

#left a:hover {
        background-image: url(../images/left_a_hover_background.png);
        color: #FFFF99;
        border: none;
}

#left a span {
        display:none;
}

#left a:hover span {
       display: block;
       position: relative;
       top:-26px;
       left:126px;
       border: none;
}

#left a span img {
       border:none;
}

<a href="#">link<span><img src="..." alt="..."></span></a>

 

[Oxinetex]

Danke, der Tipp ging in die richtige Richtung.

Effektiv schauts nun so aus:

#left a {
      ... wie oben
}

#left a:hover {
      ... wie oben
}

#left a span
{
     display:none;
}
#left a:hover span
{
        display:block;
	position: relative;
	float: right;
	top:-26px;
	width: 30px;
	height: 27px;
	margin-right: 1px;
	margin-bottom:-27px;
}

Danke