Browser Inconsistency (Chrome, Firefox, and PS Vita)

  • Unknown's avatar
    davidcb9866 · Member ·

    Hello, everyone! I normally check my blog on a few different browsers to make sure it looks fine, and I’ve noticed some issues today.

    I normally use Chrome, so all CSS changes I’ve made have looked perfect there. However, I’ve noticed some issues on Firefox and my PlayStation Vita’s browser.

    In Firefox, my custom icons for the social media menu do not appear. This is how they should look (as they do in Chrome) – http://i.imgur.com/f1odUA8.png. This is how it looks in Firefox (the default appearance) – http://i.imgur.com/mEg8ef1.png. The code I’ve used is: 

    #menu-item-2625 > a {
	content: url('//thegarbagemanreviews.files.wordpress.com/2014/07/sprite-default-hummingbird.png');
	height: 40px;
	width: 40px;
}

    with the menu item and image url dependent on the specific sprite and link.

    On the Vita browser, there are two issues. First, everything that is bolded shows up as italicized – http://i.imgur.com/WaYfdid.jpg. Second, the background, which is supposed to be in a fixed location, scrolls with the page. This is something I initially set through the available WordPress settings, but is there a way to force it to remain in place via css? I realize the Vita browser has some significant issues, so I’d understand if there wasn’t a fix.

    Any help with these issues would be much appreciated!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, from what I have read, Chrome and other webkit browsers will work with the code you have above, but Firefox requires the use of a :before or :after pseudo class like this: 

    #menu-item-2625 > a: before {
	content: url('http://thegarbagemanreviews.files.wordpress.com/2014/07/sprite-default-hummingbird.png');
	height: 40px;
	width: 40px;
}

    I would also suggest using the full URL starting with http:// .

    I would also suggest using images that are the exact size needed for your social media section. Right now they are 128px square so you don’t have to fiddle with size.

  • The topic ‘Browser Inconsistency (Chrome, Firefox, and PS Vita)’ is closed to new replies.