jQuery Plugin Galleria zeigt im Opera keine Thumbnails

Wieder einmal stieß ich wärend meiner Arbeit an einem Webprojekt auf ein Problem mit dem Browser Opera. Diesmal im Zusammenhang mit Galleria (jQuery Galerie Plugin). Diese recht schicke Galerie war perfekt für das anliegende Projekt geeignet. Leider wurden die Thumbnailgrafiken im Opera nicht angezeigt. Nach etwas Debugging fand ich das Problem. Dem Thumb div (class galleria-image) wurde eine Höhe und eine Breite von 0px zugewiesen, dem Bild demnach auch. Dies trat allerdings nur im Opera auf.
Beheben lässt sich das ganze, indem man in der CSS Datei galleria.classic.css die Attribute height und width bei .galleria-image mit !important markiert. Dann funtionierts auch im Opera.

Ob das hier erwähnte auch mit andern Styles als der classic funktioniert weiß ich nicht, da ich keinen anderen Style benutzt habe.

Werbung

Opera schneidet Seiteninhalt ab

Im Opera kann es vorkommen, dass dieser Inhalte abschneidet oder gar nicht anzeigt. Dies ist mir bei ausgeschalteter „an Breite anpassen“-Funktion aufgefallen.

Versuch man über folgendes CSS einem Element eine Größe zu geben ignoriert Opera dies, bzw. kann es nicht interpretieren.

.myElement {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Hierbei wird ein Element über den gesamten Bereich des darüberliegenden Elements gespannt. Ob das Element relative oder absolute positioniert is spielt dabei keine Rolle. Opera kann mit diesen angaben nicht umgehen. Abhilfe schafft hier folgendes:

.myElement {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%; /* Opera Bugfix */
}

Durch angabe einer Höhe macht auch Opera was er soll.

Wie man ein Element über einen bestimmten Bereich aufzieht

Ich habe heute versucht einen div über einen bestimmten Bereich der Seite zu ziehen. Um’s genauer zu machen war es der Content Bereich einer Website. Dabei wolle ich, dass sich dieser über die Seite erstreckt. Möglich wird das, wenn man das Element absolute Positioniert:

#container {
  position: relative;
  margin: 3% auto 0;
  min-height: 100%;
}

#contentwrapper {
  width: 100%;
  position: absolute;
  top: 4.85em;
  bottom: 0;
}

Hier noch der relevante HTML Ausschnitt:

<div id="container">
<div id="header">
[...]
</div> <!-- header -->

<div id="contentwrapper">
 [...]
</div> <!-- contentwrapper -->
</div> <!-- container -->

Der umliegende div #container wird per min-width auf die gesammte Höhe gebracht und relativ Positioniert. Der Content-Div wird dann absolute von oben bis nach unten gezogen. Die 4.85em oberer Abstand liegen daran, dass bei mir über dem Content noch ein Header ist.

Linktext in einem Element zentrieren

Um den Linktext in einer horizontalen Navigation zentriert in den <li> anzuzeigen habe ich folgenden CSS Code genutzt:

#navigation li {
  float: left;
  width: 10.875em;
  background-position: -3.65em -11.7em;
  margin-left: -1.3em;
  position: relative;
	
  z-index: 1;
}

#navigation li a {
  /* Zentriert den Text */
  position: absolute; 
  left: 50%; 
  text-align:center; 
  width: 100%; 
  margin-left: -50%;
  /* vertikale Zentrierung */
  padding-top: 0.4em;
	
  color: #828282;
}

Anklickbare SVGs im Opera 8.54

Will man ein SVG anklickbar machen klappt dies indem man einen Link darüber legt. Das ganze funktioniert in den gängigsten Browsern auch wunderbar. Opera 8.54 hat damit allerdings Probleme.

Wie ich aus dem Changelog von Opera 9 erfahren habe, ist es vorher nicht möglich gewesen ein positioniertes Element vor einen object Tag zu legen. Unter der Überschrift „Display“ erfährt man folgendes:

„Allowed positioned elements to appear in front of iframes and objects.“

Link zum Changelog