php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 27-10-2009, 11:46
phobia
 Registrierter Benutzer
Links : Onlinestatus : phobia ist offline
Registriert seit: Dec 2005
Beiträge: 60
phobia ist zur Zeit noch ein unbeschriebenes Blatt
Lightbulb [gelöst] CSS/JS Hover Problem bei IE7

Hallo,

ich habe das Problem dass IE7 nur in bestimmten Bereichen meiner Navilinks den css hover sowie den js onmouseover auslöst.
Der Hover scheint nur im bereich des bildes und auf den obersten pixeln des ganzen rechtecks auszulösen.

IE8 und FF funktionieren einwandfrei.

Habe hier http://1ngo.de/web/IE7-link_area.html etwas gefunden dass der IE7 bei relativer positionierung einen Bug mit der Linkarea hat.
Allerdings haben mich die dort gemachten Angaben mit breite/höhe in em auch nicht weiter gebracht.

Hoffe mir kann Jemand weiter helfen.
Grüße


Die Links:
HTML-Code:
<a href="#" id="navi1" class="navi" onmouseover="reorder('1');" onclick="setCurrent(1);">
    <img src="./img/historie100.jpg" class="navi">
    <div class="navi"><span class="title">Home</span><br>Text Text Text Text<br>Text Text Text Text</div>
  </a>
  <a href="#" id="navi2" class="navi" onmouseover="reorder('2');" onclick="setCurrent(2);">
    <img src="./img/historie100.jpg" class="navi">
    <div class="navi"><span class="title">Unternehmen</span><br>Text Text Text Text<br>Text Text Text Text</div>
  </a>  
  <a href="#" id="navi3" class="navi" onmouseover="reorder('3');" onclick="setCurrent(3);" style="position:relative; left:-160px;">
    <img src="./img/produkte100.jpg" class="navi">
    <div class="navi"><span class="title">Produkte</span><br>Text Text Text Text<br>Text Text Text Text</div>
  </a>
...
Zugehörige CSS:
Code:
a.navi{
position:relative;
width:270px;
height:80px; 
color:#fff; 
padding:5px; 
display:block;
float:left;
background: #124592;
z-index:10;

}

a.navi:hover{
position:relative;
width:270px;
height:80px; 
color:#fff; 
padding:5px; 
display:block;
float:left;
background: #2356a3;

}

img.navi{
width:100px;
border: 0px;
float:left;
}
div.navi{
padding-left:15px;
float:left;
text-decoration:none;
font-weight:normal;
font-size:10px;
}
.title{
font-weight:bold;
font-size:14px;
}

Geändert von phobia (27-10-2009 um 12:01 Uhr)
Mit Zitat antworten
  #2 (permalink)  
Alt 27-10-2009, 11:51
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

wenn man dem Browser ungültiges HTML vorsetzt, kann es schon mal passieren, dass das Ergebnis nicht so aussieht, wie man sich erhofft hatte. Am besten du gehst mal auf The W3C Markup Validation Service und lädst deine Seite hoch oder kopierst den Quelltext rein und behebst dann alle gefundenen Fehler.

Gruß,

Amica
Mit Zitat antworten
  #3 (permalink)  
Alt 27-10-2009, 11:54
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Hmm. Ich kann das Problem so nicht nachvollziehen. Hast du ein Online-Beispiel verfügbar?. Oder ein klein wenig mehr Code? Inkl. JavaScript.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #4 (permalink)  
Alt 27-10-2009, 13:51
phobia
 Registrierter Benutzer
Links : Onlinestatus : phobia ist offline
Registriert seit: Dec 2005
Beiträge: 60
phobia ist zur Zeit noch ein unbeschriebenes Blatt
Standard

@ AmicaNoctis:

hab nun alle bis auf diesen Fehler behoben:

Zitat:
document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<div class="navi"><span class="title">Home</span><br />Text Text Text Text<b



The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Man darf wohl kein <div> innerhalb eines <a> verwenden? (siehe meine Links oben)
Wie mache ich dann am besten einen Link bei dem auf der linken seite ein Bild ist und rechts mehrzeiliger Text dazu?

@Kropff:
Moment muss es mal online stellen dann poste ich einen Link
Mit Zitat antworten
  #5 (permalink)  
Alt 27-10-2009, 13:58
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von phobia Beitrag anzeigen
Man darf wohl kein <div> innerhalb eines <a> verwenden?
Nein, darf man nicht. Links (a-Elemente) sind Inline-Elemente und div ist ein Block-Element. Blockelemente dürfen in der Regel andere Blockelemente und/oder Inline-Elemente enthalten. Inline-Elemente dagegen dürfen nur Inline-Elemente enthalten. Das ist natürlich nur eine Faustregel. Wie Elemente verschachtelt werden dürfen, ist im Einzelnen sehr unterschiedlich, aber in jedem Falle durch die Spezifikation genau festgelegt.

Zitat:
Zitat von phobia Beitrag anzeigen
Wie mache ich dann am besten einen Link bei dem auf der linken seite ein Bild ist und rechts mehrzeiliger Text dazu?
Das Bild setzt du auf float: left und das sollte* es schon gewesen sein.

___
* hängt natürlich stark davon ab, was du sonst so machst, daher wäre ein Onlinebeispiel wirklich nicht schlecht.
Mit Zitat antworten
  #6 (permalink)  
Alt 27-10-2009, 14:21
phobia
 Registrierter Benutzer
Links : Onlinestatus : phobia ist offline
Registriert seit: Dec 2005
Beiträge: 60
phobia ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ok habe nen validen Code
Zitat:
This document was successfully checked as XHTML 1.0 Transitional!
Links sehen nun so aus:
HTML-Code:
 <a href="#" id="navi1" class="navi" onmouseover="reorder('1');" onclick="setCurrent(1);">
    <img src="./img/historie100.jpg" class="navi" alt="" />
    <span class="title">Home</span><br /><span class="navi">Text Text Text Text<br />Text Text Text Text</span>
  </a>
Die Seite gibts hier Test
Mit IE8 bzw FF sieht man wie es funktionieren sollte sobald man über die Navi geht - IE7 tut aber immer noch nicht.
Mit Zitat antworten
  #7 (permalink)  
Alt 27-10-2009, 16:49
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hast du mal versucht, die Seite im IE8 zu debuggen, wenn er im IE7-Modus läuft?

HTML-Code:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Ich vermute, es liegt gar nicht am CSS-, sondern am JavaScript-Code. Aber wie gesagt, das ist nur geraten.
Mit Zitat antworten
  #8 (permalink)  
Alt 27-10-2009, 17:14
phobia
 Registrierter Benutzer
Links : Onlinestatus : phobia ist offline
Registriert seit: Dec 2005
Beiträge: 60
phobia ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Nein noch nicht, habe ich noch gar nicht dran gedacht - versuche ich dann jetzt mal.

Aber wenn es am js läge müsste dann nicht der normale a:hover effekt aus dem css angezeigt werden und nur das mouseover nicht funktionieren?
Mit Zitat antworten
  #9 (permalink)  
Alt 27-10-2009, 17:18
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von phobia Beitrag anzeigen
Nein noch nicht, habe ich noch gar nicht dran gedacht - versuche ich dann jetzt mal.

Aber wenn es am js läge müsste dann nicht der normale a:hover effekt aus dem css angezeigt werden und nur das mouseover nicht funktionieren?
Nicht unbedingt, das hängt von der Aktion ab. Außerdem wird kein Fehler ausgeworfen. ich vermute, das Problem könnte darin liegen, dass die ersten beiden Elemente kein position haben.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #10 (permalink)  
Alt 27-10-2009, 17:41
phobia
 Registrierter Benutzer
Links : Onlinestatus : phobia ist offline
Registriert seit: Dec 2005
Beiträge: 60
phobia ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Also hab nun den IE8 Debugger laufen lassen im IE7 mode - kommen keinerlei Fehlermeldungen.

@Kropff: hab eben mal den ersten beiden Elementen auch nen position:relative; left:0px; gegeben aber das ändert nichts.
(das position:relative hatten sie eigentlich eh schon alle von der css)
Mit Zitat antworten
  #11 (permalink)  
Alt 27-10-2009, 18:33
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von phobia Beitrag anzeigen
Also hab nun den IE8 Debugger laufen lassen im IE7 mode - kommen keinerlei Fehlermeldungen.
Das ist ja schonmal gut, aber hast du auch mal Breakpoints gesetzt, um zu sehen, ob die Events so feuern wie sie sollen?
Mit Zitat antworten
  #12 (permalink)  
Alt 27-10-2009, 18:49
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Ich weiß nicht, ob es von Belang ist, aber beim IE7 tauchen immer wieder Buchstaben auf, in einer Art Fade-Effekt. Und die scheinen über den betroffenen Link-Elementen zu liegen. W, T, G und ich glaube auch ein K.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #13 (permalink)  
Alt 28-10-2009, 10:14
phobia
 Registrierter Benutzer
Links : Onlinestatus : phobia ist offline
Registriert seit: Dec 2005
Beiträge: 60
phobia ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Oh mann das ist es! Die Buchstaben sind absolut positioniert und sollten nach z-index eigentlich hinter der Navi liegen, aber der IE7 scheint hier irgendwas nicht richtig zu interpretieren, sieht man auch daran dass das fast transparente W hier über der navi sichtbar ist.

Sobald ich die Buchstabenbilder auskommentiere läuft alles.

Großes DANKE

Jetzt mal schauen wie oder ob ich die Buchstaben wirklich hinter die Navi bekomme ohne dass deren Hover dadurch gestört wird...
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hover effekt problem mad-design HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 5 05-12-2008 21:59
problem mit hover auf div joextra HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 22-11-2007 18:34
hover effekt problem Schumi0815 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 14 25-04-2006 12:35
problem bei hover td the.gatekeeper HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 1 14-09-2004 21:15
css - Problem mit festen Schriftgrößen bei a:hover hOk HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 2 30-10-2001 18:38

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 23:09 Uhr.