Eisbergsalat
Neues Mitglied
Hi
mein Problem sieht wie folgt aus: Es funtioniert alles wunderbar. Nur nicht in Safari. Der Teil der Seite ist mit einem Hintergrundbild hinterlegt welches fest positioniert ist. Unter IExplorer 11, Chrome, Firefox wird das auch ohne Probleme dargestellt, nur unter Safari habe ich kein Hintergrundbild, sondern nur die Hintergrundfarbe. Weiß jemand woran das liegen könnte. Ich hab mich auch schon dumm und dämlich gesucht im netz und keine antwort dafür gefunden.
Hier der HTML5 Code für das Problem.
Dass ist der CSS eintrag für #shows
Und hier ist der Code für den Slider
ich bin noch neuling und hoffe das sich jemand dazu herablässt mir zu helfen.. :)
Danke
mein Problem sieht wie folgt aus: Es funtioniert alles wunderbar. Nur nicht in Safari. Der Teil der Seite ist mit einem Hintergrundbild hinterlegt welches fest positioniert ist. Unter IExplorer 11, Chrome, Firefox wird das auch ohne Probleme dargestellt, nur unter Safari habe ich kein Hintergrundbild, sondern nur die Hintergrundfarbe. Weiß jemand woran das liegen könnte. Ich hab mich auch schon dumm und dämlich gesucht im netz und keine antwort dafür gefunden.
Hier der HTML5 Code für das Problem.
HTML:
<section id="shows">
<div class="text-container">
<div class="row">
<div class="two columns header-col">
<h1><span>Auftritte</span></h1>
</div>
<div class="ten columns flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<blockquote>
<p>19. Februar 2015
<br>Das Fest der Feste - Die Party geht weiter
<br>Dresden - Messe Dresden
</p>
<cite>Wolf</cite>
</blockquote>
</li> <!-- slide ends -->
<li>
<blockquote>
<p>
<br>08. März 2015
<br>Die Große Schlager Star Parade
</p>
<cite>Wolf</cite>
</blockquote>
</li> <!-- slide ends -->
<li>
<blockquote>
<p>19. April 2015
<br>Die große Schlager-Starparade München
<br>
</p>
<cite>Wolf</cite>
</blockquote>
</li> <!-- slide ends -->
</ul>
</div> <!-- div.flexslider ends -->
</div> <!-- div.flex-container ends -->
</div> <!-- row ends -->
</div> <!-- text-container ends -->
</section> <!-- shows Section End-->Dass ist der CSS eintrag für #shows
Code:
#shows {
background: #1F1F1F url(../images/testimonials-bg.jpg) no-repeat center center;
background-size: cover !important;
-webkit-background-size: cover !important;
background-attachment: fixed;
position: relative;
min-height: 200px;
width: 100%;
overflow: hidden;
}
#shows .text-container {
padding-top: 96px;
padding-bottom: 66px;
}
#shows h1 {
font: 18px/24px 'opensans-bold', sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
}
#shows h1 span { display: none; }
#shows .header-col { padding-top: 9px; }
#shows .header-col h1:before {
font-family: 'FontAwesome';
content: "\f10d";
padding-right: 10px;
font-size: 72px;
line-height: 72px;
text-align: left;
float: left;
color: #fff;
}
/* Blockquotes */
#shows blockquote {
margin: 0 0px 30px 0px;
padding-left: 0;
position: relative;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
}
#shows blockquote:before { content: none; }
#shows blockquote p {
font-family: 'librebaskerville-italic', serif;
padding: 0;
font-size: 24px;
line-height: 48px;
color: #fff
}
#shows blockquote cite {
display: block;
font-size: 12px;
font-style: normal;
line-height: 18px;
color: #fff;
}
#shows blockquote cite:before { content: "\2014 \0020"; }
#shows blockquote cite a,
#shows blockquote cite a:visited { color: #8B9798; border: none }Und hier ist der Code für den Slider
Code:
/* Flex Slider
/* ------------------------------------------------------------------ */
/* Reset */
.flexslider a:active,
.flexslider a:focus { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.slides li { margin: 0; padding: 0;}
/* Necessary Styles */
.flexslider {
position: relative;
zoom: 1;
margin: 0;
padding: 0;
}
.flexslider .slides { zoom: 1; }
.flexslider .slides > li { position: relative; }
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { zoom: 1; position: relative; }
/* Clearfix for .slides */
.slides:before,
.slides:after {
content: " ";
display: table;
}
.slides:after {
clear: both;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block; }
/* Slider Styles */
.slides { zoom: 1; }
.slides > li {
/*margin-right: 5px; */
overflow: hidden;
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -20px;
text-align: left;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 12px;
height: 12px;
display: block;
background: #ddd;
background: rgba(255, 255, 255, .3);
cursor: pointer;
text-indent: -9999px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow: inset 0 0 3px rgba(255, 255, 255, .3);
}
.flex-control-paging li a:hover {
background: #CCC;
background: rgba(255, 255, 255, .7);
}
.flex-control-paging li a.flex-active {
background: #fff;
background: rgba(255, 255, 255, .9);
cursor: default;
}ich bin noch neuling und hoffe das sich jemand dazu herablässt mir zu helfen.. :)
Danke
