CSS Problem with Calendar Head (Gridview)

[Patti]

This is driving me crazy because I can’t seem to figure out what is causing it. I’m using pro version, with a twenty-ten child theme. I haven’t modified gridview.php other than to add a paragraph of text under the calendar, outside of the “tribe-events-content” div.

See these two partial screenshots, note the area outlined by a blue box which is where the problem is.

Firefox
http://tinypic.com/r/178i76/5

Chrome (Win & Mac) / Safari
http://tinypic.com/r/vi1dkz/5

In Firefox on both Win & Mac, the date change dropdowns sit on top of the outlined area (.grid #tribe-events-calendar-header, calendar style sheet).

In Chrome & Safari, they are inside the box – where they are supposed to be.

I’ve picked over both the style sheet and the page styles with a fine tooth comb. I can’t figure out why this might be happening. I would normally let it slide, but one of the important people involved with this site uses FF exclusively.

Anybody have a suggestion?

(All the browsers, calendar pro, themes and wp are latest versions)

[Rob]

Hey Patti! Thanks for the heads up, and the solid explanation of your issue. This one at first glance doesn’t look like it’d be too hard to tweak…but let me get Jonah to take a look and respond directly, as he’s better versed in these items than I am. Stay tuned.

[Jonah]

Hi Patti, got an actual link to the site so I can inspect the CSS on my end?

[Patti]

http://goo.gl/qHJpp
The box is gone because the site went live on Friday.

[Jonah]

Hi Patti, cross browser fixes are something you’re always going to need work with on any website. You’ll need to somehow specifically target the CSS in Firefox and make a modification to that element. I would suggest adding some body classes for different browsers so you can more easily target them in the CSS. Something like this will help you: https://gist.github.com/2240906

Add that to your functions.php file and then you’ll be able to target specific browsers like:

.ff1 #tribe-events-calendar-header {
position: relative;
top: 20px;
}


[Patti]

Jonah, thanks for that tip.

[Jonah]

You’re welcome, is that all you needed with this issue then so I can close it out?

[Patti]

Sure. I’m sorry – didn’t realize I should have closed the post!

[Jonah]

No prob, you don’t need to, I do, I was just making sure it was ok to close it 🙂

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts