Whoa – that is messed up. The first tool I suggest you install if you haven’t is firebug. It will help you significantly. The second thing I recommend is to run the template (on another page) through the w3c validator to see if anything obvious pops.
Looks like a little css fu should solve this issue. You have three divs:
Sidebar 2
Content
Sidebar
you clear:both on content, which makes it take the whole line below rather than floating to the right of sidebar 2. Then you float:right on sidebar, which won’t have the affect you expected. Also you did not define a width on content, which you really should in a fixed width layout.
Soooo..
Step 1: define a fixed width for all three divs
Step 2: use the correct floats: You basically want float left on all three and then put a clear:both on an empty div at the bottom.
You’ll probably run into some more issues creating your template. Good luck on them. I’ve got to focus on the next release or I’ll never get it done tonight (fingers crossed).
Shane:
I am having the same issue: http://www.whatshappeningprovo.com.
I am a novice when it comes to code. Could you please help clarify your above response? I think that will help fix my problem.
I’m just uncertain where I need to go to change my width, etc. Within the plugin or some place else on my admin screen? Sorry to require so much of your time.
Like the others have said, I really think this calendar is what I have been looking for. I just need to get this calendar looking right. Once the issue is resolved I won’t the same issue with others visiting the site on their computer right?
Also, is there a way to create a ‘Page’ for the event calendar rather than going through the link on the sidebar?
Thanks so much for the help.
James
Hey James,
Jack is messing with his template and I believe is having a different issue than you are. You calendar is correctly placed, but for some reason, the grid is messed up. Keep looking at your css and if you can’t figure it out, perhaps one of the contributors (or me) will be able to help you figure it out later this week. Right now we are all focused on this release.
To be clear – your problem lies with bad code in your template I believe.
Actually I did specify a width for the content as well as both side bars. I have 600 px for content and 200 each for the sidebars. These are customizable within the theme.
The template is the default that showed up when I installled the calendar.
I haven’t looked at the code for the stylesheet though.
Not sure what the w3c validator is but if it is something in firebug I will certainly install that and see what turns up.
So which template am I running through this w3c? The event.php template?
Anyways you at least gave me more than I had so far – I know nothing about php but I will be able to piece things together eventually with enough help.
Sorry – I made a couple of errors in my last post and it’s too late to edit.
The template used is categories.php and is controlled by the suffusion theme, there have been no modifications. The stylesheet is also unmodified.
If I was dealing with a “page” instead of a post I could use a “no sidebar” template for it but I can’t choose the template for a post.
I also looked up Firebug and it seems to require Firefox which I don’t use.
Now I am totally lost and don’t know what to do outside of abandon my hope for a calendar.
Hi Zendarin,
I can guarantee you that when I looked at your theme source code output, both the issues I listed are accurate. While you may have entered a body size somewhere in your theme configs, it does not show up in the css. I know this may be a touch confusing but stick with it.
Trust me that firebug is worth using firefox for. =)
The W3c validator is here: http://validator.w3.org/
most of the output might scare you so don’t stress it. You are just looking for the obvious errors, like missing </div> etc…
Shane,
I am having the same issue as kissellj above. My calendar looks the same using the iNove template. I ran it through the validator you listed above and it did come back with an error only on the calendar page. There seems to be two div tags with an id of “content”. Could that be causing the problem? Here’s the actual rendered code:
<!– content START –>
<div id=”content”>
<!– main START –>
<div id=”main”>
<div id=”content” class=”grid”>
<div id=’eventsCalendarHeader’ class=”clearfix”>
<h2 class=”cal-title”>Calendar of Events</h2>
Any help would be greatly appreciated.
Ok here is the latest:
Everything is working fine on the web site now EXCEPT for the calendar. All other categories show up using the settings I specified in the theme with a collumn width for the main column of 600 px – only the calendar shows up at 1000 px (which causes the distortion you saw if there is any sidebar at all).
I posted the info you gave me on the support forum for the theme and this was the response:
“yes, this is a fixed width theme and yes, the style.css file doesn’t have the widths. That is because the widths are computed on the fly based on the settings you make in Visual Effects -> Sizes and Margins, so you will actually see the widths on your page’s source code.”
It seems that it is only when the calendar is called that it doesn’t work. In fact the main body of the calendar is being squeezed into the 600 pixel size wich is specified in the settings – it’s only the top bar of the calendar which stretches out to the full 1000 pixels. Switching to the events view the size of the main column appears correctly.
Any ideas, workarounds, etc. that you can think of?
Interesting. You know I wonder if there is some class or id conflict going on. I asked Dan, another contributor to do a quick scrub of the templates and add “TEC-” in front of all classes and ids. We shall see if that helps.
Correction – the events view is also showing at 1000 px. Any other category, however, the main content displays with the correct size.
Shane,
I change the div IDs from “content” to “calcontent” and that cleared up some of my issues but I found the big issue using firebug. When you go to the calendar on my website and look at the page source, a row of the table looks like this:
<tr><td class=’thismonth’><div class=’daynum’>3</div>
</td><td class=’thismonth’><div class=’daynum’>4</div>
</td><td class=’thismonth’><div class=’daynum’>5</div>
</td><td class=’thismonth’><div class=’daynum’>6</div>
</td><td class=’thismonth’><div class=’daynum’>7</div>
</td><td class=’thismonth’><div class=’daynum’>8</div>
</td><td class=’thismonth’><div class=’daynum’>9</div>
</td></tr>
Using Firebug, the source code looks like this on the rows:
<tr><td class=’thismonth’><div class=’daynum’>3</div>
</td><td class=’thismonth’><div class=’daynum’>4</div>
</td><td class=’thismonth’><div class=’daynum’>5</div>
</td><td class=’thismonth’><div class=’daynum’>6</div>
</td><td class=’thismonth right’><div class=’daynum’>7</div>
</td><td class=’thismonth right’><div class=’daynum’>8</div>
</td><td class=’thismonth right’><div class=’daynum’>9</div>
</td></tr>
The last 3 colums are using a class of “thismonth right” according to Firebug even though the source code shows “thismonth”. If I change the “thismonth right” classes to “thismonth” in firebug, the colums appear properly in firefox. Any ideas?
I see the same issue with James’ and Jack’s sites.
Jared
OK we have some progress.
I got this from the author of the theme:
“I took a look at the code in the plugin and it makes some serious assumptions. It basically assumes that your central component has an id “content” and that messes up the whole layout (what if there is no style associated with “content” in CSS?). One way to resolve it would be to modify the plugin code. You could open the file wp-content/plugins/the-events-calendar/views/gridview.php and look for this line:
<id=”content” class=”grid”>
Add this before the above line:
<id=”main-col”>
And add this after the last “div” in the file:
</div>
This fixed one issue – the Calendar header is now showing up the proper size with the sidebar in the correct location, however it did NOT fix the other issue. The last 3 columns in the header are still being squeezed down small and the entire thing distorted. Also the events don’t appear to be the calendar view (this may be because the only events exist within the affected columns.
Shane,
I meant to add it also does it for the blank cells. It’ll show “othermonth right” instead of “othermonth”. Once I correct these, the whole calendar populates correctly.
Jared
jrodata – please open a seperate support thread for your issue. I am sure you want it to get some attention and it likely won’t if you are just hijacking my thread all the time + this makes it hard for the admin to know when I have posted some additional info for this issue.
Thanks,
Jack (aka zendarin)
Zendarin,
Now that your layout issue is fixed, your column issue is the same as mine and James’. All three websites are showing the exact same issue with the last three columns and this is happening on three different themes. Why open an additional thread when the information I’m providing could help solve your other issue? My apologies if you feel like I hijacked your thread, I was just trying to contribute. If you notice, I mentioned the “content” ID in my first post.
Sincerely,
Jared (aka jrodato)
