Probleme mit <a> im IE

[kastalonien]

Hallo allerseits...

im IE.x funktionieren folgender link nicht:

<a onmouseover = \"changeLink(this,".$i.")\" onmouseout = \"changeBack(this,".$i.")\" href= \"frameset_artists.php?artists_info=".$artist_prev[$i]['ID_Kuenstler']."\" target = \"hauptframe\"><table class = \"link\" width = \"248\" height = \"75\" cellspacing = \"0\" cellpadding = \"5\">
                     <tr align = \"left\">
                      <td id = \"".$i."\" class = \"picture_link\" width = \"80\">
                       <img src = \"$bild\" alt = \"\" width = \"75\" height = \"75\" border = \"0\">
                      </td>
                      <td width = \"170\" valign = \"top\">".$artist_prev[$i]['Name_Kuenstler']."
                      </td>
                     </tr>
                    </table>
                   </a>

wo liegt das Problem...alle anderen getesteten Brower unterstützen den Code problemlos

denke zwar nicht, dass es wichtig ist, aber hier nochmal der CSS und JAVA CODE

  <STYLE type = "text/css">
 
    .hover { background-image:url(../../grafix/background_mouseover.png);
             font-weight: bold; }

  </style>
  <!--[if IE 6]>
   <style type="text/css">
   .hover {filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='../../grafix/background_mouseover.png', sizingMethod='scale');
           background:none; }
   </style>
  <![endif]-->

  <style type="text/css">
    .link { background-image:url(../../grafix/background.png); }
  </style>
  <!--[if IE 6]>
   <style type="text/css">
    .link {filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='../../grafix/background.png', sizingMethod='scale');
           background:none; }
  </style>
 <![endif]-->
         
  <style type="text/css">

    .picture_link {filter:alpha(opacity=70);
                   -moz-opacity: 0.7;
                   opacity: 0.7;}
    
    .picture_hover {filter:alpha(opacity=100);
                    -moz-opacity: 1.0;
                    opacity: 1.0;}

   -->
  </style>
 <script type="text/javascript">
  <!--

function changeLink(linkChange,i)
 {linkChange.firstChild.className = 'hover';
  document.getElementById(i).className = 'picture_hover'; }

function changeBack(linkBack,i)
 {linkBack.firstChild.className = 'link';
  document.getElementById(i).className = 'picture_link'; }


</script>

wäre sehr dankbar für Hilfe

kastalonien

 

[Maik]

Hi,

und was funktioniert nun im IE nicht wie erwünscht?

 

[kastalonien]

das mouseover geht...aber die maus wechselt nicht auf den weißen Finger, wenn ich drüberfahre, nur wenn ich klicke (im geklickten Zustand)...die weiterleitung zum link funktioniert natürlich auch nicht...

 

[Gumbo]

Du hast gleich einige Fehler gemacht:

• Inline-Elemente dürfen keine Block-Level-Element enthalten. Das table-Element hat also nichts im a-Element verloren.
• IDs dürfen nicht mit einer Zahl beginnen

Probier mal Folgendes:

<style type="text/css" media="screen">
	a.link {
		display: block;
		width: 248px;
		height: 75px;
		padding-left: 75px;
		background-image: url(../../grafix/background.png);
	}
	a.link:hover {
		background-image: url(../../grafix/background_mouseover.png);
		font-weight: bold;
	}
	a.link img {
		float: left;
		margin-left: -75px;
		filter: alpha(opacity=70);
		-moz-opacity: 0.7;
		opacity: 0.7;
	}
 	a.link:hover img {
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
</style>
<!--[if IE 6]>
<style type="text/css">
	a.link:hover {
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../grafix/background_mouseover.png', sizingMethod='scale');
		background: none;
	}
	a.link {
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../grafix/background.png', sizingMethod='scale');
		background: none;
	}
</style>
<![endif]-->

<a href="…" target="hauptframe" class="link"><img src="…" alt="" width="75" height="75">…</a>

 

[kastalonien]

Wie geil ist das denn...

das funktioniert...ich muss noch viel lernen...vor allem CSS

hab' jetzt nur noch ein Problem. Wie bekomme ich den Text nach oben? Hab's mit vertical-align: top; versucht...geht aber nicht...auch bei valign = "top" im HTML Code passiert nichts...

 

[Gumbo]

Der nebenstehende Text sollte eigentlich oben dargestellt werden. Hast du vielleicht eine bestimmte Zeilenhöhe eingestellt?

 

[Maik]

Falls du den Linktext neben der Grafik meinst, setz mal align="top" ein:

<a href="…" target="hauptframe" class="link"><img src="..." alt="" width="75" height="75" align="top">...</a>

 

[kastalonien]

Der nebenstehende Text sollte eigentlich oben dargestellt werden. Hast du vielleicht eine bestimmte Zeilenhöhe eingestellt?

eigentlich nicht...ich kann ja auch auch alle Eigenschaften (größe, bold...) problemlos zugreifen, nur bei vertical-align tut sich gar nichts...

mit valign = top hab' ich ja auch schon versucht...nix...

 

[Gumbo]

Das img-Element besitzt nur das align-Attribut (nicht valign), mit dem alle fünf Ausrichtungen festgelegt werden können.

 

[kastalonien]

auch das hab' ich schon getestet...nicht...