Fix for cross-browser positioning

[lostbythelake]

I’m having an issue with the positioning of a background image that changes position slightly from browser to browser. I’ve used conditional css that targets webkit to fix it there, but I need a fix for Opera. Alternatively, if there is a better way to do this by avoiding the targeting of browsers, that would be nice too.

I’m personally using a Mac, version 10.8.2.

Browsers tested include:
-Firefox 18.0.2
-Chrome 23
-Safari 6.0.2
-Opera 12.14

If you have a look, the compass rose image that sits behind the site title (i.e. Storiva) should be centered behind the letter O. Although it looks right in Firefox, Safari and Chrome (after the fix), Opera is giving me problems.

So should I target Opera as well to adjust the background position? If so, what’s the best way?
If not, what are my alternatives?

Thank you in advance for your time. Greatly appreciated.

Cheers,

Karl

[wolfcry911]

link?

[Paulie_D]

http://storiva.com/

Since the word Storiva is essentially just text, why not just do it something like

Storiva

and put the Compass Rose image as a bg image to the span?

Wouldn’t that work?

[lostbythelake]

Sorry Wolfcry911, totally forgot. Paulie D has got the link right.

Not a terrible idea Paulie_D, but I’m wondering what sort of an impact that has on SEO. Storiva is currently the site title and I hate to mess with the name that way. It currently indexes very well with Google and shows up nice in clean in searches. I might be wrong though.

K

[Paulie_D]

As far as i know…SEO (certainly google) ignores spans and concentrates more on ‘title’ and ‘alt’ tags.

As it stands, Storiva in this content is NOT the site title is just random text. This is the site title.

[wolfcry911]

the span won’t hurt SEO. Paulie has a good idea, the only problem being that the image will be cut off (its wider than the ‘o’) – but that can be fixed by adding left and right padding (approximately 8px) with a negative margin of the same value. You could then try positioning with center 18px – the center should work for all browsers, but the 18px may vary.

The problem here is that you’re relying on the font rendering to be consistent. As you’ve discovered, it isn’t from browser to browser and platform to platform (even in the same browser). Another option might be to use an image for the logo with alt text of ‘storiva’ – this also should not hurt SEO and will be read just fine by screenreaders (and spiders)

[lostbythelake]

Oh, sorry, I forgot to give some info here. I’m running this site on WordPress and Storiva is being included in the Dashboard under the title section. The title DIV that’s in the body content refers to the site title in order to populate it. So the span would be added in the site title if I were to want to make the change in the body. Not sure if that matters?

[lostbythelake]

Hey Wolfcry911.

The reason I’m opting for using the font here is that it’s accessing an @font-face from Typekit that ensures nice crisp text regardless of browser, including retina displays. What I didn’t realize is that font rendering is the culprit here. I assumed it was a positioning glitch from browser to browser.

[lostbythelake]

I guess I’m leaning towards the span with the padding and margin adjustment. Just wondering if having the span in the actual site title (not just the body) will matter?

[Paulie_D]

As I said, the site TITLE is in the head of the page (see the code I quoted).

The ‘title’ you are referring to is the title of the H1 and that is correct…as “Storiva”.

As to the actual text of the H1…it’s pretty irrelevant as far as SEO goes.

Unless all of the above breaks WP of course :)

[lostbythelake]

Hi Paulie_D,

Sorry, I’m having a hard time explaining this. So in WordPress, when you go into your settings, you input your site title in an input box. This input box populates both the HEAD and the BODY with the same information. So this creates:

Storiva — What Story Will You Tell? in the title tag in the head section

Storiva in the title div in the body section

So if I were to include the changes in that input box, they would be reflected in both.

I hope I’m making sense here :)

[Paulie_D]

Ah…then ‘Houston, we have problem!”

Wolfcry’s idea might be an option then…

>Another option might be to use an image for the logo with alt text of ‘storiva’ – this also should not hurt SEO and will be read just fine by screenreaders (and spiders)

[lostbythelake]

Dang. Was afraid you would say that. As it stands, the text is being served up by a font face at Typekit which ensures it stays nice and crisp for high res displays. I really didn’t want to revert to image :(

Tell me, is targeting browsers like I did using webkit all that bad? Or put another way, just how bad is this practice? I seem to see it quite a bit of this. And if I’m willing to live with the repercussions, is there a way to target Opera?

[Author]

Posts