unkorrekte Darstellung in Firefox

Diskutiere unkorrekte Darstellung in Firefox im CSS Forum im Bereich Programmierung; Hallo liebe Experten, ich bin leider kein Programmierer sondern nur ein "normaler" Nutzer mit einigen wenigen HTML-Kenntnissen. Für die Webseite...
Neues Thema erstellen Antworten
  • unkorrekte Darstellung in Firefox Beitrag #1
K
Kurtus
New member
Beiträge
4
Punkte Reaktionen
0
Hallo liebe Experten,

ich bin leider kein Programmierer sondern nur ein "normaler" Nutzer mit einigen wenigen HTML-Kenntnissen.

Für die Webseite unseres Vereins habe ich ein CSS-Snippet integriert um die Ansicht der Vorstandschaft etwas lockerer zu gestalten.

Die Ansicht klappt in Google Chrome und Microsoft Edge, allerdings nicht im Firefox. Hier ist die Animation verschoben.

Live ist das ganze hier zu sehen: www . mcv-moemlingen . de / wir-ueber-uns / vorstandschaft
(einen Link arf ich leider noch nicht einfügen, daher die Leerzeichen zwischen den Punkten und den Slashes)

Es wäre nett, wenn mir jemand weiterhelfen könnte, damit die Ansicht in Firefox gleich der in Edge und Chrome wird.
Wie gesagt, ich bin absoluter Noob, daher seid mir für evtl. dumme Rückfragen nicht böse.

Vielen Dank im Voraus.
Kurt

Hier die Screenshots und weiter unten die HTML und CSS-Datei


Ansicht in Chrome und Edge:

Vorstandschaft_Edge_und_Chrome.JPG


bzw. korrekte Darstellung bei Mouse over in Chrome und Edge:

Vorstandschaft_Edge_und_Chrome_aktiv.JPG


So sieht die nicht korrekte Darstellung in Firefox aus:

Vorstandschaft_Firefox.JPG


bzw. die nicht korrekte Darstellung bei Mouse over in Firefox:

Vorstandschaft_Firefox_aktiv.JPG


Ich nutze Joomla 4 als CMS.


So sieht die HTML-Datei aus:

Code: 
<div class="zentriert">
<h1 style="text-align: center;"><span style="font-size: 18pt;"><strong><span style="color: #4636f5;">Die engere Vorstandschaft des Mömlinger Carneval Vereins</span></strong></span></h1>
<div class="zentriert">
<figure class="snip0067 red" data-wf-figure="1"><img src="images/vorstandschaft/helmut_gollas.jpg" alt="Helmut Gollas" /><figcaption><!--
<span style="font-size: 18pt; font-face: Macondo">Helmut Gollas</span>
//-->
<h1>Helmut Gollas</h1>
<p>Mir soin Fasching...</p>
<div class="icons">
<div class="mein-tooltip"><i class="icon-home"></i><span class="tooltiptext">Kirchrainstraße 25 63853 Mömlingen</span></div>
<div class="mein-tooltip"><i class="icon-envelope"></i><span class="tooltiptext">vorsitzender {at} mcv-moemlingen.de</span></div>
<div class="mein-tooltip"><i class="icon-phone"></i><span class="tooltiptext">Telefon 0170-8914300 </span></div>
</div>
</figcaption>
<div class="position">Vorsitzender</div>
</figure>
<figure class="snip0067 blue" data-wf-figure="1"><img src="images/vorstandschaft/Thomas_Hofmann.JPG" alt="Thomas Hofmann" /><figcaption>
<h1>Thomas Hofmann</h1>
<p>Fasching ist unser Leben...</p>
<div class="icons">
<div class="mein-tooltip"><i class="icon-home"></i><span class="tooltiptext">Rhönstr. 1 63853 Mömlingen</span></div>
<div class="mein-tooltip"><i class="icon-envelope"></i><span class="tooltiptext">praesident {at} mcv-moemlingen.de</span></div>
<div class="mein-tooltip"><i class="icon-phone"></i><span class="tooltiptext">Telefon 06022/30407 </span></div>
</div>
</figcaption>
<div class="position">Präsident</div>
</figure>
</div>
<div class="zentriert">
<figure class="snip0067 yellow" data-wf-figure="1"><img src="images/vorstandschaft/Janine Jakob.JPG" alt="Janine Jakob" /><figcaption>
<h1>Janine Jakob</h1>
<p>Ohne Moos nix los...</p>
<div class="icons">
<div class="mein-tooltip"><i class="icon-home"></i><span class="tooltiptext">Untere Kirchrainstr. 7 63853 Mömlingen</span></div>
<div class="mein-tooltip"><i class="icon-envelope"></i><span class="tooltiptext">schatzmeister {at} mcv-moemlingen.de</span></div>
<div class="mein-tooltip"><i class="icon-phone"></i><span class="tooltiptext">Telefon 0157-0402092 </span></div>
</div>
</figcaption>
<div class="position">Schatzmeisterin</div>
</figure>
<figure class="snip0067 green" data-wf-figure="1"><img src="images/vorstandschaft/Christopher Kraus.JPG" alt="Christopher Kraus" /><figcaption>
<h1>Christopher Kraus</h1>
<p>Wer schreibt, der bleibt...</p>
<div class="icons">
<div class="mein-tooltip"><i class="icon-home"></i><span class="tooltiptext">Obere Kirchrainstr. 10 63853 Mömlingen</span></div>
<div class="mein-tooltip"><i class="icon-envelope"></i><span class="tooltiptext">schriftfuehrer {at} mcv-moemlingen.de</span></div>
<div class="mein-tooltip"><i class="icon-phone"></i><span class="tooltiptext">Telefon 06022/681024 </span></div>
</div>
</figcaption>
<div class="position">Schriftführer</div>
</figure>
</div>
</div>


und dies ist die CSS-Datei dazu:

Code: 
.snip1543 {
background-color: #fff;
color: #ffffff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
margin: 10px 5px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: left;
width: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

.snip1543 *,
.snip1543 *:before,
.snip1543 *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}

.snip1543 img {
backface-visibility: hidden;
max-width: 100%;
vertical-align: top;
}

.snip1543:before,
.snip1543:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
background-color: #4636f5;
opacity: 0.5;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}

.snip1543:before {
-webkit-transform: skew(30deg) translateX(-80%);
transform: skew(30deg) translateX(-80%);
}

.snip1543:after {
-webkit-transform: skew(-30deg) translateX(-70%);
transform: skew(-30deg) translateX(-70%);
}

.snip1543 figcaption {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
bottom: 0;
padding: 25px 40% 25px 20px;
}

.snip1543 figcaption:before,
.snip1543 figcaption:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #4636f5;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
content: '';
opacity: 0.5;
z-index: -1;
}

.snip1543 figcaption:before {
-webkit-transform: skew(30deg) translateX(-100%);
transform: skew(30deg) translateX(-100%);
}

.snip1543 figcaption:after {
-webkit-transform: skew(-30deg) translateX(-90%);
transform: skew(-30deg) translateX(-90%);
}

.snip1543 h3,
.snip1543 p {
margin: 0;
opacity: 0;
letter-spacing: 1px;
}

.snip1543 h3 {
font-family: 'Teko', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1em;
text-transform: uppercase;
}

.snip1543 p {
font-size: 0.9em;
}

.snip1543 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}

.snip1543:hover h3,
.snip1543.hover h3,
.snip1543:hover p,
.snip1543.hover p {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0.9;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}

.snip1543:hover:before,
.snip1543.hover:before {
-webkit-transform: skew(30deg) translateX(-20%);
transform: skew(30deg) translateX(-20%);
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}

.snip1543:hover:after,
.snip1543.hover:after {
-webkit-transform: skew(-30deg) translateX(-10%);
transform: skew(-30deg) translateX(-10%);
}

.snip1543:hover figcaption:before,
.snip1543.hover figcaption:before {
-webkit-transform: skew(30deg) translateX(-40%);
transform: skew(30deg) translateX(-40%);
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}

.snip1543:hover figcaption:after,
.snip1543.hover figcaption:after {
-webkit-transform: skew(-30deg) translateX(-30%);
transform: skew(-30deg) translateX(-30%);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
 
  • unkorrekte Darstellung in Firefox Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Hallo @Kurtus und willkommen im Forum!

Im Firefox greift das overflow: hidden; für das betr. figure-Tag nicht. Ich kann im HTML-Inspektor das Problem leicht beseitigen, indem ich das display: table; bei dem figure-Tag weg nehme.

Versuche, dieses CSS hinzu zu fügen:
Code: 
figure[data-wf-figure] {
  display: block !important;
}
 
  • unkorrekte Darstellung in Firefox Beitrag #3
K
Kurtus
New member
Beiträge
4
Punkte Reaktionen
0
Hi Sempervivum,
vielen Dank für Deine schnelle Antwort.

Ich habe Deinen Code am Ende der CSS-Datei hinzugefügt.
Leider hat sich nichts geändert.
Mache ich etwas falsch?


Code: 
.snip1543 {
  background-color: #fff;
  color: #ffffff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 10px 5px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.snip1543 *,
.snip1543 *:before,
.snip1543 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1543 img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}

.snip1543:before,
.snip1543:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #4636f5;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1543:before {
  -webkit-transform: skew(30deg) translateX(-80%);
  transform: skew(30deg) translateX(-80%);
}

.snip1543:after {
  -webkit-transform: skew(-30deg) translateX(-70%);
  transform: skew(-30deg) translateX(-70%);
}

.snip1543 figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 25px 40% 25px 20px;
}

.snip1543 figcaption:before,
.snip1543 figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #4636f5;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}

.snip1543 figcaption:before {
  -webkit-transform: skew(30deg) translateX(-100%);
  transform: skew(30deg) translateX(-100%);
}

.snip1543 figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-90%);
  transform: skew(-30deg) translateX(-90%);
}

.snip1543 h3,
.snip1543 p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.snip1543 h3 {
  font-family: 'Teko', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.snip1543 p {
  font-size: 0.9em;
}

.snip1543 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1543:hover h3,
.snip1543.hover h3,
.snip1543:hover p,
.snip1543.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.snip1543:hover:before,
.snip1543.hover:before {
  -webkit-transform: skew(30deg) translateX(-20%);
  transform: skew(30deg) translateX(-20%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.snip1543:hover:after,
.snip1543.hover:after {
  -webkit-transform: skew(-30deg) translateX(-10%);
  transform: skew(-30deg) translateX(-10%);
}

.snip1543:hover figcaption:before,
.snip1543.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(-40%);
  transform: skew(30deg) translateX(-40%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip1543:hover figcaption:after,
.snip1543.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-30%);
  transform: skew(-30deg) translateX(-30%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
figure[data-wf-figure] {
  display: block !important;
}
 
  • unkorrekte Darstellung in Firefox Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Bei mir hing das alte CSS noch im Cache, nachdem ich mit Strg+F5 neu geladen habe, wurde das neue CSS wirksam und der Fehler war verschwunden.
 
  • unkorrekte Darstellung in Firefox Beitrag #5
K
Kurtus
New member
Beiträge
4
Punkte Reaktionen
0
Super, mit dem "Reset" des Caches hat es geklappt.

Nochmals vielen herzlichen Dank!
 
Thema:

unkorrekte Darstellung in Firefox

Oben Unten