Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

The CSS for a local page is not loading correctly

  • 4 replies
  • 1 has this problem
  • 1 view
  • Last reply by 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

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

Chosen solution

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?

Read this answer in context 👍 1

All Replies (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}

}

Modified by I_like_forks

more options

Chosen Solution

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.