missing css from custom product pages

Question

I am not a developer in anyway, a novice at magento and coding so any help would be greatly appreciated on my issue.

I have a magento dev site: http://dev.colourcalendars.com/ On this site we have a megamenu that uses css and works at the root level fine.

However I cannot seem to get the css files loaded at product level when using a custom product layout file. I have tried adding code to xml files but nothing seems to work. I have a megamenu extension that needs the css when viewing these new product pages.

for instance if you view this page: http://dev.colourcalendars.com/a2-ringbound-booklet-calendars/a2-ringbound-booklet-calendar.html you will see the mega menu is all broken because the css is not loading up.

Can anyone help me with the best way of getting css files to load with these pages?

Answer 1

Well here are the following CSS files that are not found:

http://dev.colourcalendars.com/a2-ringbound-booklet-calendars/css/structure.css" http://dev.colourcalendars.com/a2-ringbound-booklet-calendars/css/themes/default/animations.css" http://dev.colourcalendars.com/a2-ringbound-booklet-calendars/css/themes/default/theme.css" http://dev.colourcalendars.com/a2-ringbound-booklet-calendars/css/themes/default/settings.css" http://dev.colourcalendars.com/a2-ringbound-booklet-calendars/css/responsive.css"

As you can see the URL are wrong, it's trying to load resources relatively to your current URL, my guess is you declared the CSS files above to be loaded relatively instead of absolutely, for example:

<link rel="stylesheet" type="text/css" href="css/responsive.css" />

Where it should be

<link rel="stylesheet" type="text/css" href="/skin/frontend/calendartheme/default/css/responsive.css" />

Find out how those missing CSS are declared in your layout files, template files or via a CMS block or backend modification and fix the relative path problem.