Site unable to render all of the inherited CSS styles

[FritzF]

When I load my website, only a small portion of the css styles inherited actually work. When I inspect, most of the CSS selectors have actually disappeared, which is causing the problem. I have tried incorporating the CSS directly into the template file to no avail. This happens no matter the browser, no matter the computer. Does anyone know how to solve this? Thank you.

[Jim]

A link to the site so we can see the problem would be helpful.

Is the site using a custom template you created (or had created for you) or one of the ShopSite provided templates.
Note that if you are using ShopSite provided templates from a theme and select a different template for some pages/products the theme styles may not display properly. This is because each theme has different styles and mixing templates from one theme with another theme won't have the required css included.

Also make sure that you publish the entire site under Utilities > Publish > Regenerate so that all style sheets will be updated.

Another thing that can cause problems is if you are loading your pages in a non-secure mode (http://) and the style sheets are being loaded from a secure url (https://) most up-to-date browsers will not load secure content into a non-secure page.

[FritzF]

the site is http://www.lmgshoesandstufforg.fatcow.com/store/
The rounded edges of the search input indicate that some of the css is indeed working. However, the styles seem to be loaded incorrectly when the site is running. To illustrate more clearly, instead of seeing something along the lines of this...

".classA, #IDB
{
position: relative;
top: 0
color: red;
}"

...most of the stylesheet looks like this...

"
{
position: relative;
top: 0
color: red;
}"

This is a template I created myself. I did try the Regenerate method to no avail, and considering the styles are being loaded from within Shopsite, so I am unsure how a secure mode could cause the conflict.

[Jim]

In ShopSite templates if the first character of a line is the # character that line is considered a comment and will be removed from the resulting html.
The # character can also be part of a style definition. If you are using the # with a class definition in a ShopSite template you must put a space character in front of it or it will have no affect.

Since your sample code contains a # and that line is missing from the next section of code, my guess is that you are running into this issue. So edit your template and make sure that any class definition beginning with a # has a space in front of it.

[Kapitol]

Another helpful idea is to do a Ctrl A and then tab all your CSS so that nothing is touching the left side.

Once I am ready to publish the final CSS - I'll http://cssminifier.com/ my css then just make sure to tab the one line so it isn't touching the left side.