CSS list-based navigation bar (Wordpress menu) doesn't render.
This website is powered by Wordpress with a custom HTML5/CSS3 theme. However, even after various attempts to debug and recode, the navigation menu (based on WP3's built-in menu feature) fails to render in Firefox, where it renders normally in Safari & Chrome.
Screenshots Correct rendering (safari): http://cl.ly/CsSi Firefox: http://cl.ly/CsuP
Modified by willio
Chosen solution
Looks like a missing ')' in one of the style rules that causes Firefxo to skip all subsequnt rules in that file.
-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab);
instead of:
-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));
You can see that in the Error Console.
Warning: Expected declaration but found '-moz-gradient'. Skipped to next declaration. Source File: http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css Line: 1165 Warning: Unexpected end of file while searching for closing } of declaration block. Source File: http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css Line: 2329
http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css
.welcomebox {
padding: 1.5em;
background-image: -webkit-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));
-khtml-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab);-ms-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-o-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-o-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));border-radius: .25em;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.2);
box-shadow: 0 3px 20px rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px #bfbfbf;
margin-bottom: 10px
}
Read this answer in context
👍 1
All Replies (3)
Chosen Solution
Looks like a missing ')' in one of the style rules that causes Firefxo to skip all subsequnt rules in that file.
-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab);
instead of:
-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));
You can see that in the Error Console.
Warning: Expected declaration but found '-moz-gradient'. Skipped to next declaration. Source File: http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css Line: 1165 Warning: Unexpected end of file while searching for closing } of declaration block. Source File: http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css Line: 2329
http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css
.welcomebox {
padding: 1.5em;
background-image: -webkit-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));
-khtml-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab);-ms-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-o-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-o-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));border-radius: .25em;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.2);
box-shadow: 0 3px 20px rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px #bfbfbf;
margin-bottom: 10px
}
Such a giant mistery, such a tiny problem.
Thank you cor-el.
You're welcome.
Firefox allows you to find such a typo using the error console, but other browsers seem to ignore it.