css -> a -> hover fehler beim ie

Status
Nicht offen für weitere Antworten.
Picco Terra

Picco Terra

Grünschnabel
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:confused: 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
Code: 
* {
      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
Code: 
* {
      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
Code: 
<!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>
 
Zuletzt bearbeitet:
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
 
die rot makierten bereiche also diese:
Code: 
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);
}
 
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?
 
Die allgemeine Einbindung einer css für ie und mozilla etc. ist die weil ich mal von ausgehe das das vielleicht auch nicht geht
Code: 
<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
HTML: 
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:
HTML: 
a.link:hover{......
dann solltest aber den Link auch ansteuern sonst geht nur der Normale
Code: 
<a href="#" target="" class="link">Link Text</a>

dann Erstelle mal nen Testserver wo wir uns das anschauen können
 
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
 
Code: 
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^^
 
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:

Code: 
.navih {
background-color:#E3DDDA;
width:164px;
margin:-5px 0 0px 0px;
text-align:center;
height:400px;
padding:10px;
position:relative;
z-index:2;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück