[Plugin: All-in-One Event Calendar] Calendar buttons are "spread out". Is there a fix?

FYI, I just used the WordPress template for the page which took out all the sidebars and made the calendar full width but it still has the spacing between the buttons so it doesn’t appear to be a width issue.

Are you running IE9? If so, try using firefox to see if you have the same issue. I had a similar issue with the buttons and realized it was an IE9 compatibility problem. A work around is to do the following:

1. Go to the theme editor under “Apperance”.
2. Click on the header.php link
3. Add the following code after the first “<meta” tag line.
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″ >

This will make your theme compatible with IE9 by emulating IE8

Thank you for the reply, edgarcia78. I am using IE9. Does it look ok to you in the link I had above? I’m on a computer right now using IE7 and it looks more messed up than it does with IE9. In IE7 not only are the buttons for the months spread apart but the calendar views are now stacked on top of each other. I just tried an older version of Firefox and it looks just like it does in IE9. Can you tell me if the link looks OK to you in your browser? Thanks!

I see what you mean. I just checked the link with Firefox and safari and the buttons are spread out. Have you tried changing back to the default theme? This will tell you right away if it’s a theme issue. If so, you should play around with the style.css button to adjust your layout. If its not a theme issue, try downgrading to the previous version of all in one event calendar. My guess is that your theme doesn’t like the plugin.

Also, I’m not sure if you modified the plugin CSS, but this would definitely cause an issue.

Thanks! I just tried 5 other themes and in all the other themes the buttons to scroll through the month are OK but the view buttons are all messed up. LOL So, it does seem like it could be related to the theme.

I haven’t modified the CSS. But it would be nice to know how to modify it to fix it. LOL (I’m not a coder ?? )

It’s the theme css, it’s setting a left margin (margin-left: 2.8em ) on the li item, and the calendar uses li for the button structure, and unfortunately does not set it’s own css for li.

From your theme css:
li {
margin-bottom: 0.5em;
margin-left: 2.8em; <<< THIS is the problem ****
padding: 0;
}

The following css will reset the margin for the buttons only. Just add it to a css file that is loaded after the theme css (or follow the theme’s instructions below):

ai1ec-pagination li {
margin-left: 0;
}

The following is from your theme css file and tells you where/how to add a custom css file.

!!!!!!!!!! DO NOT EDIT THIS FILE !!!!!!!!!!
If you need to make changes to this theme, create a new stylesheet in the wp-content folder then go to the ‘WordPress Admin > Settings > Adventure Journal’ and add your new stylesheet under the ‘Custom Stylesheet’ section. This will prevent your changes from being overwritten when new versions of this theme is released.
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Thanks for the reply, r3df! I gave that a shot by creating a custom css file and put only what you have above in that file. I then added that css file using the Theme Options. Nothing seemed to change? I have to head out now but I’ll try to take a look again to see if I might have messed something up but I don’t think I did???

Thanks!!!

@bfranker

You’re missing the dot (.) at the start of ai1ec-pagination. Looks like I missed it above in my cut and paste.

.ai1ec-pagination li {
margin-left: 0;
}

Sweet! I just changed it and now it works like a charm. Thanks for coming back and posting what you found and helping me out. Much appreciated!!!