Support » Themes and Templates » [Theme Twenty Twelve] custom b-quote discrepancy between Firefox, other browsers

  • 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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Andrew Nevins

    (@anevins)

    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.

    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.

    Moderator Andrew Nevins

    (@anevins)

    Which version of firefox are you using?

    15.0.1 for Windows.

    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!

    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!

    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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Theme Twenty Twelve] custom b-quote discrepancy between Firefox, other browsers’ is closed to new replies.