[iPad]Nach Hintergrundbild weiß trotz Deklaration

test_nick · #1 (**permalink**) 25.06.2011, 12:45

Hallo Leute,

ich habe ein Problem mit einer Webseite. Ich bin fast am verzweifeln woran es denn nun liegen könnte. An allen Browsern die ich bisher getestet hatte funktioniert es. Nur am iPad tritt ein Problem auf. Ich öffne meine Seite und er zeigt sie mir an. Problem: Anstatt den restlichen Hintergrund (nach dem Verlauf) mit Rot zu füllen, färbt er mir diesen in weiß ein, trotz CSS-Deklartion.

Hier einmal die Body Deklaration:

Code:

body {
    background: url('../images/background.jpg') repeat-x #fb0113;
}

Und nun ein Screen vom iPad:

Uploaded with ImageShack.us

Crizzo · #2 (**permalink**) 27.06.2011, 07:57

Hi!

Änder mal die Reihenfolge der "background"-Kurzfassung entsprechend ab: Colors and backgrounds

test_nick · #3 (**permalink**) 27.06.2011, 10:43

Hallo,

auf die Idee bin ich leider auch schon gekommen, dennoch funktioniert dies leider nicht

Was mir komisch vorkommt, dass nur der Safari mobile damit Probleme aufweist.

Crizzo · #4 (**permalink**) 27.06.2011, 12:05

Und wenn du es ohne die Kurz-Variante mit "background-color: #FARBE" probierst?

test_nick · #5 (**permalink**) 27.06.2011, 12:17

Nein, es funktioniert leider immer noch nicht

Ich habe aber vergessen zu sagen, dass es manchmal funktioniert und manchmal das oben genannte Problem auftritt.

Crizzo · #6 (**permalink**) 27.06.2011, 12:21

Wird die Eigenschaft vielleicht von irgendwas überschrieben?

Ich hab leider kein iPad, ich kann da nix mit testen, nur vermuten.

test_nick · #7 (**permalink**) 27.06.2011, 12:24

Ich denke nicht, da es ja auf allen anderen Browsern funktionisfähig ist. z.B. Firefox auf dem Mac und Safari auf Windows. Außerdem wird die ausstehende Hintergrundfläche manchmal mit der angegebnen Farbe gefüllt. Firebug zeigt mir auch keine Überschreibung an.

EvT · #8 (**permalink**) 27.06.2011, 12:54

Mobile Safari hat einige Bugs mit Backgrounds. Um nicht länger rumraten zu müssen, zeigst Du uns am besten einmal Deinen Code, ein Screenshot hilft hier nicht wirklich weiter.

test_nick · #9 (**permalink**) 27.06.2011, 13:02

HTML-Quelltext:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <!-- Start der HTML Datei, Deutsch als XML-Inhaltssprache setzen, en für Englisch -->
    <!-- Copyright © 2011 by Jan Schlösser -->
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <!-- UTF-8 als Zeichenkodierung setzen -->
        <meta http-equiv="content-language" content="de" /> <!-- Deutsch als Inhaltssprache setzen, en für Englisch -->

        <meta name="description" content="Pasquale und sein nettes Team freuen sich darauf, Sie mit unserem Pizza-Service und neu eröffneten Cafè in Norf begrüßen zu dürfen." /> <!-- Beschreibung der Startseite -->

        <meta name="keywords" content="Pizza, pizza, da pasquale, pizzeria in neuss, pizzeria in neuss norf, norf, meinnorf, neuss, pizza neuss, pizza norf, pasquale, pizza pasquale, cafe pasquale, eiscafe neuss, eiscafe norf, cafe norf, cafe neuss, netto norf, kaffee neuss, kaffee pasquale" /> <!-- Stichwörter die diese Seite beschreiben -->
        <meta name="author" content="Jan Schlösser" /> <!-- Autor der Seite -->
        <meta name="copyright" content="Copyright © 2011 Jan Schlösser" /> <!-- Copyright -->
        <meta name="robots" content="index, follow" /> <!-- Suchmaschienen wie z.B. Google dürfen dieser Seite folgen. Falls diese Verhalten nicht erwünscht ist, bitte das Attribut content auf noindex setzen -->

        <link rel="shortcut icon" type="image/x-icon" href="./images/fav/favicon.ico" /> <!-- Definiert das Icon oben in der Titelleiste -->
        <link rel="stylesheet" type="text/css" href="css/css.css" media="all" charset="utf-8" /> <!-- Bindet die entsprechende Stylesheetdatei (Gestaltungsdatei) ein und setzt den zu verwendeten Zeichensatz auf UTF-8 -->

        <link rel="stylesheet" type="text/css" href="../css/facebox.css" media="all" charset="utf-8" />

        <title>Pizzeria Da Pasquale</title> <!-- Titel der Website (abhängig von der jeweiligen Seite). Wird als Überschrift bei Suchmaschienen benutzt -->

        <script type="text/javascript" src="../js/jQuery/jquery.dev.js"></script>
        <script type="text/javascript" src="js/plugins-pizzeria.js"></script>
        <script type="text/javascript" src="../js/plugins-intro.js"></script>

        <script type="text/javascript" src="js/da-pasquale-pizzeria.js"></script>
        <script type="text/javascript" src="js/browser.js"></script>
        <script type="text/javascript" src="js/browser-einstellungen.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">

                <div id="logo">
                    <a href="./index.html"><img src="images/logo.png" alt="Logo" /></a>
                </div>
                <ul id="navi">
                    <li class="home">
                        <p><strong>Startseite</strong></p>
                        <p class="subtext">Home</p>
                    </li>

                    <li class="speisekarte notleft">
                        <p><a href="./speisekarte.html">Speisekarte</a></p>
                        <p class="subtext">Lista</p>
                    </li>
                    <li class="team notleft">
                        <p><a href="#">Das Team</a></p>
                        <p class="subtext">Il Team</p>

                    </li>
                    <li class="anfahrt notleft">
                        <p><a href="./anfahrt.html">Anfahrt</a></p>
                        <p class="subtext">Indicazioni</p>
                    </li>
                    <li class="galerie notleft">
                        <p><a href="#">Galerie</a></p>

                        <p class="subtext">Galleria</p>
                    </li>
                    <li class="impressum notleft">
                        <p><a href="./impressum.html">Impressum</a></p>
                        <p class="subtext">Note</p>
                    </li>
                </ul>

            </div>
            <div id="content">
                <div id="allgemeines">
                    <h3>Herzlich Willkommen in unserer Pizzeria &bdquo;Da Pasquale&ldquo;</h3>
                    <p>Bei uns können Sie von der kleinen bis zur großen Pizza unter anderen auch Spaghetti, Maccheroni, Tagliatelle und Tortellini in vielen verschiedenen Variationen genießen. Natürlich können Sie bei uns auch nur einen knackfrischen Salat schlemmen.</p>
                    <p>Desweiteren führen wir orginal-italienische Gnocchi und leckere überbackene Lasangne, Cannelloni und Rigatoni al Forno.</p>

                </div>
                <div id="preise">
                    <h3>Preise</h3>
                    <p>Ab einem Bestellwert von 7,00 € (ohne Getränke) liefern wir frei Haus. Bei Bestellungen ab 15,00 € bekommen Sie eine Flasche Wein gratis dazu.</p>
                    <p>Unser Firmenangebot für Sie: 15% Rabatt ab einer Bestellung von 50,00 €</p>
                    <p>Ab 20,00 € beliefern wir Sie natürlich auch mit Blechpizza für Ihren Geburtstag oder einer sonstigen Feierlichkeit. </p>
                </div>

                <div id="oeffnungszeiten">
                    <h3>Öffnungszeiten</h3>
                    <p>Wir stehen Ihnen unter den Telefonnummern:</p> <p class="telefonnummer">(0 21 37) 92 94 39</p> <p class="oder">oder</p> <p class="telefonnummer">(0 21 37) 92 09 54</p> <p>Montags bis Samstags von 11:00 Uhr bis 23:00 Uhr und an Sonn- und Feiertagen von 12:00 bis 23:00 Uhr gerne zur Verfügung.</p>
                </div>

            </div>
            <div id="footer">
                <a href="../cafe/index.html">Zum Cafè</a>
            </div>
        </div>
    </body>
</html>

CSS:

Code:

/*
 * CSS-Datei für die Seite des Cafès Da Pasquale
 * http://da-pasquale-norf.de
 *
 * Copyright (c) 2011 Jan Schlösser
 *
 * Date: 2011-06-20 18:23:58 (Montag, 20. Juni 2011)
 * Last Edit: 2011-06-20 18:24:04 (Montag, 20. Juni 2011)
 * Revision: 00001
 *
 * TODO: Hintergrundfarbe definieren
*/

body {
    background-image: url('../images/background.jpg');
    background-color: #fb0113;
    background-repeat: repeat-x;
}

#wrapper {
    margin: 0 auto;
    width: 800px;
    position: relative;
}

#logo {
    text-align: center;
}

#header {
    margin-bottom: 80px;
}

.clear {
    clear: both;
}

/* ////////////////////////////////////////////////////////// */
/* //////////////////////////CSS-Reset/////////////////////// */
/* ////////////////////////////////////////////////////////// */

img a {
    border: 0;
}

/* ////////////////////////////////////////////////////////// */
/* /////////////////////////Navigation/////////////////////// */
/* ////////////////////////////////////////////////////////// */

#navi {
    font-family: "Lucida Grande", Arial, sans-serif;
    width: 630px;
    margin: 0 auto;
    padding: 10px 0 0 0;
    position: absolute;
    left: 98px;
    z-index: 2;
}

#navi .notleft {
    border-left: 0 !important;
}

#navi li {
    width: 102px;
    height: 50px;
    float: left;
    color: #191919;
    text-align: center;
    overflow: hidden;
    opacity: 0.85;
    border: 2px solid #fff;
    z-index: 2;
}

#navi li a {
    color: #fff;
    text-decoration: none;
}

#navi li p {
    padding: 0 5px;
    color: #fff;
}

#navi li .subtext {
    padding-top: 8px;
}

#navi > li > p > strong {
    border-bottom: 2px solid #77AE4C;
}

/* ////////////////////////////////////////////////////////// */
/* //////////////////////Klassen f. Navi///////////////////// */
/* ////////////////////////////////////////////////////////// */

.home {
    background: #6AA63B;
} 

.speisekarte {
    background: #6AA63B;
}

.team {
    background: #6AA63B;
}  

.anfahrt { 
    background: #6AA63B;
}  

.galerie { 
    background: #6AA63B;
}  

.impressum {
    background: #6AA63B;
}

/* ////////////////////////////////////////////////////////// */
/* //////////////////////////Content///////////////////////// */
/* ////////////////////////////////////////////////////////// */

#content {
    background: url('../images/1x1-content.png') repeat;
    border-radius: 10px;
    min-height: 600px;
    width: 700px;
    position: relative;
    left: 8px;
    margin: 0 auto;
    padding: 20px;
    z-index: 1;
    border: 1px solid #8A7277;
}

#anfahrtseite #content {
    min-height: 480px;
}

#content h3:first-child {
    margin-top: 0.7em;
}

#content h3 {
    text-transform: uppercase;
    color: #ee3722;
    font-family: Calibri, Arial, "Times New Roman", Times, sans-serif;
    font-weight: normal;
    margin-bottom: 0;
    text-align: left;
}

#content p {
    margin-top: 0.5em;
    font-family: Calibri, Arial, "Times New Roman", Times, sans-serif;
    font-size: 1em;
}

#content #oeffnungszeiten .telefonnummer {
    text-align: center;
    font-weight: bold;
}

#content #oeffnungszeiten .oder {
    text-align: center;
}

#content #allgemeines span.center {
    text-align: center;
    font-size: 0.8em;
}

#content #allgemeines img {
    border-radius: 10px;
    border: 1px solid #fff;
    margin-top: 20px;
}

#content #allgemeines .nomargin-bottom {
    margin-bottom: 0;
}

#content #allgemeines .nomargin-top {
    margin-top: 0 !important;
    font-size: 90%;
}

#content .first {
    width: 50%;
    padding: 10px;
    float: left;
}

#content .sec {
    width: 40%;
    padding: 10px;
    float: right;
}

/* ////////////////////////////////////////////////////////// */
/* ////////////////////////////Map/////////////////////////// */
/* ////////////////////////////////////////////////////////// */

#map {
    height: 310px;
    margin: 5px;
    border-radius: 10px;
    border: 1px solid #fff;
}

/* ////////////////////////////////////////////////////////// */
/* //////////////////////////Footer////////////////////////// */
/* ////////////////////////////////////////////////////////// */

#footer {
    width: 100px;
    margin: 0 auto;
    margin-top: 10px;
}

#footer a {
    color: #fff;
    padding-bottom: 2px;
    text-decoration: none;
    position: relative;
    left: 20px;
}

#footer a:hover {
    border-bottom: 2px solid #fff;
}


/* ////////////////////////////////////////////////////////// */
/* /////////////////////////Impressum//////////////////////// */
/* ////////////////////////////////////////////////////////// */

#impressumseite #content h4 {
    color: #1DA61E;
    border-bottom: 2px solid #1DA61E;
    font-size: medium;
    font-family: Calibri, Arial, "Times New Roman", Times, sans-serif;
    margin-bottom: 10px !important;
    text-align: left;
    font-weight: normal;
}

#impressumseite #content h5 {
    margin: 0;
}

#impressumseite #content p {
    color: #667277;
}

#impressumseite #content p > strong {
    color: #667277;
}

#impressumseite #content p > a {
    color: #667277;
    text-decoration: none;
}

#impressumseite #content p > a:hover {
    border-bottom: 2px solid #1DA61E;
}

#impressumseite #content p > .text {
    width: 55px;
    display: inline-block;
}

#impressumseite #content p > .tag {
    width: 150px;
    display: inline-block;
}

Online-Demo: Pizzeria Da Pasquale

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hintergrundbild wird trotz no-repeat in SAFARI wiederholt	marmuel	CSS	2	21.03.2011 09:27
Fehlendes(?) oder falsch positioniertes Hintergrundbild in IE6 und IE7	shredder01	CSS	4	28.11.2009 20:38
Repeat-y - Hintergrundbild nur nach unten wiederholen lassen	*pi	CSS	2	29.08.2008 13:42
Hintergrundbild fixieren in TEXTAREA - wie am besten?	Boris	CSS	2	06.07.2008 16:34
text hinterlegen trotz hintergrundbild	P47r1ck	CSS	0	14.06.2006 18:48