Question

I’m working on a landing page in WordPress that consists of two main components:

1. A vertically and horizontally centered DIV (accomplished with Jquery)
2. A series of buttons with a rollover effect (accomplished with JqueryUI)

While both of these components seem to be functioning well, there is an extra space between the buttons that I can’t seem to find in the HTML editor, which can be seen here. The spaces between the “Main Site,” “Mobile,” and “Donate” buttons are noticeably larger than the space between the title and the first button.

Using inspect element in Chrome, the line following the </div> tag for each button contains a " " , which I think might be responsible for the extra space, but I can’t find it in the WordPress HTML editor. I’ve also downloaded a WP disable wpautop-type plugin, but it hasn’t removed the space.

Finally, when I paste the HTML and associated CSS into JSfiddle, the extra space dissapears. I’m assuming the issue is with WordPress’ automatic formatting. However, I can’t figure out what function is adding the space or how to remove it. Any help is greatly appreciated!

Answer 1

I ended up adding a negative bottom margin to the buttons in question and it removed/reduced the space between the DIVs to just what I needed. That being said, if adding negative bottom margins is bad practice, someone feel free to jump in on this post and stop me!

ShaunOReilly, thanks so much for your help and the jsfiddle – I’ll definitely keep it in mind.

Marca