Why does my website display different on a PC than a Mac? - windows

I'm at a loss as to why my website (violetoeuvre.com) display differently on a PC than on a Mac. It might be plausible if I was using different browsers, but I'm using Chrome in both cases.
I can't figure out why Emma Carmichael and the navigation at the top (Writing, Blog, Contact) is a little above the black on the PC, but bleeds into the white on a Mac (what i want).
Mac:http://imgur.com/ZDRpMDj
PC: http://imgur.com/E5TbV4K
Thanks!

Are the images randomized? They are two different images shown. Is there a chance on is a chance one has a cached version with different CSS / HTML?
How about posting the code for the page - maybe someone will know the intricacies of mac vs pc in chrome with respect to the elements you're using.

I guess issue is with height of black section.
try giving height of black section in %.
That might work!!
Hope it helps.

Related

Latest Nivo Slider 3.2 transitions not working in ie7 and ie8

I've just downloaded the latest Nivo slider 3.2 as I need it on a responsive site and out of the box with no modifications the transitions in ie7 and ie8 don't work.
They simply flick between images - no sliceDown or Fade they just rotate.
I've used it in the past with no problems - I've just view 2.6 in ie7 and ie8 and it's fine.
Does anyone know what can be done to fix it?
I've just checked out their demo too http://nivo.dev7studios.com/responsive-demo/ and the same issue is happening there.
Cheers
Just sharing what worked on my site -- I was using the default demo code, pretty much unedited from the download. It was beautiful and responsive (which I wanted) in all of the browsers I tested, except any version of i.e.. If i.e., it was just a rotation, no effects.
However, when I designated a size dimension for the wrapper div and the image divs, the transitions worked in i.e. also. (height: 350px;) You can specify the dimension in your css/stylesheet or inline -- if that's what it takes.
On my site, I only needed to specify a height dimension; for your site, you might need both height and width, or just width. A little experimentation was all it took.
But, with the height dimension specified, this threw off the display in the other browsers, so the dimension needs to be specified in terms of a "hack" for internet explorer: either a separate stylesheet just for internet explorer users or by using whatever your favorite internet explorer hacking method is: underscore, or \9, and so on. Here's a list of useful internet explorer workarounds, just for reference: internet explorer hacks
I know we hate to recommend hacking, but we all do it :). Would love to find out why this one worked for me, maybe there's a better way without the hack.

Image shows darker when i view it through the browser, still shows well on my laptop

When i try to load a website it shows like this on my desktop:
http://img846.imageshack.us/img846/9646/1354627721863.jpg
Now normally it should flow well like it shows on my laptop:
http://unforgivenwow.com/theknight/unforgivenwow/
anybody a clue?
Nvm, got it fixed. Appearantly windows used my monitor his colors so i changed those to rgba.
Different monitors display images differently. If it's just a matter of the image color quality, your monitor might not be able to handle all of the colors. If it's a matter of speed, then it's probably an issue with your computer or internet connection.

Weird anomaly of a graphic being with different color on one computer, but ok in another

Me and my colleague are facing a weird anomaly of one little graphic being purple in his computer and blue in mine. The file itself seems to okay and we have re-created it from PSD several times.
You would say that, the problem is local in his computer. However, our computers are fairly similar and there has never been this issue before. Also, if he checks the source-file its ok, meaning blue. His computer had a fresh install of Win7 and clean photoshop.
What could be the problem and what can we try to solve it?
More information:
He is using FF5. The image is in PNG format. There are no js related scripts, to alter any of the images.
Direct link
Live example
(In the image we are talking about the little arrow, that is purple in one image)
From my point of view:
From his point of view:
NOTE: I personally think the issue is local in his computer. But he of course doesn't accept this answer. So if it is local, then somebody could explain, how does it happen.
Your issue could be due to gamma correction and color correction for PNGs. Ran into a similar issue myself with PNGs a couple weeks ago. A PNG would display with the correct colors in one browser, and with different colors in another browser on the same computer.
See this stackoverflow question as well for more info: Firefox 3.5 color correction hack?
EDIT
I definitely think this is a color correction issue, take a look at the images in two different browsers (chrome 13 and firefox5) on my machine. The image in Firefox is displaying with different colors than the one in Chrome.
Check the color settings on your monitors. If you're using different color temperature (Kelvin) settings, or your RGB settings are non-default and different, or if your monitors are different makes/vintages, you might see things display in "different" colors.

Capital "S" suddenly appears indented in Windows browsers - why?

We haven't found anything anywhere so far about that very strange effect.
For some time (don't know since when exactly), the capital S letter renders in Windows browsers like it's been moved by one or two pixels to the right. This happens on many browsers, not just on my system, so our customer wants it repaired. It's not a question about local Windows configuration but about browser rendering.
It can be seen here: http://www.holcimfoundation.org/T154/holcim_awards.htm
Here are some facts:
On Mac, Linux, Android and Windows with ClearType switched off the effect doesn't occur
If zoomed in (CTRL+ on Firefox), the effect gets smaller and then disappears
It doesn't happen on every website, just a few - I believe I've seen this elsewhere too (but didn't keep the URLs)
We believe that this is a bug in the Windows font rendering engine. Does anyone have any idea why this happens? Or what kind of workaround we could use?
On Mac, Linux, Android and Windows with ClearType switched off the effect doesn't
I'm not much of a ClearType wizard on Mac, Linux or Android but in Windows you can tune it.
If zoomed in (CTRL+ on Firefox), the effect gets smaller and then disappears
To me this indicates that the text path is being rendered correctly but at 100% with so few pixels to work with the "mapping" is wrong. Do you have a problem with this at 72pt?
We believe that this is a bug in the Windows font rendering engine
Do you have a reference rendering to compare this bug to? For all intents are purposes it could be by design, or your ClearType could be misconfigured.
EDIT:
I looked at this using the "Inspect Element" feature of Chrome. It seems you are trying to do too much with only 10 pixels of character real estate.
Observe the style and the rendering before:
Now take bold off:
Looks like it's not a bug, ClearType is doing the best it can with only 10 pixels.

IE8 Emulator check

Could someone go to this url: http://www.barbadostravelbuddy.co.uk/demo/?r=register
in IE8 and tell me what the submit on the bottom of the right hand column looks like, please?
I suspect my emulator isn't working correctly on this point of CSS.
It should have white text on a blue gradient but my emulator is showing with a white block. In IE7 (the real version) this does display correctly and it seems unlikely IE8 would regress.
IE8 result here :
http://img405.imageshack.us/img405/7784/screenie8.png
What emulator are you using? Would suggest you to use IETester. It uses the actual COM object of Trident (the Internet Explorer rendering engine) and hence seems quite reliable.

Resources