0

I'm fronting an issue with my newly created website. I'm using Wordpress 3.8 and a custom child theme (Twenty Fourteen).

I've seen a problem, where some mobile phones (like the SGS3) and some older browsers cannot show the content of posts and pages.

http://www.citizen-science.at/

Samsung Galaxy S3 was one of a few phones which could not display the page. Also some older versions of the Safari browser and some others. It seems as if updating the browser mostly fixes the issue, but I want to support older browsers as well.

Here is an example of how it looks like:

screenshot with missing content part

Where the white part is, there should be the content of the page, which is just not shown.

EDIT:

Known browsers which are not working:

  • Android Internet (Samsung Galaxy S3, Android 4.3)
  • Android Internet (Samsung Galaxy S3 mini, Android 4.1)
  • Safari (Desktop Version 5.1.7, Win 8.1)

EDIT 2:

I've seen that one subpage of my site is working:

http://www.citizen-science.at/projekte/roadkill/ubersicht/

But others aren't.

|improve this question
  • I tried it on my nexus 7. No issues. Check your CSS. – gdaniel Jan 31 '14 at 23:49
  • Strange thing is that rly the content of the pages and posts is just not visible (the text). The login will show up shortly and then disappear again – 4ndro1d Feb 2 '14 at 17:10
  • Still not working – 4ndro1d Mar 15 '14 at 10:20
  • You could add more information on which old browsers and exact versions this happens. We need to be able to replicate the issue to find the cause. – kraftner Mar 15 '14 at 12:19
  • Edited my question. If you are using windows and try with the Safari 5.1.7 version you can face this problem – 4ndro1d Mar 15 '14 at 12:37
1
+50

It is your css. I went into the your CSS and for .content-area. I took out the float left and then went into

line 753

and took out the display:table. I am not sure on this theme but if it is using tables I would change it all to div's 

.footer-sidebar::before, 
.footer-sidebar::after, 
.hentry::before, 
.hentry::after, 
.slider-direction-nav::before, 
.slider-direction-nav::after, 
.contributor-info::before, 
.contributor-info::after, 
.search-box::before, 
.search-box::after, [class*="content"]::before, [class*="content"]::after,
[class*="site"]::before, 
[class*="site"]::after {
    content: "";
    display: table;
}

That is what displayed it for me but without the actual code I am only seeing those two things wrong. You do not have to take out the display table but just take out class content part and you might be fine.

[class*="content"]::before, [class*="content"]::after,

I am not 100 percent sure but I know that is where your problem is.

|improve this answer
  • Cool thing is I do not override this style class in my child theme. This is from the standard theme, but I will give it a try! – 4ndro1d Mar 18 '14 at 10:58
  • Awesome. Thanks a lot. Bad thing is this comes from the twentyfourteen theme itself. How should a noob like me get that work? T_T – 4ndro1d Mar 18 '14 at 11:04
  • I do not understand your question. Just go into wordpress admin panel and then go to appearance. Then go to editor and then go to your stylesheet. Or you can get a plugin that adds the css so that way if you update your theme you do not lose your custom CSS. If you have a custom css file or plugin you can just copy and paste the same CSS but take out the CSS noted above and it should overwrite you default or since you are using a childe theme then just do it in your stylesheet.css. – matthew moore Mar 18 '14 at 12:03
  • Sorry I confused you here. I already got it working but I never was thinking of the problem exisiting in the parent theme already. My knowledge of css is not that good and I wouldn't have been able to solve this on my own. Thanks a lot – 4ndro1d Mar 18 '14 at 12:21
  • Just glad you got it solved. – matthew moore Mar 18 '14 at 12:29
1

At first, I think the problem is more complex and not easy to debug. But, If you put it at the top I would think it would slow down the loading of the css. Change the position of the fonts. Also you load a lot of font-face with custom fonts, maybe to much for older browser and his memory. Also is it not easy for older browser to load all ressources, mich request. Download the fonts and include with static address in your stylesheet.

Also is it a fine idea to add a fallback font. But a t first play with less fonts and check again.

Also the hint to add the follow source to your .htaccess.

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

See the full discussion to this hint here.

Currently have a lot of older browsers your problem, see http://browsershots.org/http://www.citizen-science.at/

|improve this answer
  • If I put it at the top? I don't get it. And also what position of the fonts? What I already tried was removing all font-face tags, but it had no effect at all – 4ndro1d Mar 16 '14 at 13:37
  • Add a default font to the body element, like body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; and remove the @font-face Syntax, works this? – bueltge Mar 16 '14 at 21:50
  • No changes, also I would wonder, because the font used in the content is the same like for the navigation (which is showing) – 4ndro1d Mar 17 '14 at 10:40
  • Hm, Maybe you have a js problem, that a class or inline style, there hide this content? I think is not a font problem, after I read your enhancements on the question. But I can not test on different clients, works always. – bueltge Mar 17 '14 at 11:57
  • 1
    If I debug this in Safari with the Web Inspector I found a problem with the stylesheet. The class content-area hafe a float, confused to the other table-statements. If I clear table and floats, it works. – bueltge Mar 17 '14 at 15:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.