Grow your CSS skills. Land your dream job.

[Solved] Safari and the caption tag (with padding)

  • # September 8, 2009 at 11:25 am

    Hello everyone,

    I am having some trouble with a prototype calendar widget I am working on.

    You can view it here http://blog.dingledoodle.com/

    It is a wordpress widget plugin called Events Calendar.

    It uses a table to build the calendar (I’ve never had to style a table before.) and the Month/year display at the top is a caption tag.
    If I add padding to the caption (to reposition the date correctly) It jumps up off of the rest of the table in Safari. Margin does the same.

    I added a span inside of the caption to apply the styles to that, but when I apply padding/margin to that it won’t move at all…
    positioning is not the best as the length changes, and will look odd on different months.

    I just need the text centered horizontally and vertically, inside of the caption (and the caption resting on the table as it should)
    any ideas?

    P.S. As you may be able to tell it will be a personal World of Warcraft themed/inspired website for a guild.
    /Blue

    # September 10, 2009 at 11:03 am

    bump because it’s a new problem, just edited the old thread.

    # September 10, 2009 at 11:26 am

    Try setting the line-height for the text within the caption to the exact pixel height of the caption. That’s a trick I learned a long time ago. It’s not for every occasion, but for little things like this, it’s the ticket. Works for me in Firefox 3.5 and Safari 4.

    Code:
    #wp-calendar caption span {
    line-height: 42px;
    }

    Cheers!

    # September 10, 2009 at 11:56 am
    "Indubitable Turtle" wrote:
    Try setting the line-height for the text within the caption to the exact pixel height of the caption. That’s a trick I learned a long time ago. It’s not for every occasion, but for little things like this, it’s the ticket. Works for me in Firefox 3.5 and Safari 4.

    Code:
    #wp-calendar caption span {
    line-height: 42px;
    }

    Cheers!

    ah, the simple things, seem most rewarding. Thanks a ton!

    I know about this trick, too. (except I tried setting line-height to equal the font size.)

    Anywho you ROCK!

    # September 11, 2009 at 12:07 am

    Anytime. Sometimes all we need is another set of eyes. :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".