Jump to content
radroz

Major Css Problem

Recommended Posts

radroz

Hey guys, I'm having a major problem with the Framework and a theme I created for it. I duplicated the theme from http://madeintheshadesa.com and loaded it to http://blindsorfloors.com, and it's been throwing all kinds of errors.

I checked the validation on both, and ended up with 662 errors on the blindsorfloors.com site:

http://jigsaw.w3.org...arning=&lang=en

But the madeintheshadesa.com site has a few errors, but nowhere near as many.

As a result, the page will start to load and then end up with all of the CSS being cleared — settling down with text on a white screen. Or, it'll just show skewed layouts.

Customer is in Canada. I have several more of these to do — so I'm at a loss until I get this figured out.

Yes, I deactivated all plugins. Same problem.

Please help!

post-9617-0-56342500-1351956544_thumb.pn

post-9617-0-88110300-1351956568_thumb.pn

Share this post


Link to post
Share on other sites
Rob

Did you use this type of custom CSS:

background: url("a link to an image"); or

background-image: url ('a link to an image');

If so, simply remove the single or double quotes.

If not, let us know what CSS you did use.

As for the 662 errors, at one point, our site had over 1500 of them. This results from validators not catching up the Bootstrap, LESS and Compiled CSS, all of which are used in Framework. (Yes, it drives me crazy! ;-) )

Most of them are likely to be Parse errors thrown by the disparity between LESS and the validator.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
radroz

Typically, I don't use quotes at all for image calls in CSS. On the client's computer, the correct styles load for a couple of seconds, then product the skewed images that I uploaded earlier.

Customer says it's fine in Chrome, but IE9 created the problem. I need to make sure that it's rooted in his computer, and not IE itself. I loaded it on Adobe's Browserlab and it was fine, and then on one of our PCs that has IE9. Both were okay. So, needless to say, I'm banging my head on a wall here.

Share this post


Link to post
Share on other sites
Rob

IE9 has a lot of quirks when it comes to CSS3 and HTML5. For example, it doesn't like text shadow or any gradients. I should point out that some fonts are often placed automatically in quotes like "Times New Roman" and often not in custom code. Make sure that your CSS validation didn't include anything in quotes (single or double), even if you did not place it anywhere.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
radroz

What would cause IE9 to allow the correct styles to show for 2-3 seconds, then revert to defaults? My fonts are from font.com and are called by their system.

Share this post


Link to post
Share on other sites
Rob

Honestly, I don't know. It sounds like a possible CSS or JS conflict. It could also be a plugin conflict. It could also be as simple as a missing piece in some custom coding.... like a ; or : or } somewhere along the line. Did you validate your custom CSS?

Does the font.com system use javascript or jquery?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
radroz

Okay, part of the validation problem is also tied to Gravity Forms — but I don't think that's the culprit since I've used that plugin several dozen times with Framework.

The CSS I wrote validates perfectly once I take out the gravity forms code. But again, this is a problem where the pages loads in the customer's IE9, appears okay for a few seconds, then goes to the white screen with black type. He's very frustrated, and I'm not sure what to tell him. Please help!

Share this post


Link to post
Share on other sites
James B

Hi there, just a couple of thoughts to throw in.

Check the permalinks, flush them just in case.

Are you getting any Less/parse errors on the admin bar?

Check your PHP memory is set to 128mb or higher.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
radroz

Hi James — I just set it to 256mb (it was at 64). And no, there are no Less errors in the admin bar. I'll see if it resolves anything.

IE7 still shows the white page with black text. It's as if it's not reading the Framework files at all. It's not even giving the typical "cannot locate source files" that it sometimes gives. It's just messing up. :: sigh ::

Share this post


Link to post
Share on other sites
Jenny

Also look to see if there is an error_log in your wordpress root directory (via ftp). Sometimes that can give you an idea of where the errors/issues are coming from.


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
radroz

Hi Jenny, there's nothing in the error_log except an old "PHP Startup: Unable to load dynamic library" error that's been an issue for a few months. The problem looks like it's rejecting my style sheet after loading it briefly.

Share this post


Link to post
Share on other sites
beardedavenger

Did you happen to fix this? I just ran your site through both IE8 and IE9 and both look absolutely fabulous.

http://screencast.com/t/smXBnCt5Fh

Nick

P.S - PageLines does not support IE7, as it's extremely outdated.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
radroz

The people having problem with it are in Canada. American browsers don't seem to have an issue. Any ideas as to why that might be? I've checked the site through a couple of Canadian proxies, and it is inconsistent at best. This is very, very annoying.

@beardedavenger - thank you. :)

Share this post


Link to post
Share on other sites
Simon

Are you using the less file mode?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      See:
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
          }
      }
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using the LESS/CSS Pagelines extension and tried to add the following code to make use of FontAwesome:
      a.c2a:before {
          content: "\f07a\00a0";
          font-family: "Font Awesome 5 Pro";
          Font-weight: 900;
          font-style: normal;
          font-weight: normal;
          text-decoration: inherit;
          padding-left: 4px;
      }
       
      The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
      Is there a fix or workaround for this?
      Thanks
      Michael
    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • Dan Haddock
      By Dan Haddock
      Plugins Active and installed: 
      Akismet Anti-Spam
      Coming Soon Page & Maintenance Mode by SeedProd
      Contact Form 7
      Cookie Law Info
      DMS Professional Tools  
      Enhanced Media Library  
      Flamingo
      Google Analytics for WordPress by MonsterInsights
      Google XML Sitemap
      Jetpack by WordPress.com
      Legull 
      Loginizer   
      MailChimp for WordPress
      PageLines Updater    
      Schema App Structured Data 
      Sucuri Security - Auditing, Malware Scanner and Hardening
      Uber reCaptcha    
      Yoast SEO
      Wordpress Version: 4.8.1
      Pagelines Version: 2.2.4
       
      Good Evening/Afternoon or Morning, 
      I am running into a problem with CSS styling not applying inside of most browsers (Safari, Firefox) when I am logged in to wordpress, and all browsers that I have tested when I am logged off and the site has been made public (Chrome, Firefox and Safari).
      As a result, I have managed to identify the probable cause. It looks as though these browsers are refusing to render my sites compiled CSS file due to it being a HTTP URL rather than HTTPS.
      I have attempted to change this URL to HTTPS in my browser, however it brings back an ERROR: File not found page - https://www.shortfilmblog.com/wp-content/uploads/pagelines/compiled-css-core-1505847507.css
      What would you suggest in this regard? Would this be resolvable from your end?
      Happy to provide any further details required.
×