Google Chrome Css Issues And WordPress Child Theme - css

I've been working on my first WordPress child theme for a couple of days and have it looking just fine in firefox but when I check in chrome there's odd issues and no matter how hard I try and can't seem to resolve them.
You can check the site out here...
http://stevefleming.co.uk
And the list of issues I've found are...
Front page: Main text to right of lemon is screwed up.
Widgets: All the headings have disappeared
Navigation: Gone!
Blog Title (and the rest): lemon has gone and top margin/padding has changed.
Blog: List of articles is missing thumbnails
I'm hoping that somebody more experienced than myself can spot the mistakes easily because I've been going round in circles for hours.
Thanks in advance
Steve

Just in case anybody with similar issues comes along the answer to all my problems was connected with the list of fonts the theme was listing. The first one on the list wasn't on my machine and Firefox correctly traversed the list and picked one but Chrome didn't
Instead of failing gracefully and giving some kind of message bits that relied on those fonts just didn't show.
I'm learning to loathe Chrome more and more each day.
Steve

Related

Where + how to edit Wordpress CSS to create a dropdown scrollable submenu in Wordpress?

I am a writer and I have menu for my chapters list on my website of 30+ chapters and currently it annoyingly looks like this:
current website
As you can see it cuts off, and Wordpress annoyingly doesn't have a feature that turns it automatically scrollable. There are 30+ chapters and you have to keep scrolling, scrolling, scrolling down to see them all.
I have found some good looking solutions on StackOverflow but don't know where and how to apply them on Wordpress.
If anyone could talk me through literally step-by-step 1. where to find the CSS of my Wordpress site 2. the code I'll need 3. where to paste it 4. if there's anything I need to add to the navigation block's inidividual "Additional CSS Classes" part like so: Additional box in the corner and anything else I need to do. I would be super grateful!
One of my fears is just dumping a bit of code somewhere in the middle of editable CSS and screwing up my entire site! My CSS knowledge is super beginner so laymans terms is very much appreciated thanks :)
I tried using Plugins (those seem even more confusing than CSS) and have considered using Elementor too but I have Googled and YouTubed, trying to find a solution and nowhere has something as specific as what I'm looking to achieve frustratingly.
I tried following this youtube video: https://www.youtube.com/watch?v=73XjO7hFZaw but didn't know what my "Target Element Selector" was, even when I went into Inspect on Chrome, all I found was this

How to fix formatting issue when loading page in different tab?

I'm having an issue with my website http://www.ben-drury.co.uk/ (I know the content sounds dumb, but it's my first attempt at a portfolio and it's not finished) where the formatting of the text is very peculiar under a specific set of circumstances.
When loading any post or page in Google Chrome, if I remain in the tab for the duration of the loading it looks like the image below, which is perfect and exactly what I want.
However if I start loading the webpage in a new tab and don't instantly navigate to that new tab, or indeed if I refresh the page and navigate away from the tab, when I come back it looks like the image below.
Interestingly it seems to work absolutely fine in Internet Explorer and Firefox, so initially I thought that it might be an issue with my installation of Google Chrome. However testing it on other computers resulted in the same thing happening, and a variety of different ways of phrasing the issue has turned up very little.
So essentially, how do I fix it for Google Chrome users?
(For those that cannot see the images, the text in the post placed as an example runs outside of the box it should be displayed in and often lines appear over the top of each other around hyper links.)
Update:
I've managed to fix the issue for pages by removing the justified alignment of the text. However I have made said change to the posts as well yet the problem persists for them.
So after a little more delving into the issue, I came to the conclusion that not only was the idea of web safe fonts actually a load of miss-represented nonsense, but that Google fonts might be the way to go. After installing a plugin for Google fonts onto WordPress and making all my posts use one by default, my problem has been entirely resolved and I can even have justified text on my posts and pages.

Horizontal scroll - syntaxhighlighter

I was googling to find a solution for this forever, I was so close but still can't find the problem...
The closest solution I found was at this site But:
I want exactly the opposite of what this guy posted: Automatic line break in js SyntaxHighlighter
He wants instead of horizontal bar to break the code down, but what do I want is instead of breaking the code down, to display a horizontal bar.
I've used SH on multiple projects and never actually had this issue till now.
I've installed it in wordpress as a plugin in a custom theme, I modified the theme css file(s) and the syntax highlighter's file(s) (.css), but still nothing's going on.
Here's a screenshot
If you have any suggestion what the problem might be, please tell me - any help is appreciated.
I think what you are looking for is a combination of overflow and white-space css properties.
pre {overflow:scroll;}
.pre-wrap {white-space:pre-wrap;}
Please see the footle here

Why does our website load so much slower in IE than any other browser?

We have a WordPress website which loads sufficiently in every browser I've tried, except for IE. For some reason in IE, it seems to freeze the browser for a few seconds every single time the page is loaded, doubly so if it has to load a page with an iframe of another page. The user has to wait awhile before they can interact with anything on the page.
Here's the site.
Someone suggested we could use WP Supercache to solve the issue, but I've had problems with this plugin in the past and am reluctant to rely on it, especially since this seems to be only a problem in IE.
What is the best way I can troubleshoot this issue? How do I find out which scripts in the header, or footer, etc. is causing it? Is there a quick way to do so, or do I just need to start eliminating variables within the theme?
I'd don't quite understand why but in IE9 style.css is being pushed right down the page load order - see request #35 http://www.webpagetest.org/result/130327_Y9_f1d5796658d8475b68e2e537644173f1/1/details/
As a browser won't render until it's downloaded the applicable CSS this blocks rendering.
Chrome on the other hand prioritises downloads so that resources that can block rendering are downloaded ahead of images.
Here's a side-by-side video of the two loading experiences.
(If you want help looking at this further my contact details are in my profile)
Thanks to this thread I just found, the answer appears to be fancybox: Fancybox causing slow load times in IE?
Specifically, the IE-specific filters in the CSS file for fancybox. I removed those filter styles, and it loads fine now.
Sorry, I don't seem to be able to give just a comment. Anyway, in Opera 12.14 it works fine. And in Explorer (8) it works just as well, no errors in the console. Just my .1 cent.

Named anchors issues with Safari and wordpress nav menu

Hey guys, I've tried asking this at the wordpress forums, but I'm not getting much useful assistance...
I've recently built a site for someone, which I'm currently testing (http://www.audaciousdreaming.com/test/), and I'm having a bit of an issue with Safari.
Basically, as can be seen on the site, the drop down menu links are just linking to named anchors within each page. This works perfectly with Firefox, Opera and IE, but Safari doesn't seem to 'see' the hashtag for the anchor in the link. It seems happy enough with the 'top of page' links, but the menu items do not play nice. I've tried with named anchors, named spans, using the 'name' parameter as well as 'id', but nothing works.
I found a forum post somewhere (which I've now managed to lose) that said that if there is some sort of redirect in the page header that Safari will pick this up and lose it's memory of #tags in a way that other browsers won't- I don't know if this is a known issue with Safari? Is there any easy fix?
Interesting -- you can actually see the site redirecting from
http://www.audaciousdreaming.com/test/index.php?page_id=18#Volunteers
to
http://www.audaciousdreaming.com/test/?page_id=18
... so presumably it's the rewriting out of the index.php that's causing the problem. mod_rewrite, from what I remember, can't "carry across" the fragment, so relies on the browser to do that, and Safari isn't doing it.
As a quick and dirty solution, could you simply change the links so they already omit the index.php and therefore don't get rewritten? That will presumably stop your site doing an unnecessary redirect, too, which can't be a bad thing...
I had a similar problem linking to in-page anchors. However, my problem involved javascript that was overwriting the link to the specific anchor and resetting the page to the top of the window.
Have you tried browsing the stack exchange site WordPress Answers? Here's my question there...with a jQuery solution to scroll to a named post id on a page.

Resources