-3

I got a really weird thing going on.

On my currently developing website the background positioning of social and e-mail buttons differ a lot between my mac from other computers.

This is how it looks on my screen on resolution 1600 x 1000 (I also checked on other so it's probably not the case)

Screen of my problem
(source: mikolajgrzyb.com)

The Question is: Why does it happen and how can i fix this problem (to display correctly on every computer)?

Mikołaj Grzyb
  • 5
  • 5
  • 2
    What is the actual question here? – Gaz Winter Dec 21 '12 at 12:34
  • I'll correct your spelling and grammar errors: You misspelled surprising. Web application is two words. There are also several grammatical errors `let me create _a_ website` `that you and _your_ users`. Also, I don't consider Mac PCs as actual computers. Macs are toys. – ShadowScripter Dec 21 '12 at 12:42

1 Answers1

0

You're mixing em with px when you position the backgrounds in the CSS, which is probably the reason why it looks different. 

.bluebtn {
    background: url("../images/icons.svg") no-repeat scroll 0 -2.7em transparent;
}

You should use em for font-sizing only.

Check some of these links out for an explanation for when to use what:

em should be used when you want to define something relative to the size of characters in the current font. Unless you have overridden font style (using px units for example), this will be affected by the choice of fonts in the user's browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.

Helpful suggestions

Preload the images. The first time hovering over your buttons makes it lag.

The lists on your right are annoying. Consider a more user friendly approach where it doesn't scroll back up after you mouse out, use the click-to-open click-to-close approach. The approach you're using now makes it difficult to navigate between the list items.
It also seems to get stuck at times.

Consider using a different color than blue for text that aren't links. It can be confusing to the average users who are used to blue text for links.

You misspelled processing, responsive, cutting, preparing and layout.
I should always be capitalized.

Community
  • 1
  • 1
ShadowScripter
  • 7,314
  • 4
  • 36
  • 54
  • Thx. This lagging thing is wierd because thouse buttons are made of svg sprite. So it loads automatically. – Mikołaj Grzyb Dec 21 '12 at 13:27
  • @MeQWhyDesign It could be how your script loads, I'm not sure, but more importantly, why aren't you using a more common format, like png, jpg or gif? The svg format is [not supported fully](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Scalable_Vector_Graphics%29) by all browsers, and some mobile devices don't support it at all. – ShadowScripter Dec 21 '12 at 13:35
  • Maybe you're right. But according to this site [can i use](http://caniuse.com/#search=svg%20in%20css%20back) it looks pritty accessible for me. The reason to use it (for me) - to make really responsive design that fits for example retina display in the end. – Mikołaj Grzyb Dec 21 '12 at 13:42
  • @MeQWhyDesign I really see no point in using svg unless you're planning on resizing the images in your code/animating the images. The sprite is static and you're not resizing it manually or percentage-wise, which means svg is unnecessary. Only use it when you need it. Also, svg has little backwards compatability, especially in IE. IE users are still the most predominant. All my colleagues at work are still at IE8, promptly refusing to upgrade for some arbitrary reason. – ShadowScripter Dec 21 '12 at 13:48
  • Ok I see now. But i disagree with you a little bit about IE thing. [w3browserstatistic](http://www.w3schools.com/browsers/browsers_stats.asp) look here. This shows that IE career is falling. – Mikołaj Grzyb Dec 21 '12 at 14:07
  • Ok but i see that in other records IE is equally important. – Mikołaj Grzyb Dec 21 '12 at 14:09
  • @MeQWhyDesign W3Schools is [not a reliable source for information](http://w3fools.com/) and is generally looked down upon by the community for feeding newcomers false or inaccurate information. As for backwards compatability, in 10-20 years, you won't have to worry about today's current backwards compatability. Each percentage of, users however small, no matter which major browser they're using, are potential customers which is why you should account for **all** of them. – ShadowScripter Dec 21 '12 at 14:18
  • @MeQWhyDesign I'm glad to have been of help! If my answer fixed your problem(s), don't forget to accept it as the correct answer. If you don't accept answers to your questions, people soon won't answer any of them because your accept ratio will decrease. If my answer did not solve your problem/answer your question, but you found a solution, please answer and accept your own question for future reference. Answering and accepting your own answers will not grant you any reputation gains. Accepting others' answers will grant you +2 reputation and them +15. Welcome to StackOverflow! :) – ShadowScripter Dec 21 '12 at 14:34