CSS not holding for first button on page

Support
#1

On the page that I’ve listed in the secure note, whatever button is the very first button in the code, doesn’t have the correct CSS applied to it.

Upon inspection, I noticed that it was missing something like this:

.e40-9.x-anchor {
border-width: 0px 0px 3px 0px;
border-style: none none solid none;
border-color: transparent transparent rgba(0,0,0,0.25) transparent;
font-size: 1.25em;
background-color: rgb(0,34,91);
box-shadow: 0em 0.15em 2em 0em hsla(0,0%,0%,0);
}

replacing e40-9 with the correct id for the anchor e40-8.

I can move the buttons around on the page, and whichever is first inline, fails to render the above CSS.

I’ve created a preset and applied it to the button, the same result.
I’ve deactivated all plugins, Theme Options JS and Theme Options CSS.
There is no element CSS, nor ID or class on the element.
There is no page-level CSS.

Any thoughts on why the first button is not rendering the CSS similar to that of all other buttons on the page.
And if I swap positions of buttons, then the button that had the incorrect styles, now has correct style and the correct style button is now incorrect.

It’s just the first button on the page that has this odd behavior.

First button not holding css
#2

Hi @wbgTHEMECO,

Thank you for writing in, commonly this issue is caused by a syntax error somewhere on your Theme Options > CSS, Header > CSS, Footer CSS, or Element CSS on any of your elements in the header, content, or footer.

Please check all those mentioned custom CSS areas and make sure there is no typo on them. You can use this tool for checking CSS.

Hope it helps,
Cheers!

#3

Thanks. I found the offending code. I forgot to check the Footer CSS panel.

In the future, what CSS file should I be looking for to run it through the CSS Lint tool?

#4

Hi @wbgTHEMECO,

In general, all the CSS code that is added into the custom CSS section of our theme should be checked:

  • X/Pro > Theme Options > CSS
  • X/Pro > Cornerstone/Content > Select the page in question > CSS
  • Pro > Footer > Select the footer in question > CSS
  • Pro > Header > Select the header in question > CSS

If you have too much custom CSS code I suggest that you consider installing the Child Theme and use the style.css file of the child theme to add all your styling.

Alternatively, you can access the style.css file of the Child Theme by going to Appearance > Theme Editor > Stylesheet.

Thank you,

#5

Thanks for the info.

Is all the custom CSS outputted to a single file? If so, what would that file be called?

#6

Hi @wbgTHEMECO,

Not an External style file, but an Embedded style in <head> of page document. To see those, view-source your page and find <style id="x-generated-css"> everything inside that until the closing </style> tag is all the generated CSS including the configurations you have on Theme Options and Elements styling (combined and minified).

I tried to check that with CSS lint a few times before, sometimes CSS lint will not able to handle it, and even if it can, it would not be accurate. It would be better to check those locations one by one if you get this kind of issue.

Hope that shed some lights,
Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.