# css -> a -> hover  fehler beim ie



## Picco Terra (18. Oktober 2007)

Ich habe volgendes problem:

beim firefox ist alles wunderbarst und beim ie muss man dann ja immer ein bisschen was ändern so und nun kommts beim firefox wird wenn man über einen link *hovert* wird dieser mit einer grafik hunterlegt-> beim ie geschiht dies auch ABER die linke navigation funktioniert nicht mehr! der oberstelink ist immer hinterlegt die andern nie und können auch nicht mehr angeklickt werden!  ich habe noch nie etwas für den ie gemacht und bin ein bissle überfragt wer kann mir helfen?


Hier die css datei und eine seite der zukünftigen hp (soll ich noch nen sreccnshot machen wies im ie aussieht?)die meiner meinung nach relevanten stellen sind makiert!

std.css

```
* {
      margin: 0;
      padding: 0 ;
}

html, body{
		background-image:url(http://www.c4d-jack.de/php/textures/gal/SRT_Packages/Part_IV/material_baumrinde.jpg);
      color:#127B12;
      background-color:#E3DDDA;

      font-family:FlairRoman,Monotype Corsiva,Comic Sans MS,Century Gothic,Arial;

      text-align:left;

      font-size:17px; 

      }
	
.text,td{
	border: 0px solid #000;
}
.text,tr{
	border: 0px solid #000;
}
.text,table{
	border: 0px solid #000;
}
	
a{
	text-decoration:none;
	color:#015A01;
	
}
a img{
	border:0px;
}
a img:hover{
	border:0px;
}

	a:hover{
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
	color:#DFD;
	text-decoration:none;
	background-color:#000;
	}
a:link:hover{
	color:#DFD;
	text-decoration:none;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
}

.gb{
	 border:0;
	 height:700px;
	 width:684px;
	 margin:-150px 164px 0px 186px;
}
.text {
		background-color:#E3DDDA;
		width:450px;
		margin:-300px auto 0px auto;
		text-align:center;
		padding:5px;
}
.navi {
		background-color:#E3DDDA;
		width:90%;
		margin:1% auto 0px auto;
		text-align:center;
		height:1.4em;
		padding:10px;
		
		
}
.naviu {
		background-color:#E3DDDA;
		width:1019px;
		margin:100px auto 0px auto;
		text-align:center;
		height:1.4em;
		padding:10px ;
		
		
}
.navil {
	background-color:#E3DDDA;
	width:145Px;
	margin:-420px 0px 0px 870px;
	height:400px;
	padding:10px ;
	text-align:center;
	
	
	
}
.navih {
		background-color:#E3DDDA;
		width:164px;
		margin:0px 846px 0px 0px;
		text-align:center;
		height:400px;
		padding:10px;
		 
		
		
}
#aktiv{
	color:#8B008B;

}
#aktiv:hover{
	color:#FCF;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);


}
.logo {
		background-color:#E3DDDA;
		margin:0px 164px 0px 184px;
}
.start{
		background-color:#E3DDDA;
		margin:100px 0px 100px 45%;
}
.start:link:hover{}

.achtung{
	color:red;
	font-weight:bold;
	font-size:22px;
	
	}
.achtung:link:hover{
	color:#FF0000;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
	font-size:22px;
	}
.achtung:hover{
	color:#FF0000;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
	font-size:22px;
	}
.fett{
	font-weight:bold;
	margin:5px 2px;
	text-align:center;
}
.links{
	text-align:left;
}
.platz{
height:100px
}
.counter{
height:0px;
width:0Px;
}
```


 stdie.css

```
* {
      margin: 0;
      padding: 0 ;
}

html, body{
		background-image:url(http://www.c4d-jack.de/php/textures/gal/SRT_Packages/Part_IV/material_baumrinde.jpg);
      color:#127B12;
      background-color:#E3DDDA;

      font-family:FlairRoman,Monotype Corsiva,Comic Sans MS,Century Gothic,Arial;

      text-align:left;

      font-size:17px; 

      }
	
.text,td{
	border: 0px solid #000;
}
.text,tr{
	border: 0px solid #000;
}
.text,table{
	border: 0px solid #000;
}	
a{
	text-decoration:none;
	color:#015A01;
	
}
a img{
	border:0px;
}
a img:hover{
	border:0px;
}

a:hover{
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
	color:#DFD;
	text-decoration:none;
	background-color:#000;
	}
a:link:hover{
	color:#DFD;
	text-decoration:none;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
}

.gb{
	 border:0px solid #127B12;
	 height:1000px; 
	 width:684px;
	 margin:-150px 164px 0px 186px;
	 color:#127B12;
}
.text {
		background-color:#E3DDDA;
		width:450px;
		margin:-300px auto 0px auto;
		text-align:center;
		padding:5px;
}
.navi {
		background-color:#E3DDDA;
		width:90%;
		margin:1% auto 0px auto;
		text-align:center;
		height:1.4em;
		padding:10px;
		
		
}
.naviu {
		background-color:#E3DDDA;
		width:1019px;
		margin:100px auto 0px auto;
		text-align:center;
		height:1.4em;
		padding:10px ;
		
		
}
.navil {
	background-color:#E3DDDA;
	width:145Px;
	margin:-420px 0px 0px 870px;
	height:400px;
	padding:10px ;
	text-align:center;
	
	
	
}
.navih {
		background-color:#E3DDDA;
		width:164px;
		margin:-5px 846px 0px 0px;
		text-align:center;
		height:400px;
		padding:10px;	
}
.navih;a:hover{
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
	color:#DFD;
	text-decoration:none;
	background-color:#000;
	}
.navih;a:link:hover{
	color:#DFD;
	text-decoration:none;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
}
#aktiv{
	color:#8B008B;

}
#aktiv:hover{
	color:#FCF;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
}
#aktiv:link:hover{
	color:#FCF;
	text-decoration:none;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
}
.logo {
		background-color:#E3DDDA;
		margin:0px 164px 0px 184px;
}
.start{
		background-color:#E3DDDA;
		margin:100px 0px 100px 45%;
}
.start:link:hover{}

.achtung{
	color:red;
	font-weight:bold;
	font-size:22px;
	
	}
.achtung:link:hover{
	color:#FF0000;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
	font-size:22px;
	}
.achtung:hover{
	color:#FF0000;
	background-color:#000;
	background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
	font-size:22px;
	}
.fett{
	font-weight:bold;
	margin:5px 2px;
	text-align:center;
}
.links{
	text-align:left;
}
.platz{
height:110px
}
.counter{
height:0px;
width:0Px;
}
```

eine seite

```
<!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>

    <style type="text/css">

      @import url(std.css);

    </style>
	<!--[if IE]>
	<style type="text/css">

      @import url(stdie.css);

    </style>
	<![endif]-->

<link rel="shortcut icon" type="image/x-icon" href="http://www.bilder-hochladen.net/files/1aj7-6l.gif">

    <title>Avalon-info</title>

  </head>

  <body>
  
	<a href="index.html"><img src="http://www.bilder-hochladen.net/files/1aj7-60.gif" class="logo"/>
  
  <div class="navih">
		<a href="start">Startseite</a><br />
		<a href="#">Leder</a><br />
		<a href="#">Pfeil/Bogen</a><br />
		<a href="#">Holzwaren</a><br />
		<a href="#">Kinderspielzeug</a><br />
		<a href="#">Gewandungen</a><br />
		<a href="#">Top-ten</a><br />
		<a href="#">sonderaktionen</a><br />
		<a href="gb">Gästebuch</a>
		</div>
		
		<div class="navil">
		<a href="#">partner1</a><br />
		<a href="#">partner1</a><br />
		<a href="#">partner1</a><br />
		<a href="#">partner1</a><br />
		</div>
		
	<div class="text">
		<a class="achtung" href="news">News</a><br />
		<a href="termine">Termine</a><br />
		<a href="wissenswertes">Wissenswertes</a><br />
		<a href="Agb">AGB</a><br />
		
	</div>
	<div class="platz"></div>
		
		<div class="naviu">
		<a href="#">Shop</a>||
		<a href="#">Warenkorb</a>||
		<a href="impressum">Impressum</a>||
		<a href="Agb">AGB</a>||
		<a href="info" id="aktiv">Informationen</a>||
		<a href="#">Top-ten</a>||
		<a href="#">Sonderaktionen</a>
		</div>
  <a href="http://www.counter-kostenlos.net/" target="_blank"><img src="http://www.counter-kostenlos.net/counter.php?id=105053" class="counter" alt="kostenlose counter" border="0"></a>
	
  	</body>

	</html>
```


----------



## michelschacht (18. Oktober 2007)

tach tach 

sach mal dumme frage aber um welchen teil in der css geht es dir genau weil bei dem durcheinander finde ich mich nicht mehr zurecht und manche sachen darin dürfeten eigentlich nicht mal ansatzweise gehen.

lg michél


----------



## Picco Terra (18. Oktober 2007)

die rot makierten bereiche also diese:

```
a img:hover{
border:0px;
}

a:hover{
background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
color:#DFD;
text-decoration:none;
background-color:#000;
}
a:link:hover{
color:#DFD;
text-decoration:none;
background-color:#000;
background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
}
```


----------



## Maik (18. Oktober 2007)

Hi!

@Picco Terra & michelschacht: Bitte beachtet in euren Beiträgen unsere Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank 

@Picco Terra: Kann man die Seite "live" betrachten?


----------



## Picco Terra (18. Oktober 2007)

Nein ist nochnicht online! Ich kann ja keine Fehlerhafte geschäfts hp online stellen!


----------



## michelschacht (18. Oktober 2007)

Die allgemeine Einbindung einer css für ie und mozilla etc. ist die weil ich mal von ausgehe das das vielleicht auch nicht geht
	
	
	



```
<link rel='stylesheet' type='text/css' href='deine-css.css'>
```

aa ich mal versucht habe mir die Links anzuschauen die als bg drin hast und nur ne 404 bekomme interessiert mich mal wo die her holst.

sonst bei

```
a:link:hover{
color:#DFD;
text-decoration:none;
background-color:#000;
background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
}
```
Das sollte auch nicht gehen da da ein kleiner Fehler drin ist
so:
	
	
	



```
a.link:hover{......
```
dann solltest aber den Link auch ansteuern sonst geht nur der Normale

```
<a href="#" target="" class="link">Link Text</a>
```

dann Erstelle mal nen Testserver wo wir uns das anschauen können


----------



## Picco Terra (18. Oktober 2007)

Einbindung  warum ein Fehler kommt weis ich nicht bei mir gehts und das mit dem link hover eht auch nur der ie macht ärger ich ändere mal di estellen die du gesagt hat fl geht es dann ja schon


----------



## michelschacht (18. Oktober 2007)

Mach das wenn ein anderen hover ansprechen möchtest must du der HTML sagen welche und das machst du mit class


----------



## Picco Terra (18. Oktober 2007)

```
a:link:hover{
color:#DFD;
text-decoration:none;
background-color:#000;
background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
}
```
also der teil stimmt! sonst geht es net! denn link ist keine Class das importieren geht in beiden fällen aber geholfen hat es nichts es hat alles nur schlechter gemacht 

@michelschacht das kann ich nicht ich sitze bei mir zuhause und bin eine anfängerin in solchen dingen mit nem veralteten Pc auf dem nichtmal Xamp läft  aber bald gibts nen neuen^^


----------



## Maik (18. Oktober 2007)

Ich empfehle dir, grundsätzlich alle deckungsgleichen Formatierungen mit dem Stylesheet *std.css* im IE-spezifischen Stylesheet  *stdie.css* zu entfernen, und darin nur die Regeln zu notieren, die den IE betreffen, alle übrigen Elementformatierungen holt er sich ja schon aus dem ersten Stylesheet.

Dass der Hover-Effekt nicht funktioniert und die Links nicht anklickbar sind, liegt daran, dass sie derzeit vom DIV *.navil* überdeckt werden.

Einfach mal zu Testzwecken die Schichtposition für das DIV *.navih* erhöhen:


```
.navih {
background-color:#E3DDDA;
width:164px;
margin:-5px 0 0px 0px;
text-align:center;
height:400px;
padding:10px;
position:relative;
z-index:2;
}
```


----------



## michelschacht (18. Oktober 2007)

Ich kann mich schwach Erinnern das ich das auch mal versucht hatte aber bei mir war die Grafik nicht mehr da wo sie hin sollte kann auch sein das ie da nen Problem mit hat aber ohne es in live anzuschauen geht das schwer zu sagen


----------



## Picco Terra (18. Oktober 2007)

Das ist verdammt nah drann^^ nur der oberste link ist immernoch dauerhaft hinterlegt aber auch schon anklickbar noch dafür ne lösung und ich bin bis hier unschlos glücklich


----------



## Maik (18. Oktober 2007)

Picco Terra hat gesagt.:


> nur der oberste link ist immernoch dauerhaft hinterlegt aber auch schon anklickbar


Kann ich mit meinem Lösungsvorschlag nicht bestätigen:


----------



## Picco Terra (18. Oktober 2007)

hm wlehce ie version hast du/sie denn?


----------



## Maik (18. Oktober 2007)

Der Screenshot stammt vom IE6, aber im IE7 funktioniert es bei mir ebenso:


----------



## Maik (18. Oktober 2007)

Btw, mein Tipp in deinem Thread kleine bitte um hilfe im bezug aufs profil sollte jetzt funktionieren, da du nun mehr als 10 Beiträge im Forum verfasst hast.


----------



## Maik (18. Oktober 2007)

Ansonsten versuch es mal auf diese Weise:


```
<div id="wrapper">
     <a href="index.html"><img src="http://www.bilder-hochladen.net/files/1aj7-60.gif" class="logo"/></a>
     <div class="navih">
          <a href="start">Startseite</a><br />
          <a href="#">Leder</a><br />
          <a href="#">Pfeil/Bogen</a><br />
          <a href="#">Holzwaren</a><br />
          <a href="#">Kinderspielzeug</a><br />
          <a href="#">Gewandungen</a><br />
          <a href="#">Top-ten</a><br />
          <a href="#">sonderaktionen</a><br />
          <a href="gb">Gästebuch</a>
     </div>
     <div class="navil">
          <a href="#">partner1</a><br />
          <a href="#">partner1</a><br />
          <a href="#">partner1</a><br />
          <a href="#">partner1</a><br />
     </div>
     <div class="text">
          <a class="achtung" href="news">News</a><br />
          <a href="termine">Termine</a><br />
          <a href="wissenswertes">Wissenswertes</a><br />
          <a href="Agb">AGB</a><br />
     </div>
     <div class="platz"></div>
     <div class="naviu">
          <a href="#">Shop</a>||
          <a href="#">Warenkorb</a>||
          <a href="impressum">Impressum</a>||
          <a href="Agb">AGB</a>||
          <a href="info" id="aktiv">Informationen</a>||
          <a href="#">Top-ten</a>||
          <a href="#">Sonderaktionen</a>
     </div>
     <a href="http://www.counter-kostenlos.net/" target="_blank"><img src="http://www.counter-kostenlos.net/counter.php?id=105053" class="counter" alt="kostenlose counter" border="0"></a>
</div>
```


```
#wrapper {
width:1040px;
}

.navil {
background-color:#E3DDDA;
width:145px;
margin:-420px 0px 0px 870px;
height:400px;
padding:10px ;
text-align:center;
float:right;
}

.navih {
background-color:#E3DDDA;
width:164px;
margin:-5px 846px 0px 0px;
text-align:center;
height:400px;
padding:10px;
}

.navih a:hover{
background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
color:#DFD;
text-decoration:none;
background-color:#000;
}
```


----------



## Picco Terra (18. Oktober 2007)

bringt leider auch nicht das gewünschte Ergebnis

wo kann ich eig sehen welche ie version ich hab?


----------



## Maik (19. Oktober 2007)

Hi,

meinst du vielleicht diesen Link?


```
<a href="index.html"><img src="http://www.bilder-hochladen.net/files/1aj7-60.gif" class="logo"/></a>
```
Lösung:


```
<a class="header" href="index.html"><img src="http://www.bilder-hochladen.net/files/1aj7-60.gif" class="logo"/></a>
```


```
a.header { display:block; }

a.header:hover{
background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
color:#DFD;
text-decoration:none;
background-color:#000;
}

/* Dieser Selektor a:link:hover ist somit überflüssig */

a:link:hover{
color:#DFD;
text-decoration:none;
background-color:#000;
background:url(http://www.bilder-hochladen.net/files/1aj7-6m.gif);
}
```
Die IE-Version erfährst du, wenn du in der Menüleiste auf das Fragezeichen bzw. Hilfe und dann auf "Info" bzw. "About Internet Explorer" klickst.


----------

