Differences in alignement on safari and other browsers

  • Anonymous


    I want to put a background image behind the title of my pages.

    It works with this code:

    body.page-id-11 # content-title {h1.post
    background-image: url ('http://pathtoimage/image.png');

    You can see it here: http://incubateurlorrain.org/?page_id=11

    When I check on other browsers, there is a lag of a few pixels vertically, visible in bottom right of the violet image under the page title

    It works only on Safari, it’s the browser I use to align elements.

    Do you know what might be causing this problem, is there a way to resolve this (a specific code for safari?)



    I’m not sure, as I don’t use safari.

    However, I would suggest using Firefox to set the positioning, and then see how it turns out in Safari.

    I use Firefox for pretty much everything… and the adjustments are 95% consistent across multiple browsers. Yes, you will have times when occasionally something doesn’t want to cooperate… however, it’s where I would start.

    I’d rather it look good in all browsers EXCEPT Safari, then to have it ONLY look good in Safari.



    Of course you’re right.

    But I was wondering if we could add an instruction especially for Safari to align my image.



    I honestly don’t know.

    Perhaps someone else can comment?


    Kenneth John Odle


    I’m not even sure what that code is supposed to do. There shouldn’t be a # floating around on its own, there should not be a space between url and (, and h1.post should not be within the curly brackets. So no matter what you try, that code probably won’t work. What element on that page were you trying to target?

    Remember, GIYF. A quick search gave me a few things you can try:




    If you’re handy with javascript:


    Although I am a fan of most things Apple, I do not like Safari, because it does not behave the way a good browser should (just like IE). But I don’t know of anyone who uses Safari as their primary browser. Just out of curiosity, do you know how many of your users actually use Safari? I’ve never checked into this on my own sites and am wondering now if I should.



    Maybe a copy/paste problem because my code is like that

    body.page-id-11 #content h1.post-title{

    Although I would prefer that it works on all browsers, I chose to focus on the majority of users.

    I found the Safari hacks but honestly I’m not comfortable enough to do that , I am still in learning phase 😉

    I hope I do not abuse but there is still something that I have a problem in this customization (and I did some research online and with firebug but without success)

    I try to move the title of each page to center it on my background image.

    Ex: “Qui sommes nous?” on http://incubateurlorrain.org/?page_id=11. (the white text on violet background)

    Thanks a lot.



    Because of the way you did your CSS with the background image, you have added it you your h1 title areas.

    So, whatever adjustments you add to the h1 tag, are going to be applied to BOTH the text AND the background image.



    If you want only colours (not textures), that can be achieved by pure CSS. No image is needed.

Viewing 8 posts - 1 through 8 (of 8 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum