Jump to content
radroz

Major Css Problem

Recommended Posts

radroz    10
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    547
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    10
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    547
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    10
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    547
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    10
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    436
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    10
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    33
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    10
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    158
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    10
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    247
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,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      Hello. 
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
       
      my website : https://www.wedding-photography-minneapolis.com
    • Jason
      By Jason+
      Feel free to delete this post if its not helpful or its just plain wrong.
       
      I though it might be useful to share how I customize the size of the builder. (reduce my eyestrain )
      1 - install stylerbot extension in chrome (stylerbot keeps this css every time you access the url)
       
      2- add this css to stylerbot for the site you are working on
      .CodeMirror {
          font-size: 14px;
          height: 600px;
      }
      .pl-workarea.pl-has-sidebar .pl-workarea-sidebar-container {
          right: 0px;
          width: 500px;
      }
      .pl-workarea.pl-has-sidebar .iframe-container {
          right: 500px ;
      }
       
      change sizes to suit.
       
      Cheers.
    • Jason
      By Jason+
      Hi.
      I can't seem to get the Teamwork section to accept custom css. I am trying to change the padding from 7em to 1em on the splash part
      I have tried
        .pl-sn-teamwork .pl-tw-splash {
          padding-top: 1em;
          padding-bottom: 1em;
        }
       
      This works in chrome inspect but when added to custom css nothing happens.
      I have also tried most of the classes I can see accoiated with this section but again nothng seems to happen.
      Any ideas?
×