Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Nummer anzurufen, sie per SMS zu kontaktieren oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Learn More

The CSS for a local page is not loading correctly

  • 4 Antworten
  • 1 hat dieses Problem
  • 124 Aufrufe
  • Letzte Antwort von cor-el

more options

I am developing a website, and the CSS for it is not loading correctly. It is loading partially, but the spacing and such is not correct. It is not currently hosted on the web, only locally. A screenshot of the website in Chrome (correct CSS) and Firefox is attached.

I had just installed Firefox for the first time on this computer, and have not visited any websites yet other than this.

Thanks in advanced

Ausgewählte Lösung

Note that you always need to use units in Firefox with margin and padding, so this is wrong:

padding: 10 10 2 10px;  =>  padding: 10px 10px 2px 10px;
margin: 10 2px;  =>  margin: 10px 2px;

Without a test page there is probably not much to tell what goes wrong.

Did you check the Web Console for errors and warnings?

Did you try to validate both HTML and CSS code?

Diese Antwort im Kontext lesen 👍 1

Alle Antworten (4)

more options

It doesn't seem that the screenshot uploaded correctly, so here's just an Imgur link to it. Sorry about that.

https://i.imgur.com/DP03G6r.png

Also, here's the CSS

>nav {

 width: 80%;
 margin: 0 auto;
 background: tan;
 padding: 0px 0;
 box-shadow: 0px 5px 0px #dedede;

} >nav ul {

 list-style: none;
 text-align: center;

} >nav ul li {

 display: inline-block;

} >nav ul li a {

 display: block;
 padding: 0px;
 text-decoration: none;
 color: green;
 font-weight: 800;
 text-transform: uppercase;
 margin: 0 0px;

} >nav ul li a, >nav ul li a:after, >nav ul li a:before {

 transition: all .5s;

} >nav ul li a:hover {

 color: #555;

}

/* stroke */ >nav.stroke ul li a, >nav.fill ul li a {

 position: relative;

} >nav.stroke ul li a:after, >nav.fill ul li a:after {

 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 width: 0%;
 content: '.';
 color: transparent;
 background: #aaa;
 height: 1px;

} >nav.stroke ul li a:hover:after {

 width: 100%;

}

>nav.fill ul li a {

 transition: all 2s;

}

>nav.fill ul li a:after {

 text-align: center;
 content: '.';
 margin: 0 -12px;
 opacity: 0;

} >nav.fill ul li a:hover {

 color: tan;
 z-index: 1;

} >nav.fill ul li a:hover:after {

 z-index: -10;
 animation: fill 1s forwards;
 -webkit-animation: fill 1s forwards;
 -moz-animation: fill 1s forwards;
 opacity: 1;

}

/* Keyframes */ >@-webkit-keyframes fill {

 0% {
   width: 0%;
   height: 1px;
 }
 50% {
   width: 150%;
   height: 1px;
 }
 100% {
   width: 150%;
   height: 110%;
   background: #00440d;
 }

}

and

>html { background-color: #6d3800; }

>h1 { color: #00440d; font-size: 45pt; font-family: Calibri; margin-bottom:0; } >.caption{ color: #000000; font-size: 14pt; font-family: Calibri; margin-top:0; margin-left: 15px; }

>.logo{ height: 100px; width: auto; float: left; margin: 25 -15 0 0px ; }

>.toTopButton{ position: fixed; right: 10px; bottom: 10px; height: 100px; width: auto; } >.toTopButton:hover{ height: 110px; width: auto; right: 5px; bottom: 5px; } >hr { width: 90%; color: #000000; } >header{ background-color: tan; padding: 10; margin: -40 -40 10 -10px; }

/* ------------- NAV ------------- */ >nav > ul { float: right; right: 10%; list-style-type: none; padding: auto; margin: auto; position: relative; } >nav > ul > li { color: black; cursor: pointer; display: inline-block; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; font-size: 14pt; font-family: Calibri; } >nav ul li a { text-decoration: none; list-style-type: none; color: #000000; } >nav ul li a.visited { text-decoration: none; list-style-type: none; color #000000; }

  • {box-sizing:border-box}

/* Slideshow container */ >.slideshow-container {

 max-width: 1000px;
 position: relative;
 margin: 10px;

background-color: grey; padding: 10 10 2 10px; }

/* Hide the images by default */ >.mySlides {

   display: none;

}

/* Number text (1/3 etc) */ >.numbertext { font-family: sans-serif;

 color: #00440d;
 font-size: 12px;
 padding: 18px 12px;
 position: absolute;
 top: 0;

}

/* The dots/bullets/indicators */ >.dot {

 height: 15px;
 width: 15px;
 margin: 10 2px;
 background-color: tan;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

}

>.active {

 background-color: #00440d;

}

/* Fading animation */ >.fade {

 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;

}

>@-webkit-keyframes fade {

 from {opacity: .4}
 to {opacity: 1}

}

>@keyframes fade {

 from {opacity: .4}
 to {opacity: 1}

}

Geändert am von I_like_forks

more options

Ausgewählte Lösung

Note that you always need to use units in Firefox with margin and padding, so this is wrong:

padding: 10 10 2 10px;  =>  padding: 10px 10px 2px 10px;
margin: 10 2px;  =>  margin: 10px 2px;

Without a test page there is probably not much to tell what goes wrong.

Did you check the Web Console for errors and warnings?

Did you try to validate both HTML and CSS code?

more options

Well it looks like it really was that simple. Thanks a lot!

more options

You're welcome.