CSS/ HTML Help Needed for Main Site

Technical problems, questions, comments, and suggestions for the forum and wiki.

User avatar
TheVeganAtheist
Site Admin
Posts: 824
Joined: Sun May 04, 2014 9:39 am
Diet: Vegan
Location: Canada

CSS/ HTML Help Needed for Main Site

Post by TheVeganAtheist »

I know a bit about CSS and HTML however something has stumped me and Im not sure how to resolve it. If anyone knows the solution to this, I would be much appreciated.

On the sidebar of posts on theveganatheist.com I have this issue:
sidebar.PNG
What is odd is when the page loads up it looks like this, however often when I refresh the Subscriber button and ad separate properly. I dont find this problem on all browsers either. If I add additional spacing between sidebar widgets, then when it does load properly the distance is visually too great.

Could someone with experience peak with firebug and see if you have a solution?
You do not have the required permissions to view the files attached to this post.
Do you find the forum to be quiet and inactive?
- Do your part by engaging in new and old topics
- Don't wait for others to start NEW topics, post one yourself
- Invite family, friends or critics
User avatar
Anon0045
Junior Member
Posts: 82
Joined: Thu Jun 26, 2014 1:57 pm
Diet: Vegan

Re: CSS/ HTML Help Needed for Main Site

Post by Anon0045 »

I could not reproduce the problem, but I think it might be a javascript issue, with a plugin called Masonry which calculates the width and heights of different blocks and fit them into different positions using css code position:absolute. I've not used it myself, but have seen bugs where it has been used, similar to this.
User avatar
TheVeganAtheist
Site Admin
Posts: 824
Joined: Sun May 04, 2014 9:39 am
Diet: Vegan
Location: Canada

Re: CSS/ HTML Help Needed for Main Site

Post by TheVeganAtheist »

i did a search for the plugin called masonry, and Im not sure which you are referring to, as none of them seem to be what Im looking for.
Do you find the forum to be quiet and inactive?
- Do your part by engaging in new and old topics
- Don't wait for others to start NEW topics, post one yourself
- Invite family, friends or critics
User avatar
brimstoneSalad
neither stone nor salad
Posts: 10273
Joined: Wed May 28, 2014 9:20 am
Diet: Vegan

Re: CSS/ HTML Help Needed for Main Site

Post by brimstoneSalad »

CSS glitches sometimes if it hasn't been written very carefully. It's notoriously hard to debug with formatting issues like this that can't be reliably reproduced.

I don't see that bug.
What browser are you using?

Usually you just have to rewrite the formatting to get it to work. It could be something as simple as a stray character or space somewhere that's causing it to glitch sometimes.
User avatar
Anon0045
Junior Member
Posts: 82
Joined: Thu Jun 26, 2014 1:57 pm
Diet: Vegan

Re: CSS/ HTML Help Needed for Main Site

Post by Anon0045 »

TheVeganAtheist wrote:i did a search for the plugin called masonry, and Im not sure which you are referring to, as none of them seem to be what Im looking for.
You are using masonry already in folder wp-includes/js, and I know from looking at the source code in other js files that masonry is being used. Only, I don't know if this is the problem or not, but I have seen similar things happen before when masonry was installed. It's like the page loads, and masonry adds position:absolute to the masonry blocks, but somehow miscalculates the "top" codes.

What I don't understand is what the point is of using masonry in the sidebar, where every block will just line up. Seems unnecessary. Perhaps you could remove the class "masonry" and class "masonry-brick" and see if that helps.
User avatar
brimstoneSalad
neither stone nor salad
Posts: 10273
Joined: Wed May 28, 2014 9:20 am
Diet: Vegan

Re: CSS/ HTML Help Needed for Main Site

Post by brimstoneSalad »

I got the problem now. Yes, it's almost certainly an issue with the javascript and page loading, otherwise it would be more consistent an issue.

As Anon0045 said, there's really no reason you need to be using this script there.
I never use third party stuff, for this reason. It gets things done faster sometimes, but then you end up fighting bugs for longer than it would have taken to code it.
User avatar
TheVeganAtheist
Site Admin
Posts: 824
Joined: Sun May 04, 2014 9:39 am
Diet: Vegan
Location: Canada

Re: CSS/ HTML Help Needed for Main Site

Post by TheVeganAtheist »

Im not sure which plugin is the culprit as I dont think its one that I installed manually. Perhaps its a script of the template? If that is the case, what should I remove?

Here is a list of the plugins I have installed manually:
1) Admin Post Navigation (links on the backend for next and previous posts)
2) Automatic Youtube Video Posts
3) BAW Post Views Count (count views for post and pages)
4) Broken LInk Checker
5) Disqus Comment System
6) Facebook Like Box
7) Google Analytics
8) Google Analytics Dashboard
9) Google XML Sitemap for Videos
10) Jetpack by Wordpress.com
11) JW Player 6 Plugin for Wordpress
12) Limit Login Attempts
13) Mashshare Share Buttons (Social Media share)
14) Per page head (allows to me to add custom content in <head>
15) Search & Replace
16) SSL Insecure Content Fixer
17) Video Thumbnails
18) Wordpress HTTPS
19) Wordpress SEO
20) WP-PageNavi
21) WP-SpamShield
22) WP Force SSL
Do you find the forum to be quiet and inactive?
- Do your part by engaging in new and old topics
- Don't wait for others to start NEW topics, post one yourself
- Invite family, friends or critics
User avatar
Anon0045
Junior Member
Posts: 82
Joined: Thu Jun 26, 2014 1:57 pm
Diet: Vegan

Re: CSS/ HTML Help Needed for Main Site

Post by Anon0045 »

I agree with brimstoneSalad, it's very likely that it's a javascript issue.

Can you get access to the sidebar html somehow? You'll most likely find it in the Wordpress theme you're using (wp-content/themes/yourthemename/), but you need FTP or SSH access to the files. For example in Twentyfourteen theme, there is a file called sidebar.php, or sidebar-[some name].php. All themes are not alike, so you might have to search in files like index.php or template-[some name].php if you don't find it. Look for <div id="sidebar" .. >. Once you find it, remove the class "masonry" because that's what's triggering the script. It might not be necessary to remove the class "masonry-brick", but if it is, you could search in functions.php for the function register_sidebar(...) where you can add a html class to each widget dynamically. For example, you'll see something like 'before_widget' => '<aside id="%1$s" class="widget %2$s">', where there might be "masonry-brick" inside class="..." .
Another way is to simply make sure that masonry is not loaded at all. I suspect this is also in the theme because none of those plugins seems to affect the sidebar. Usually in Wordpress you use wp_register_script and/or wp_enqueue_script to load the javascript files, or it is simply placed in the header or footer parts of the code in pure html.
User avatar
Anon0045
Junior Member
Posts: 82
Joined: Thu Jun 26, 2014 1:57 pm
Diet: Vegan

Re: CSS/ HTML Help Needed for Main Site

Post by Anon0045 »

I managed to find the place where the issue occurs, but it was on a different page than the front page which seems to have different names for the widget ids and the problem occurs on those pages 100% of the time. This is different from what I first thought in that the same page loads differently.
Now I see that he first block contains javascript block which doesn't fill up with logo and youtube button until later, which could mean that the rest of the blocks adapt to the empty block which contains only the header. I think a css solution to this could be to add a "padding-bottom" to the first widget, like this:

Code: Select all

#sidebar .widget_text:first-child {
   padding-bottom: 45px !important;
}
or set a fixed height.

Make sure you remove the

Code: Select all

#text-6 {
  padding-top: 45px; 
}
Edit: should be :first-child, not :first
Last edited by Anon0045 on Sun May 24, 2015 7:55 am, edited 2 times in total.
User avatar
Anon0045
Junior Member
Posts: 82
Joined: Thu Jun 26, 2014 1:57 pm
Diet: Vegan

Re: CSS/ HTML Help Needed for Main Site

Post by Anon0045 »

Did you try these tips?

It looks like you use a text widget that comes with any Wordpress installation and add javascript inside it that adds your youtube subscription button. I think that causes the elements to calculate the height of the content after the page has been loaded. On the main page, you solved this by adding padding 45px to the element below. This is why I think it would work if you change the padding directly on the first textwidget (since it is used on every page it seems).
Even better would be if you could add a div inside the text widget (when you logged in as admin and go to the admin widgets), wrap it around your script div, and put a min-height: 45px; or padding-below for example, or just set

Code: Select all

.textwidget{ min-height: 54px; }
because I don't think any text widget content will be smaller than this in height.
Post Reply