- This topic is empty.
-
AuthorPosts
-
October 22, 2013 at 8:06 pm #153769shoegazerParticipant
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/7111961the site http://www.gonenomadictest.co.nf/
October 22, 2013 at 8:53 pm #153771SenffParticipantCan 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 #153774Steven MorganParticipantScreenshots 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 #153783shoegazerParticipantthanks 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 #153784shoegazerParticipantcheers, 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 #153790bhaskarParticipantHi
u used only one div for entire header part multiple div(s) require there
Thanks
BhaskarOctober 23, 2013 at 12:19 am #153791shoegazerParticipantsorry im not sure what you mean, what’s the header part?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.