IE8 Emulator check - internet-explorer-8

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.

Related

jvectormap not displaying map on internet explore compatibility mode or < IE9

I'm having a heck of a time getting a map to render properly in IE8 or IE compatibility mode. I've tried examples and demos, I've changed maps multiple times... All features seem to work and look great except IE compatibility mode or antiquated versions of IE. Maps ARE rendering on IE8 or below on the jvectormap website just not for the examples offered.
I've even gone as far as trying to replicate the maps on http://jvectormap.com, linking right to it's JS files. Still nothing.
Thanks so much for your time.
I reviewed the link you gave. The only issue I see is an absence of region border in IE8 or compatibility mode. The problem behind this is inability of VML engine to render borders with fractional width. Setting border as 1 makes the example work as expected.

I have a bespoke webfont that only works on Mac?

I have a bespoke font for a client which I converted into a webfont. All went fine, works on my mac and others across Firefox, Safari and Chrome, however when viewed using Windows, the font becomes extremely distorted and unreadable, on any browser.
Does anyone know what could be causing this? Could it be an issue within the original font or is there a code trick I can use to fix this?
It's a hinting problem. Microsoft’s rasteriser tries to align characters to whole pixel grid.
Read: https://www.typotheque.com/articles/hinting

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

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.

overflow:hidden works in Firefox but not in Chrome. Why?

I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.
Here is the link:
http://alonbt.com/css3/netscape/
The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.
Any suggestions bout what might be the problem?
I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072
The issue shows up in Safari too.
You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').
Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).
I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).

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.

Resources