Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Image in different position on MBPr

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 22, 2013 at 8:06 pm #153769
    shoegazer
    Participant

    Hi Guys,

    HTML/CSS Newbie here, I’ve nearly pulled all my hair out but i can’t seem to figure out why my logo appears completely fine on everything except my Macbook Pro retina in all browsers. Basically I’ve positioned the gonenomadic logo to sit in a certain spot and when i view the site on my MBPr its in a slightly different position. Any help is appreciated. Thanks.

    My code
    https://gist.github.com/anonymous/7111961

    the site http://www.gonenomadictest.co.nf/

    October 22, 2013 at 8:53 pm #153771
    Senff
    Participant

    Can you post a screenshot of how it SHOULD look and how it ACTUALLY looks on your MBPro?

    It may have something to do with the difference in screen size? Things look different on my computers (which have different resolutions).

    October 22, 2013 at 9:07 pm #153774
    Steven Morgan
    Participant

    Screenshots like @Senff said would be great.

    Looking at it quickly I think it may be a few things. You might want to give your body a padding and margin of 0 so you are working from the edge of the browser window. Currently that isn’t defined so different browsers will potentially give that a random amount of space.

    Even more likely your issue is that your margins on #logo are percentages. So depending on the width of the browser window that is going to move that div in all directions scaling accordingly. Hopefully that makes sense. If you assign your margin-top and margin-left pixel values you might be okay.

    October 22, 2013 at 10:30 pm #153783
    shoegazer
    Participant

    thanks for the response

    macbook pro retina (incorrect) http://i40.tinypic.com/zl9oi.png pc desktop (correct) http://i42.tinypic.com/2jfbywn.jpg

    i got a friend to test on their pc and it looked the same.

    October 22, 2013 at 10:31 pm #153784
    shoegazer
    Participant

    cheers, It’s something to do with the background image (just don’t know what) as i created a blank site with just a centered div with an image in it and it worked fine on both my mbpr and pc. I followed this page here so that the background scales when you resize the window. http://tutvid.com/css-css3-full-screen-background-image-dreamweaver-cs6/ (i couldn’t get the ones from css-tricks to work)

    i did try with px, the result was a bit closer but not the same

    October 22, 2013 at 11:54 pm #153790
    bhaskar
    Participant

    Hi

    u used only one div for entire header part multiple div(s) require there

    Thanks
    Bhaskar

    October 23, 2013 at 12:19 am #153791
    shoegazer
    Participant

    sorry im not sure what you mean, what’s the header part?

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.