CODEWITHSUNDEEP
htmlcsswordpress
Dan
Dan

Reputation: 589

CSS Position Loading Bug

I'm using a plugin to display vote buttons on my wordpress install. Plugin loads the css from an external source (plugin owner site). Since I can't touch that css I'm using custom.css to change the positioning of button.

The problem is that while it loads, for 1-2 seconds, the element that contains the button is displayed distorted. Since I have 25 such elements per page, it looks aweful until the buttons load and my css takes effect. You can see it in action here: http://theroadmap.co/generation/

Here is my custom css for the button (also if you inspect element on my site): 

.likebtn-wrapper.lb-loaded.lb-style-heartcross.lb-popup-position-top.lb-popup-style-light 
position: absolute;
text-align: right;
top: -3px;
right: 0;
width: 10%;

I was wondering what would be the easiest way to fix this? I was thinking of doing display:none or visbility:hidden until the user hovers, but it doesn't seem to solve the problem. I tried using a lazyload for the image, but it's the element that's causing the visual distortion not the image.

Thanks!

Upvotes: 1

Views: 83

Answers (1)

Nix
Nix

Reputation: 490

Try adding following code to your CSS:

.tooltip { height: 24px; }

Edit: You'll just need to set height of list items (i.e. class tooltip).

Basically, it will create the structure while CSS gets fetched from likebtn.com

Upvotes: 1

Related Questions