WordPress.org

Ready to get started?Download WordPress

Forums

[Theme Twenty Twelve] custom b-quote discrepancy between Firefox, other browsers (8 posts)

  1. johnbierly
    Member
    Posted 1 year ago #

    Hi, all,

    At johnbierly.com, I'm running Twenty Twelve (and loving it) and am so crazy about how subtle and handsome the image borders are that I swiped the border styling for my blockquotes to make them look like "snapshots" of text.

    Article in question here.

    The weird thing is that they display slightly differently on Firefox than they do on all other browsers (in Windows, at least; will try tonight on Mac).

    First, here's what I did in my child theme (which was basically just pasting in the image border style):

    blockquote {
    	border-radius: 3px;
    	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    Here's a Firefox screenshot ...

    http://www.johnbierly.com/wp-content/uploads/2012blockquote-firefox.jpg

    ... and here's what it looks like on all other browsers:

    http://www.johnbierly.com/wp-content/uploads/2012blockquote-all-other-browsers.jpg

    See how the border-top is a little meatier in Firefox?

    If it's simply a matter of "different browsers interpret things a little differently," that's fine.

    My main concern is that I haven't specified something specifically enough in the CSS style that's causing it not to be properly recognized across the board.

    Thank you for your time!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    It looks like you're missing the code to apply CSS3 cross-browser (to an extent), try a CSS3 generator http://css3generator.com/ .
    The generator should create the cross-browser styles for you.

  3. johnbierly
    Member
    Posted 1 year ago #

    Thanks for the fast answer, Andrew!

    The generator gave me this ...

    blockquote {
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    ... and it doesn't seem to make any difference. Unless I interpreted it incorrectly, which is highly likely.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which version of firefox are you using?

  5. johnbierly
    Member
    Posted 1 year ago #

    15.0.1 for Windows.

  6. johnbierly
    Member
    Posted 1 year ago #

    Though your fix did make the border finally show up on my Android's browser, Andrew.

    Do I need to double them up like that? In other words, -webkit-border-radius followed by another border-radius?

    Thanks again!

  7. johnbierly
    Member
    Posted 1 year ago #

    Okay, I was missing the -moz-border part, BUT, it still doesn't change anything.

    It's seriously not a big deal. Just trying to use it as a learning opportunity since it's kind of a strange case!

  8. johnbierly
    Member
    Posted 1 year ago #

    Okay, I was missing the -moz-border part, BUT, it still doesn't change anything.

    It's seriously not a big deal. Just trying to use it as a learning opportunity since it's kind of a strange case!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.