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

CSS list-based navigation bar (Wordpress menu) doesn't render.

  • 3 replies
  • 3 have this problem
  • 7 views
  • Last reply by cor-el

more options

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)

more options

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
}
more options

Such a giant mistery, such a tiny problem.

Thank you cor-el.

more options

You're welcome.

Firefox allows you to find such a typo using the error console, but other browsers seem to ignore it.