[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 …

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

    … and here’s what it looks like on all other browsers:

    https://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)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter johnbierly

    (@johnbierly)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Which version of firefox are you using?

    Thread Starter johnbierly

    (@johnbierly)

    15.0.1 for Windows.

    Thread Starter johnbierly

    (@johnbierly)

    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!

    Thread Starter johnbierly

    (@johnbierly)

    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!

    Thread Starter johnbierly

    (@johnbierly)

    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.