css3 transform not working with firefox

  • Unknown's avatar
    kerin2014 · Member ·

    i have the css upgrade. 2 problems:

    this is related to the following post:

    problem #1

    the image of a beach cart moves from right to left as expected in Chrome, but remains stationary in Firefox.
    I have the webkit stuff in, but obviously something is wrong

    #beachcart:hover {
	transition-delay: 1s;
	transform: translate(-350px,-50px);
	-webkit-transform: translate(-350px,-50px);
}

    problem #2

    I wanted this post to have it a unique background. This works, but the image does not align correctly with the post’s left margin. How can I fix it ?

    #post-2169 {
	font: 16px Droid sans;
	background: url('//needlepointlandstore.files.wordpress.com/2014/11/bkg3.png');
}

    As always, many thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    kerin2014 · Member ·

    umm the link to the post did not appear

    the post is called VROOM and is the latest one

  • Unknown's avatar
    designsimply · Member ·

    the image of a beach cart moves from right to left as expected in Chrome, but remains stationary in Firefox.

    I tested with Firefox 33.0.3 on a Mac, and the transform works for me there. If you’re still having trouble, can you check to make sure you’re using an updated version of Firefox?
    http://browsehappy.com/

    I have the webkit stuff in, but obviously something is wrong

    Webkit is a rendering engine used by some web browsers and not others. Chrome uses webkit but Firefox doesn’t, so the original rule should be the one that affects Firefox.

    Here is a list of which browsers use webkit:
    http://en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based

    When it comes to vendor prefixes such as “-webkit-” you can use the caniuse.com website to look up which browsers use which prefixes (or if they’re not needed). For example, here is the support table for the “transform” property: http://caniuse.com/#search=transform the little yellow block at the top right of some browser versions indicate the property is supported, but only with a vendor prefix. Hover on the browser versions to see more info.

  • Unknown's avatar
    designsimply · Member ·

    I wanted this post to have it a unique background.

    For reference: http://needlepointland.com/2014/11/08/vroom/

    This works, but the image does not align correctly with the post’s left margin. How can I fix it ?

    The background property has an option for alignment. Try changing this:

    background: url('//needlepointlandstore.files.wordpress.com/2014/11/bkg3.png');

    to this:

    background: url('//needlepointlandstore.files.wordpress.com/2014/11/bkg3.png') center;

    This page explains all the options that are possible to do with “background” shorthand CSS:
    https://developer.mozilla.org/en-US/docs/Web/CSS/background

    And this page explains the background-position part in more detail:
    https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

    For the font part, this will not work:

    font: 16px Droid sans;

    First, when using font names with spaces, you must put them in quotes, i.e. “Droid Sans”

    However, a font such as Droid Sans must be loaded into the page somehow first and in WordPress.com the only way to load custom web fonts is by using the Appearance > Customize > Fonts tool. If you have done that, then you need to refer to the font name that is used by the web font loader and it won’t necessarily be the proper font name such as “Droid Sans.” To find out what name to use instead, you would need to look at the page source. However, that’s a bit complex and if you can use the tools in Appearance > Customize > Fonts then that would be better. If you want to dig into fonts though, please start a separate help request with and point to a specific example on your site—then we can look at that together to see what’s what. :)

    You might also like:
    http://web.archive.org/web/20131010010610/http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

  • Unknown's avatar
    kerin2014 · Member ·

    thank you for your response. all questions have been answered. i enjoyed the font related heads up. and thx for the background fix. i will keep this topic open for a day or two for easy reference then close it.

  • Unknown's avatar
    designsimply · Member ·

    Great! Cheers :)

  • The topic ‘css3 transform not working with firefox’ is closed to new replies.