Webentwicklung

Themen rund um den PC, Tipps zu Anwendungen und Erfahrungen bei der Web-Entwicklung.

Zur Diashow (Karussell)

IE-Fehler - IE-Bugs...

Fehler im Internet Explorer

Hier sind beispielhaft einige Verhaltensweisen des Internet Explorers aufgeführt, die das Web-Design bei den älteren Browsern doch erheblich erschwert haben.

"Invisible Hover Border Bug" des IE8

Der "Invisible Hover Border Bug"

Die Auswirkung

Beim Überfahren eines Links mit der Maus ("hover") soll eine Rahmenlinie unter einem Link erscheinen.
Hier ein Code-Beispiel für eine Realisierung:

CSS-Code


                                    
.skiplink {
  padding: 2px;
  position: relative;
}
.skiplink ul,
.skiplink li {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
  white-space: normal;
}
.skiplink li {
  display: inline;
}
.skiplink p {
  font-size: 9px;
}
.skiplink a {
  text-decoration: none;
  padding: 3px 10px;
}
.skiplink a:hover {
  border-bottom: 1px solid #d00;
  background-color: #FFD7C3;
  position: relative;
}
							    

XHTML-Code



<div class="skiplink ">
  <ul>
    <li><a href="#test">SkipLink1</a></li>
    <li><a href="#test">SkipLink2</a></li>
    <li><a href="#test">SkipLink3</a></li>
  </ul>
</div>
								    

Das funktioniert bei Firefox, Chrome und anderen CSS-konformen Browsern wie erwartet. Wenn die Rahmenbreite 1 Pixel beträgt (border-width: 1px;), funktioniert es beim Internet Explorer 8 manchmal nicht. Und da liegt das Problem - eben nur manchmal nicht. Wahrscheinlich zeichnet der IE8 die Rahmenlinie außerhalb des Darstellungsbereiches(engl.: viewport).
Das Verhalten bei Firefox und IE8 im Vergleich.

x
Firefox 3.6.
x
Internet Explorer 8.

Im Web sind mehrere Hinweise zu finden. Zum Beispiel ist der Fehler auf http://haslayout.net/ von Pete Evstratov aufgeführt. Die dort beschrieben Lösung des Problems ist allerdings nicht allgemeingültig. Sie funktioniert beispielsweise auf meiner Homepage und auch auf der Testseite, die ich eigens zur Analyse des Fehlers erstellt habe, nicht. Siehe Testseiten.

Außerdem ist da noch ein weiteres interessantes Phänomen zu beobachten. Im Test-Container 1(Linksliste rechts ausgerichtet über float: right;) funktioniert es nicht und im Container 2(Links zentriert) entspricht es der Erwartung.
Eine Erklärung habe ich noch nicht. Für entsprechende Hinweise bin ich dankbar. Nehmen Sie doch Kontakt auf oder schreiben Sie ins Gästebuch.
Der Unterschied zwischen den beiden Link-Listen ist folgender. Die rechts ausgerichtete Link-Liste ist als Liste codiert und die zentrierte Link-Liste mittels p-Tags (Absatzformatierung).
Hier die Code-Schnipsel:

XHTML-Code



<ul>
  <li><a href="#test">SkipLink1</a></li>
  <li><a href="#test">SkipLink2</a></li>
  ...
</ul>
								    

Variante als Liste



<p><a href="#test">QuickLink1</a></p>
<p><a href="#test">QuickLink2</a></p>
...
								    

Variante mit Absatzformatierung(p-Tag)

Eine mögliche Lösung

Nun bin ich durch Zufall auf eine mögliche Lösung gestoßen. Beim Experimentieren und Erstellen der Testseiten, hatte ich plötzlich das Phänomen, das es im IE wie gewünscht funktionierte.
Wie sich herausstellte, hatte ich in einer Quelle per CSS-Code die Hintergrundfarbe von body auf Weiß gesetzt und in der anderen Quelle nicht.
Das also war des Pudels Kern! Tatsächlich scheint das eine weitere (vielleicht die einzig wahre?) Möglichkeit zu sein, das Verhalten zu korrigieren.
Entweder man verzichtet auf das explizite Setzen der Hintergrundfarbe oder man setzt sie auf transparent. Sinn oder Unsinn dieser Maßnahme in Verbindung mit der Seitengestaltung soll hier nicht Gegenstand der Diskussion sein.

CSS-Code

...so funktioniert es nicht!



* { margin:0; padding: 0;}
    html { height: 100% }
    body { background: #fff;}
    ...
								    

... einziger Unterschied, so funktioniert es



* { margin:0; padding: 0; }
    html { height: 100% }
    body { /*background: #fff;*/ }
    ...
								    

... oder so, also Hintergrund auf "transparent"



* { margin:0; padding: 0; }
    html { height: 100% }
    body { background: transparent; }
    ...
								    

Der "Invisible Hover Border Bug" - Demo

Hier die beiden speziellen Testseiten. Nur bei Aufruf im Internet Explorer 8 sind die Auswirkungen sichtbar.
Getestet mit IE8 8.0.6001.18702, Windoes XP, IE8 8.0.6001.18999, Windows Vista und IE8 8.0.7600.16385, Windows 7

Seite mit explizitem Setzen der Hintergrundfarbe.
Seite ohne Setzen der Hintergrundfarbe.

Und noch eine Seite im alten Seitendesign zur Demonstration des Verhaltens.

Nehmen Sie doch Kontakt mit mir auf, wenn Sie andere Lösungen gefunden haben oder der Meinung sind, dass ich falsch liege.

Flackernde Bildchen beim IE8...

Hüpfende und flackernde Bildchen beim IE8

Bei der überarbeitung des Designs viel mir auf, dass die von mir bisher genutzte Variante zur Anzeige von Galerie-übersichten nicht so recht zum flexiblen Layout der Inhaltsspalte passt.
Der Nachteil der Tabellen besteht darin, dass das Layout ziemlich "festgenagelt" ist. Das kann durchaus auch vorteilhaft sein, wenn man das Layout für nicht standardkonforme Browser stabilisieren will.
OK., also ran an die fließenden Listen. Der Quellcode war recht schnell umgestellt und es funktionierte gut. Zumindest mit Firefox, Chrome, Safari und "Kollegen". Aber der Internet Explorer ... In den Versionen 6 und 7 funktionierte es klaglos, aber dann der Test in Version 8 und die Ernüchterung.
Hüpfende Bildchen - sieht ja ganz hübsch aus, wenn die Bildchen so hüpfen aber das Layout wird völlig zerschossen.
Inakzeptabel! Vermutlich hängt es damit zusammen, dass der IE8 die Bildchen für hover ständig nachlädt und sie dadurch ihre Position verlieren, also ein Offset entsteht - vielleicht? Im Internet war natürlich auch gleich etwas zu finden. Unter "Flickering Images with hover" zum Beispiel, findet man einiges.
Eine wirkliche Lösung für das Problem habe ich nicht gefunden. Aber es gibt schon tolle Alternativ-Lösungen im Netz zu finden.
Wieder einmal fand ich auf CSS-Play etwas Interessantes. Stu Nicolls hat das Problem umschifft, indem er beispielsweise die Bilder für den Hover-Effekt übereinanderlegt und bei "hover" den oberen Container auf transparent schaltet - prinzipiell ist das wohl so.
Die Methode ist schon schick hat aber den Nachteil, dass man für jedes Hover-Bildchen eine separate CSS-Definition braucht. Damit ist das ziemlich unflexibel.
Das Problem tritt allerdings nicht nur bei Hover-Effekten auf, bei denen zwischen zwei Bildern umgeschaltet wird, sondern auch allein dann, wenn ein Link ein Bild beinhaltet (wie im unten aufgeführten Beispiel).

Ich wollte nun eine flexible Lösung um jeder Zeit mit geringem Aufwand Galerieeinträge ergänzen zu können. Dann kam mir die Idee...
Es ist eine Art Holzhammer-Methode und auch kein wirkliche Lösung des Problems, ein "Rauch-Niederhalter" so zu sagen.
Aber es funktioniert. Das Layout bleibt stabil!
Die Methode ist simpel und wirkungsvoll.
Ich habe einfach die Listenelemente mit einer festen Größe versehen, also festgenagelt.
Das war's, so einfach...
Wer's sehen will, hier zum Vergleich die beiden Varianten (den Unterschied sieht man nur im IE8).
Fahren Sie mit der Maus über die Bildchen.

Hier die Code-Schnipsel der ursprünglichen Variante:
Der CSS-Code ...

CSS-Code



.subgalerie {
  width: 80%;
  margin: 2px auto;
  padding-top: 1px;
  padding-bottom: 1px;
}
.subgalerie h3 {
  text-align: left;
}
.subgalerie a {
  word-spacing: normal;
  white-space: normal;
}
.subgalerie ul {
  background: transparent;
  overflow: hidden;
  margin: auto;
  padding: 5px 40px;
}
.subgalerie li {
  float: left;
  list-style: none;
  text-align: center;
  margin: 5px;
}
.subgalerie img {
  border: 1px dotted #636;
  padding: 1px;
}
								

... der XHTML-Code

XHTML-Code



<div class="subgalerie">
  <h3>Breitbild (16:10, 1920x1200)</h3>
  <ul>
    <li><a href="../simages/wallpaper/apo_001.jpg" target="_blank">
      <img id="apo_001" src="../simages/wallpaper/oimages/apo_001.jpg"
      alt="x" name="apo_001" height="94" width="150"  /></a>
    </li>
    <li>
      ...
    </li>
    ...
  </ul>
  <div class="clearfloat"></div>
</div>
									

und so sieht's aus.

Hüpfende Bildchen wenn der Internet Explorer 8 genutzt wird

  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x

Und hier die "Lösung":
... CSS-Code ergänzt.

CSS-Code


.subgalerie li {
	width: 150px;
	height: 114px;
    } /* Platz fuer evtl. Unterschrift */

								

... das war's und so sieht es dann aus.

Festgenagelte Bildchen, auch beim Internet Explorer 8 kein Hüpfen mehr!

  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x
  • x

Überschriften mit CSS...

Dekorative überschriften mit CSS gestalten

Eine einfache Möglichkeit dekorative Schriftzüge allein unter Verwendung von Definitionen über CSS will ich hier kurz zeigen. Es nicht wirklich etwas besonderes, aber es zeigt, was allein durch geschicktes Kombinieren von Elementeigenschaften und -parametern möglich ist.
Das Ziel besteht darin, zwei Schriftzüge zu überlagern, um dadurch einen Blickfang zu schaffen.
Die Verschiebung der Texte ineinander erfolgt durch negative Werte für margin. Für die Positionierung wird margin und padding genutzt.
Beachten! Für padding dürfen keine negativen Werte gesetzt werden.
Ich verwende diese Möglichkeit bei der Titelgestaltung von Inhaltsbereichen (DIV-Container).

Siehe also oben oder eben hier...

Überschriften...

Dekorative Überschriften mit CSS

oder so mit drei Überlagerungen ...

Überschriften...

Überschriften...

Dekorative Überschriften mit CSS

Hier die Code-Schnipsel eines Style-Sheets als Beispiel:

CSS-Code



p.dekoschrift1 {
  color: #9291B2;
  font-size: 40px;
  font-weight: normal;
  font-style: italic;
  line-height: normal;
  background-color: #FFEDD5;
  margin: 0;
  padding: 0 0 10px 5px;
}
p.dekoschrift2 {
  color: #302F74;
  background-color: transparent;
  font-size: 22px;
  font-weight: bold;
  font-style: italic;
  line-height: normal;
  margin: -40px 0 0 10px;
  padding: 5px;
}
							

... der XHTML-Code

XHTML-Code



<p class="dekoschrift1">Überschriften...</p>
<p class="dekoschrift2">Dekorative Überschriften mit CSS</p>
								

Zur Beachtung: Die Eigenschaften text-align und vertical-align beeinflussen das Aussehen. Beachten Sie die Vererbung der Eigenschaften vom Elternelement.

Hinweis zum Internet Explorer: Abhängig von der verwendeten Version müssen ggf. Korrekturen durchgeführt werden.
Um versionsabhängige CSS-Korrekturen für den IE einzufügen eignen sich sowohl die Conditional Comments als auch CSS-Browser-Weichen bzw. CSS Filter.

Hover-Effekt mit CSS3 ...

Wachsende Bilder bei Hover

Hover-Effekt: Bilder beim Überfahren von Hyperlinks anzeigen

Ich finde es ganz dekorativ, wenn beim Überfahren von Hyperlinks ("hover") Bilder erscheinen. Das ist nicht neu und geht schon länger auch mit CSS1, unter Nutzung der Pseudoklasse :hover. Ich verwende auf unserer Webseite einen Effekt, bei dem das Bild beim Überfahren des Links aus dem Link "herauswächst". Dank der neuen Eigenschaften von CSS3 wird das möglich und kann recht einfach realisiert werden. Mit den neuen Eigenschaften können zum Beispiel Animationen realisiert werden. Im konkreten Fall werden die Eigenschaften für Übergangseffekte (Transition Properties) genutzt. Einen guten Überblick zu allen CSS3-Eigenschaften gibt es zum Beispiel auf w3schools.com.

Das Prinzip

Der textuelle Link wird einen Container gepackt, in dem dann auch das Bild erscheinen soll. Innerhalb des textuellen Links wird ein weiterer Container aufgebaut, der den Rahmen für das Bild bildet. Mittels diesen Containers kann das Bild später positioniert werden. Der innere Container wird auf unsichtbar geschaltet. Bei Überfahren des Links (hover) wird er auf sichtbar geschaltet.

Die Umsetzung

Der textuelle Link kann sich in einem Absatz befinden, in einer Liste oder Tabelle oder auch in einer sonstigen Container-Struktur (DIV-Struktur). Der normale Link wird in einen Container gepackt und innerhalb des Links wird ein weiterer Container angelegt. Achtung! Innerhalb des Links <a .> </a>, welches ein Inline-Element ist darf kein div-Element eingefügt werden. Als strukturierendes Element muss ein Inline-Element verwendet werden. Dafür gibt es span. Es funktioniert auch, wenn man div verwendet, allerdings ist der Code dann nicht standardkonform. Damit ist nicht sicher wie der Code von Browsern umgesetzt wird. Wenn span eingesetzt wird kommt es zum Flimmern beim Überfahren der Links. Das kann verhindert werden, indem man dem Inline-Element span die Eigenschaft display: block; zuweist.

Und hier der HTML-Code:

XHTML-Code



<div class="link_holder">
<a class="hover_img" href="#target">Target
<span class="hovercontainer">
	<img src="../image/image.jpg" alt="x" />
</span>
</a>
</div>
								

Hier die Code-Schnipsel des Style-Sheets als Beispiel:

CSS-Code



.hover_img {
  float: none;
  padding: 0;
  margin: 0;
  z-index: 900;
}
.hover_img img {
  transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  /* Firefox 4 */

  -webkit-transition-duration: 0.7s;
  /* Safari and Chrome */

  -o-transition-duration: 0.7s;
  /* Opera */
  display: block;
  width: 0px;
  height: 0px;
  border: medium none;
  overflow: hidden;
}
.hover_img:hover img {
  width: 300px;
  height: 200px;
  overflow: visible;
  visibility: visible;
}
.hovercontainer {
  left: 60px;
  top: -20px;
  position: relative;
  z-index: 1000;
}
.link_holder {
  width: 220px;
  height: 20px;
  padding: 2px;
  margin: 0;
  position: relative;
  display: block;
}
.link_holder a:hover {
  background-color: transparent;
}
.link_holder span {
  display: block;
}
							

Hinweis zum Internet Explorer: Bis einschließlich Version 9 funktionieren die Übergangseffekte nicht.

Und so könnte es aussehen:

Mit dem Mauszeiger über den Link fahren.

Über diese Seite

Hier gibt es Themen rund um die Webentwicklung und Experimentelles....

zum Seitenanfang

Kontakt

Sie haben Anregungen, Kritiken oder Hinweise, vielleicht auch Fragen?
Nehmen Sie Kontakt mit uns auf.


  Kontakt

Oder vielleicht suchen Sie etwas. Dann geben Sie den oder die Suchbegriff(e) unten ein. Danke!

Hinweis zum Scrollen beim Internet Explorer!

Beim Internet Explorer kann es beim Scrollen der Seite zu unschönen Ruckelerscheinungen kommen. Das liegt am Internet Explorer und tritt bei allen Versionen bis einschließlich 10 auf.
Unter Windows 7 tritt es auch bei der neuesten Versuion 11 (edge) auf. Unter Windows 10 sollte alles sauber funktionieren.

Neues auf dieser Seite Aktualisiert: 07.12.2017

5.8.2017

Kleine Panoramatour von Idstein und Umgebung.

28.7.2017

Ab sofort Verwendung von Google-Maps für die Anzeige von Positionsinformationen für Sphärische Panoramen und Panoramatouren.
zum Beispiel am Hexenturm in Idstein

18.05.2017

Panoramen der Burg Münzenberg.

07.05.2017

Panoramen von Idstein und Umgebung.

01.05.2017

Sphärische Panoramen von der Klosterruine Limburg bei Bad Dürkheim. Hier geht es zu den Panoramen.

20.04.2017

Neue Unterseiten mit Panoramen; es werden sphärische (Kugel-) und zylindrische Panoramen gezeigt.
Hier geht es zu den Panoramen.

21.5.2016

Codebeispiele auf Seite Webentwicklung jetzt mit "syntax highlighting ".

29.4.2016

Abgeschrägte DIV-Container ähnlich denen der Blog-Seiten.

13.4.2016

Galerien Fuerteventura erweitert. Fotos der Küstenregion hinzugefügt.

12.4.2016

Ab sofort sind einige Galerien mit Musik unterlegt. Die Musik startet automatisch beim Aufruf der Gelerie. Unter Android und iOS wird die Musik nicht automatisch gestartet. Wenn's stört, einfach links oben auf das Lautsprechersymbol tippen / klicken.

12.4.2016

Galerien Fuerteventura erweitert. Fotos der Reise 2012 hinzugefügt.

10.4.2016

Neue Video-Clips von unserer Südafrikareise auf die Seite gestellt.
Hier gehts zu den Clips

9.4.2016

Neues Design für unsere Web-Blogs ... Web Blog und unser Foto Blog.

8.4.2016

Einige Hürden in der Navigation genommen ... Sprung zu lokalen Ankern mit automatischen Offset bei fixierter Menüleiste, Sprung zu Ankern in verdeckten Bootsrap-Tabs und Bootstrap-Accordions. Erklärungen zu den Themen gibt es in einem speziellen Beitrag im Blog und auf dieser Seite... schauen sie wieder vorbei.

6.4.2016

Karussell auf Hauptseite des "Fototagebuchs" erweitert. Jetzt für jedes Jahr ein Intro-Bild. Sprung direkt in den Jahrgangs-Reiter möglich.

3.4.2016

Navigation verbessert - Auf Galerieunterseiten mit Informationen in Bootstrap-Accordion können jetzt direkt angesprungen werden.

2.4.2016

Neuer Effekt für Fusszeile (Footer) - Fusszeile wird aufgedeckt (revealed footer) beim Scrollen bis zum Seitenende oder beim Sprung zum Impressum.

1.4.2016

Navigation verbessert - Fototagebücher (in Bootstrap-Tabs) können jetzt direkt angesprungen werden.

31.03.2016

Weitere Video-Clips von den Reisen nach Indien, China und Südafrika.
Footer jetzt fixiert und "erscheinend" (revealed footer) nur mit CSS-Anpassungen eingeführt.

30.03.2016

Video-Clips von unserer Indien-Rajasthan-Reise "Märchen und Mythen im Land der Maharadschas" auf die Seite gestellt.
Hier gehts zu den Clips

25.03.2016

Video-Clips von unserer Südafrikareise auf die Seite gestellt.
Hier gehts zu den Clips

24.03.2016

Video-Clips von unserer Reise "Auf den Spuren chinesischer Kaiser - Chinas Kaiserstädte" auf die Seite gestellt.
Hier gehts zu den Clips

24.03.2016

Fototagebuch ergänzt. Neu ist Fototagebuch 2015.

21.03.2016

Menüs umgestaltet. Jetzt nutzerfreundlicher für Touch-Geräte. Unterseiten können jetzt direkt angewählt werden. Auf Mobilen Geräten wird wird jetzt Menüleiste nach 5 Sekunden ausgeblendet. Beim Scrollen oder bei Mausklick (bzw. Touch) wird sie wieder eingeblendet.

20.03.2016

Fototagebuch ergänzt. Neu ist Fototagebuch 2014, Fototagebuch 2012 und Fototagebuch 2013.

19.03.2016

Fototagebücher ergänzt. Neu sind Fototagebuch 2011, Fototagebuch 2012 und Fototagebuch 2013.

16.03.2016

Karussell auf Hauptseite und Galerieseiten modfiziert. Jetzt kann von da direkt in Galerien gesprungen werden.

15.03.2016

Galerien Teneriffa erstellt. Fotos der Reisen 2001 und 2005.

12.3.2016

Neue Galerie Orchideen.

11.3.2016

Galerien Vögel und Kakteen mit Juicebox ™ erstellt.
Galerie Bäume ist neu.

8.03.2016

Galerien Madeira, Mallorca, Gran Canaria und Lanzarote mit Juicebox ™ erstellt.

28.02.2016

Galerien Wiesbaden, Köln und Dresden mit Juicebox ™ erstellt.

24.02.2016

Galerien China, Usbekistan, Indien, Argentien&Brasilien mit Juicebox ™ erstellt.

Februar 2016

Überarbeitung der Seite. Benutzung des Frameworks Bootstrap.
Damit wird die Erstellung responsiver Layouts deutlich einfacher. Als Open-Source-Projekt wird es von einer breiten Entwicklergemeinde gepflegt und weiterentwickelt.

7.2.2016

Neues Layout und neue Galerie-Eingangsseite:
Dresden
Stadt & Land

30.01.2016

Neues Layout und neue Galerie-Eingangsseite:
Tunesien
Andalusien

24.01.2016

Neues Layout und neue Galerie-Eingangsseite:
China
Usbekistan
Argentinien & Brasilien
Südafrika

19.01.2016

x
Galerie "Vögel" im neuen Layout.

10.01.2016

Parallax-Scrolling für die Hauptseiten.

02.01.2016

Überarbeitung der Seiten. Icons für Anwahl von Inhalten eingesetzt. Galerie-Seiten mit Icons für Anwahl der Galerien.

20.12.2015

Neue Galerien werden jetzt mit Juicebox ™ erstellt.

Hier eine Galerie mit Tieren Südafrikas Teil 1 x und hier gibt es Teil 2, Krüger Nationalpark x