The CSS for a local page is not loading correctly
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 👍 1All Replies (4)
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
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?
Well it looks like it really was that simple. Thanks a lot!
You're welcome.