markjconnor

After consultation with a friend who is a bit of a wizard with these things, he came up with the following fix. I wanted to share with you to see if you anticipated any long-term problems with this solution:

This is purely a positioning hack that hides the underlying issue without actually fixing it. However, it’s probably the simplest correction to make without digging too deeply into the widget code. Update these styles in the event-list.css file:

Tell the event list box in the sidebar to not care about other elements on its left or right:

.event-list {
clear: none;
}

Tell each event in the box to not care about other elements on its left or right. Then, increase the bottom margin of each event so they don’t overlap. (The order of the four numbers in a margin line is Top Left Bottom Right, and the unit of measurement is an “em” which is based on the size of your font):

li.event {
clear: none;
margin: 0 0.5em 3.8em 0.5em;
zoom: 1; /* Fix for IE 6+7 */
}

Now, the last event in the box will have too much space below it. Reduce the bottom margin of the enclosing box to correct this:

ul.event-list-view, ul.single-event-view {
list-style: none !important;
margin: 1.5em 0 -1.5em 0;
padding: 0;
}