ComputerBase Menü
Aktuelles

CSS In DIV Kein Hovereffekt bei IE und Firefox

M

Moorleiche

Ensign
Registriert
Sep. 2005
Beiträge
152
Hallo,

ich habe ein kleines "Problem". Ich habe für meinen AV-Receiver (Onkyo TX-NR 807), den ich in mein Netzwerk integriert habe, in einem Forum ein kleines Tool gefunden, um diesen mittels Browser steuern zu können.

Das funktioniert soweit alles problemlos, zumindest in Opera. Im IE und Firefox leider nicht. Dort funktioniert die Steuerung an sich auch, allerdings fehlt dort der Hovereffekt, wenn man mit dem Mauszeiger über die einzelnen Steuerfelder fährt.

Mir ist das erst nicht aufgefallen, da ich nur Opera nutze und ich dachte auch immer Opera ist die Diva unter den Browsern, die zickig reagiert, wenn etwas fehlerhaft programmiert wurde.

Es ist ein Tool, das lokal vom Rechner aus gestartet wird. Es muß nicht in ein PHP-Umfeld oder ähnliches integriert werden.

Hier ist zuerst mal die index.html
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<HTML>
<head>
	<TITLE>Onkyo TX-NR807 Remote</TITLE>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<META HTTP-EQUIV="EXPIRES" CONTENT="Son, 03 Jan 2010 11:12:01 GMT">
	<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="no-store, must-revalidate">
	<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
	<script type="text/javascript" src="js/xptunes.js"></script>

	<link rel="Stylesheet" type="text/css" href="css/style2.css">	
</head>

<body class=center>
<span class=listheadline>TX-NR807 Remote</span>

<div class=container>

        <div>TX-NR807 Remote</div>
	<div class=bx onclick="command('iscp','PWR01','1')"><p>ON</p></div>
	<div class=bx onclick="command('iscp','PWR00','1')"><p>OFF</p></div>
	<div class=bx onclick="command('iscp','MVLDOWN','1')"><p>VOL -</p></div>
	<div class=bx onclick="command('iscp','MVLUP','1')"><p>VOL +</p></div>
	<div class=bx onclick="command('iscp','AMTTG','1')"><p>MUTE</p></div>
	<div class=bx onclick="command('iscp','MVL18','1')"><p>-58db</p></div>
	<div class=bx onclick="command('iscp','MVL25','1')"><p>-45db</p></div>
	<div class=bx onclick="command('iscp','MVL32','1')"><p>-32db</p></div>
	<div class=bx onclick="command('iscp','MVL40','1')"><p>-18db</p></div>
	<div class=spacer></div> 
	<div class=bx onclick="command('iscp','SWLDOWN','1')"><p>SubW -</p></div> 
	<div class=bx onclick="command('iscp','SWLUP','1')"><p>SubW +</p></div>


	<div class=bx onclick="command('iscp','TFRBDOWN','1')"><p>Bass -</p></div>
	<div class=bx onclick="command('iscp','TFRBUP','1')"><p>Bass +</p></div>

	<div class=bx onclick="command('iscp','TFRTDOWN','1')"><p>Höhen -</p></div>
	<div class=bx onclick="command('iscp','TFRTUP','1')"><p>Höhen +</p></div>

	<div class=bx onclick="command('iscp','ADQUP','1')"><p>Audys DEQ</p></div>
	<div class=bx onclick="command('iscp','ADVUP','1')"><p>Audys Vol</p></div>
	<div class=bx onclick="command('iscp','ADYUP','1')"><p>Audyssey</p></div>
	
	<div class=spacer></div>
	<div class=clear></div>

	<div class=bx onclick="command('iscp','SLI10','1')"><p>BLURAY</p></div>
        <div class=bx onclick="command('iscp','SLI01','1')"><p>T-HOME</p></div>
	<div class=bx onclick="command('iscp','SLI00','1')"><p>DVD</p></div>
	<div class=bx onclick="command('iscp','SLI02','1')"><p>PS 3</p></div>
	<div class=bx onclick="command('iscp','SLI20','1')"><p>KABEL TV</p></div>
	<div class=bx onclick="command('iscp','SLI26','1')"><p>FM/AM</p></div>
	<div class=bx onclick="command('iscp','SLI27','1')"><p>SERVER</p></div>
	<div class=bx onclick="command('iscp','SLI28','1')"><p>iRADIO</p></div>
	<div class=bx onclick="command('iscp','SLI40','1')"><p>PORT</p></div>
	<div class=spacer></div>  
	<div class=bx onclick="command('iscp','SLI22','1')"><p>PHONO</p></div>
	<div class=bx onclick="command('iscp','SLI03','1')"><p>Aux</p></div>
	<div class=bx onclick="command('iscp','SLI23','1')"><p>CD</p></div>
	<div class=bx onclick="command('iscp','DIFTG','1')"><p>INFO</p></div>
	<div class="noborder"></div>
	<div class=bx onclick="command('iscp','RASUP','1')"><p>RE-EQ</p></div>
	<div class=bx onclick="command('iscp','MOTUP','1')"><p>Music Opt</p></div>
	<div class=bx onclick="command('iscp','SLPUP','1')"><p>SLEEP -</p></div>
	<div class=bx onclick="command('iscp','SLPOFF','1')"><p>SLEEP OFF</p></div>
	<div class=spacer></div>  
	
	<div class=bx onclick="command('iscp','LMD11','1')"><p>Pure Audio</p></div>
	<div class=bx onclick="command('iscp','LMD01','1')"><p>Direct</p></div>	
	<div class=bx onclick="command('iscp','LMD00','1')"><p>Stereo</p></div>	
	<div class=bx onclick="command('iscp','LMD0C','1')"><p>All Stereo</p></div>
  <div class=bx onclick="command('iscp','LMD81','1')"><p>PLII Music</p></div>
  <div class=bx onclick="command('iscp','LMD83','1')"><p>Neo6 Music</p></div>
  <div class=bx onclick="command('iscp','LMD08','1')"><p>Orchestra</p></div>
  <div class=bx onclick="command('iscp','LMD0A','1')"><p>Studio-Mix</p></div>
  <div class=bx onclick="command('iscp','LMD09','1')"><p>Unplugged</p></div>
	<div class=spacer></div>  	
  <div class=bx onclick="command('iscp','LMD02','1')"><p>PLII +</p></div>			
  <div class=bx onclick="command('iscp','LMD04','1')"><p>THX +</p></div>
  <div class=bx onclick="command('iscp','LMD0D','1')"><p>Theater-Di</p></div>
  <div class=bx onclick="command('iscp','LMD0B','1')"><p>TV-Logic</p></div>	
  <div class=bx onclick="command('iscp','LMD05','1')"><p>Game-Act</p></div>	
  <div class=bx onclick="command('iscp','LMD03','1')"><p>Game-RPG</p></div>
  <div class=bx onclick="command('iscp','LMD06','1')"><p>Game-Rock</p></div>	
  <div class=bx onclick="command('iscp','LMD0E','1')"><p>Game-Sport</p></div>
  <div class=bx onclick="command('iscp','LMDUP','1')"><p>Change</p></div>
  
  <div class=spacer></div>
  <div class=bx onclick="command('iscp','NTCSTOP','1')"><p>STOP</p></div>	
	<div class=bx onclick="command('iscp','NTCPLAY','1')"><p>Play</p></div>	
	<div class=bx onclick="command('iscp','NTCPAUSE','1')"><p>Pause</p></div>
	<div class=bx onclick="command('iscp','NTCTRDN','1')"><p>Zurück</p></div>
	<div class=bx onclick="command('iscp','NTCTRUP','1')"><p>Vor</p></div>
	<div class=bx onclick="command('iscp','NTCRANDOM','1')"><p>Random</p></div>
        <div class=bx onclick="command('iscp','NTCREPEAT','1')"><p>Repeat</p></div>	
	<div class=bx onclick="command('iscp','NTCDISPLAY','1')"><p>Display</p></div>
	<div class=bx onclick="command('iscp','NTCRETURN','1')"><p>EXIT</p></div>	
	<div class=spacer></div>
	<div class=clear></div>
		
	<div class=bx><a href="index1.html"><p>CSS BLAU</p></a></div>
	<div class=bx onclick="command('iscp','NTCUP','1')"><p>↑</p></div>
	<div class=bx><a href="index2.html"><p>CSS ROT</p></a></div>
	<div class="noborder"></div>
	<div class=bx onclick="command('iscp','DIM00','1')"><p>DIM OFF</p></div>
	<div class="noborder"></div>
	<div class=bx onclick="command('iscp','OSDMENU','1')"><p>Settings</p></div>
	<div class=bx onclick="command('iscp','OSDUP','1')"><p>↑</p></div>
	<div class=bx onclick="command('iscp','OSDEXIT','1')"><p>Return</p></div>


	<div class=spacer></div>
	<div class=bx onclick="command('iscp','NTCLEFT','1')"><p>←</p></div>
	<div class=bx onclick="command('iscp','NTCSELECT','1')"><p>ENTER</p></div>
	<div class=bx onclick="command('iscp','NTCRIGHT','1')"><p>→</p></div>
	<div class="noborder"></div>
	<div class=bx onclick="command('iscp','DIM02','1')"><p>DIM MID</p></div>
	<div class="noborder"></div>
	<div class=bx onclick="command('iscp','OSDLEFT','1')"><p>←</p></div>
	<div class=bx onclick="command('iscp','OSDENTER','1')"><p>ENTER</p></div>
	<div class=bx onclick="command('iscp','OSDRIGHT','1')"><p>→</p></div>


	<div class=spacer></div>
	
	<div class=bx><a href="index3.html"><p>CSS GRÜN</p></a></div>
	<div class=bx onclick="command('iscp','NTCDOWN','1')"><p>↓</p></div>
	<div class=bx><a href="index4.html"><p>CSS ORANGE</p></a></div>
        <div class="noborder"></div>
	<div class=bx onclick="command('iscp','DIMDIM','1')"><p>DIM -+</p></div>
        <div class="noborder"></div>
	<div class=bx onclick="command('iscp','OSDAUDIO','1')"><p>AUDIO</p></div>
	<div class=bx onclick="command('iscp','OSDDOWN','1')"><p>↓</p></div>
	<div class=bx onclick="command('iscp','OSDVIDEO','1')"><p>VIDEO</p></div>	
	<div class=spacer></div>
	<div class=clear></div>
	
	<div class=bx onclick="command('iscp','DIF02','1')"><p>Ton ?</p></div>
	<div class=bx onclick="command('iscp','SLAUP','1')"><p>Ton A/D</p></div>
	<div class=bx onclick="command('iscp','DIF03','1')"><p>Bild ?</p></div>
	<div class=bx onclick="command('iscp','RES00','1')"><p>Through</p></div>
	<div class=bx onclick="command('iscp','RES01','1')"><p>Auto</p></div>
	<div class=bx onclick="command('iscp','RES02','1')"><p>576p</p></div>
	<div class=bx onclick="command('iscp','RES03','1')"><p>720p</p></div>
	<div class=bx onclick="command('iscp','RES04','1')"><p>1080i</p></div>
	<div class=bx onclick="command('iscp','RES05','1')"><p>1080p</p></div>
	<div class="noborder"></div>
	<div class="noborder"></div>
	<div class="noborder"></div>
	<div class="noborder"></div>
	<div class="noborder"></div>
	<div class="noborder"></div>
	<div class="noborder"></div>
	<div class=bx><a href="http://127.0.0.1:8081/start/index.html"><p>xpTunes</p></a></div>
</div>

</body>
</html>

Und hier die dazugehörige CSS-Datei

Code: 
* { 
border : 0px solid white;
margin : 0;
padding : 0;
outline: none;
} 
A { 
color : #ffffff;
text-decoration : none;
} 
A:hover, A:active { 
text-decoration : none; /*underline; */
} 
html, body { 
background-color : #000;
color : #ffffff;
font : 16px 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
} 

body.center { 
margin-top : 5%;
} 
body.center .container { 
position: absolute;
margin-left : auto;
margin-right : auto;
top: 10%;
left: 20%;
} 
/*******************************lists *******************************/
.bx,.noborder{
height:50px;
width:110px;
border:1px solid #1c2325;
text-align : center;
color:#fff;
line-height:50px;
float:left;

} 
.noborder{
border:1px solid #000;
}
.bx:hover { 
        background-image: url(../css/button-rot.jpg);
        width:110px;height:50px;
} 
.spacer{
clear:both;

}
.clear{
height:10px;
}
/*******************************fbox cover*******************************/
.listheadline { 
font : 26px 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
padding-right : 10px;
position : fixed;
right : 20px;
top : 10px;
color : #a5b6bd;
z-index : 5;
}

Im Anhang sieht man, wie es in Opera aussieht. Leider finde ich den Fehler nicht, da ich nicht der große HTML oder CSS Profi bin. Kann mir vielleicht einer von Euch helfen?


Viele Grüße Moorleiche
 

Anhänge

  • Onkyo-2.jpg
    Onkyo-2.jpg
    169,1 KB · Aufrufe: 234
Zuletzt bearbeitet:
Der Internet-Explorer unterstützt kein Hover auf Elemente, die nicht A sind. Die Funktionalität kannst du aber über Javascript nachrüsten, einfach mal nach IE hover fix googlen.

Beim Firefox sieht das auf den ersten Blick so aus, als ob der den Pfad von der Grafik nicht findet.
 
EDIT: Ab und zu sollte man sich den Code auch mal genau ansehen. Nach dem Entfernen der <p>-Tags klappt's auch mit dem IE. DANKE nochmals!

Hi,

die geposteten Tipps brachten leider keinen Erfolg. Trotzdem vielen Dank. Ich habe den Fehler nun durch ein ähnliches Tool, das für einen anderen AV-Receiver gemacht wurde, gefunden. Es lag am Doctype.

Diesen habe ich folgendermaßen geändert:

Alter Doctype:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Neuer Doctype:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

Jetzt habe ich aber mit dem IE ein anderes Problemchen. Im Firefox ist nun alles i.O. Wie man auf den Screenshot sieht, sind die Inhalte der verlinkten DIV's im IE nach unten versetzt.

Der Code sieht folgendermaßen aus:
Code: 
<div class=bx><a href="index2.html"><p>CSS ROT</p></a></div>

Gibt es für den IE da evtl. eine andere Lösung?


Viele Grüße Moorleiche

EDIT: Ab und zu sollte man sich den Code auch mal genau ansehen. Nach dem Entfernen der <p>-Tags klappt's auch mit dem IE. DANKE nochmals!
 

Anhänge

  • Onkyo-5.jpg
    Onkyo-5.jpg
    172 KB · Aufrufe: 216
Zuletzt bearbeitet:
@moorleiche

So trifft man sich wieder :-)

Hast Du eine Idee wie wir die aktuelle Konfiguration unseres Onkyos auslesen können ?

Ich habe so ein Programm für die serielle meines DENON AVR-3806, damit kann man die gesamte Konfiguration des Denons auslesen und am PC bearbeiten....

Leider habe ich für die Onkyos noch nicht derartiges gefunden....


Über css wird auch hier gesprochen:

http://yabb.jriver.com/interact/index.php?topic=43402.550
 
Zuletzt bearbeitet:
Hi alex1971,

tjojo, so klein ist das I-net. :D

Nee, habe auch schon gesucht und nichts dergleichen gefunden.


Viele Grüße
Moorleiche
 
Hast Du die andere websteuerung die den Apache Server benötigt mal getestet ?

Dieser Volume Regler bewegt der sich auch wenn man am Gerät die Lautstärke vertstellt,
oder funktioniert der nur in eine Richtung WEBBrowser > TX-NR807 ??

P.S. jaja dank Google/Bing entkommt einem keiner im WorlWideWeb... :-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

O
CSS Text in Container soll beinhaltenden Container vergrössern
Antworten
4
Aufrufe
745
obilaner
O
D
css nth frage
Antworten
8
Aufrufe
724
D0bby
D
N
Bilder wird oben an der Suchleiste abgeschnitten (HTML/CSS)
Antworten
3
Aufrufe
949
Janush
Janush
L
Div-Container mit klickbarer Grafik anzeigen oder verstecken
Antworten
16
Aufrufe
1.282
LeanderAT
L
W
CSS: Formatierungsprobleme mit einer Tabelle
Antworten
9
Aufrufe
724
Nixdorf
Nixdorf
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz