Warum wird meine Seite nicht vollständig in Firefox angezeigt, aber es ist in Chrome

Also meine Website zeigt die Bilder in Google Chrome aber nicht in Firefox! Wer kann helfen? Es zeigt nur das Hintergrundbild in Firefox! Ich habe viele Dinge ausprobiert, aber nichts funktioniert für mich. Jeder, der helfen kann: DWarum wird meine Seite nicht vollständig in Firefox angezeigt, aber es ist in Chrome

Webseite: http://z16-zacho.it.slotshaven.dk/html/index.html

body { 
    background-color: transparent; 
    color:saddleBrown; 
    font-family:Verdana, Geneva, sans-serif; 
    margin:0px 0px 0px 0px; 
} 
h1, h2 { 
    color: black; 
    text-align: center; 
} 
h1 { 
    text-align: center; 
    border-style: solid; 
    border-color: rgb(176, 184, 196); 
    border-radius: 100px; 
    display: table; 
    margin: 0 auto; 
    margin-bottom: 20px; 
    padding: 6px; 
    background-color: white; 
    opacity: 0.9; 
} 
h3 { 
    text-align: center; 
    color: black; 
    font-size: 24px; 
} 
p { 
    text-align: center; 
    border-style: solid; 
    border-color: rgb(176, 184, 196); 
    display: table; 
    margin: 0 auto; 
    margin-top: 20px; 
    padding: 6px; 
    background-color: white; 
    opacity: 0.9; 
    color: black; 
    font-size: 24px; 
    font-weight: bold; 
} 
span { 
    color: rgb(16, 140, 206); 
} 
ul { 
    list-style-type: none; 
    margin-top: -3px; 
    padding: 0px; 
    overflow: hidden; 
    background-color: #333; 
} 
li { 
    float: left; 
    border-right:1px solid #bbb; 
} 
li:last-child { 
    border-right: none; 
    float: right; 
} 
li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 
li a:hover:not(.active) { 
    background-color: #111; 
} 
.active { 
    background-color: #4CAF50; 
} 
#boks1 { 
    max-width: 48%; 
    width: auto; 
    padding: 0.5%; 
    border: 1px; 
    border-style: solid; 
    border-color: purple; 
    float: left; 
    background-color: white; 
    overflow: hidden; 
} 
#boks2 { 
    max-width: 48%; 
    width: auto; 
    padding: 0.5%; 
    border: 1px; 
    border-style: solid; 
    border-color: purple; 
    float: right; 
    background-color: white; 
    overflow: hidden; 
} 
#background { 
    background-image: url(../billeder/background.jpg); 
    min-height: 500px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
#img-me { 
    content: url(../billeder/billede_af_mig.jpg); 
    width: 300px; 
    height: 300px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    float: center; 
    margin: 0 auto; 
    display: table; 
} 
#head { 
    content: url(../billeder/head.png); 
    margin-bottom: 3px; 
    background-color: rgb(238, 242, 254); 
    height: 0 auto; 
    max-width: 100%; 
    float: center; 
    margin: 0 auto; 
    display: table; 
} 
#facebook { 
    content: url(../billeder/fb.png); 
    width: 16px; 
} 
#instagram { 
    content: url(../billeder/instagram.png); 
    width: 16px; 
} 
#twitter { 
    content: url(../billeder/twitter.png); 
    width: 20px; 
} 
#snapchat { 
    content: url(../billeder/snap.png); 
    width: 16px; 
} 
#normalP { 
    font-size: 16; 
    font-weight: normal; 
    text-align: left; 
    border-style: none; 
    display: table; 
    margin: 0 auto; 
    margin-top: 20px; 
    padding: 0px; 
    opacity: 1; 
    color: black; 
}

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href="../css/frontpageStyle.css" type="text/css" rel="stylesheet"> 
    <meta charset="utf-8"> 
    <title>Zacool site</title> 
</head> 
<body> 
    <body id="background"></body> 
    <header> 
     <a href=" (link here was url shortened so i removed it) " target="_blank"> 
     <div id="head"></div> 
     </a> 
    <ul> 
     <li><a class="active" href="index.html">Forside</a></li> 
     <li><a href="">Min valgfrie ting</a></li> 
     <li><a href="kronik.html">Kronik</a></li> 
     <li><a id="facebook" href="https://www.facebook.com/tobias.zacho" target="_blank"></a></li> 
     <li><a id="instagram" href="https://www.instagram.com/tobiaszacho99/" target="_blank"></a></li> 
     <li><a id="twitter" href="https://twitter.com/Tobi1790?lang=da" target="_blank"></a></li> 
     <li><a id="snapchat" href="snap.html" target="_blank"></a></li> 
     <li><a href="http://slotshaven.dk/" target="_blank">Slotshaven</a></li> 
    </ul> 
    </header> 
    <h1>Velkommen! Denne side er kodet af <span id="header-shadow">Tobias Zacho</span></h1> 
     <div id="img-me"></div> 
     <p>&#8595 <span>Scroll ned for mere info</span> &#8595</p> 
    <body> 
     <div id="background"></div> 
     <div style="height:0px;background-color:transparent;"><!-- Lavet så man får scrolling effekten! --></div> 
    </body> 
    <div id="boks1"> 
     <h3> 
     Hvem er jeg? 
     </h3> 
     <p id="normalP"> 
     Test 
     </p> 
    </div> 
    <div id="boks2"> 
     <h3> 
     Overskrift 
     </h3> 
     <p id="normalP"> 
     Test 
     </p> 
    </div> 
</body> 
</html>

Quelle

2017-02-23 Tobias Zacho

Nicht sicher, ob es verwandt ist, aber Ihr Code hat 3 verschiedene '' Tags, eines mit einer ID "Hintergrund" innerhalb der Haupt und ein weiteres unter dem '

' Tag. Vermeiden Sie die Verwendung mehrerer '', '' oder '' Tags, da die Dinge möglicherweise nicht richtig funktionieren –

Vielen Dank Ill versuchen, dass: D –

Es hat nicht funktioniert, aber kam mir in den Sinn, dass ich machen kann die Schriftrolle auf der Titelseite: D –

Versuchen #head auf Ihrem CSS zu ändern:

#head { 
    background-image: url(../billeder/head.png); 
    background-color: rgb(238, 242, 254); 
    background-position: center; 
    background-size: contain; 
    background-repeat: no-repeat; 
    height: 15vh; /* 15% of the screen's height */ 
}

Die Art und Weise Sie es einrichten, es doesn Es gibt keine definierte Höhe und verschiedene Browser interpretieren das auf unterschiedliche Weise.

Auch eine Sache zu beachten: Auf kleinen Bildschirmen sieht das Header-Bild ziemlich klein aus. Versuchen Sie, ein wenig Whitespace auf dem .png zu schneiden, um ihm etwas Platz zu geben!

Und schließlich ist dies eine Lösung dazu. Wenn Sie jemals unzufrieden sind, gibt es sicherlich andere Möglichkeiten, um das zu erreichen, wonach Sie suchen!

Quelle

2017-02-23 19:25:02

Danke für Ihre Zeit, es funktioniert. Um den Rest jetzt zu chancen, nochmals sehr zu schätzen: D –

@Tobias, wenn diese Antwort für dich funktioniert, bitte als richtige Antwort markieren :-) – jrn

Warum wird meine Seite nicht vollständig in Firefox angezeigt, aber es ist in Chrome

Antwort

Verwandte Themen