IE8 in VirtualBox doesn't display CSS styles in Dev Tools - html

Running into an issue that has me pulling hair out!
I am buildling a site and started browser testing. The page displays properly (with the regular IE breaks) but for some reason, does not display the actual CSS in the IE8 dev tools. Site is locally hosted with MAMP and using VirtualBox to test with IE/PC.
I've added the IP to the hosts file in IE8.
I've fixed all validation errors
Even threw it up on a server to see if it was a local issue
Running HTML5 doctype so maybe thats the issue? But pulled it from HTML5 Boilerplate so I'm under the impression everything is good there?
Not really sure what the issue is and its driving me crazy.
Site is hosted here: www.enkshows-dev.com
p: enkshows-dev
w: enkshows-dev
Also - IE8 doesn't render the CSS file in the 'CSS' tab, but the page layout is correct.

Don't worry, folks. I figured it out.
Looks like IE8 gets hung up on the css link for the H&FJ cloud typography production fonts.
As soon as that's removed, all works swell.

Related

ErgoDox Oryx bad font in Chromium browsers

For all of my chromium based browsers, I'm getting a very bad font within Oryx for ErgoDox. If you're not familiar with the tool, you can see my keyboard layout here.
Update: I'm seeing in "Rendered Fonts" a strange font I don't recognize. Now I'm trying to work out how this is even happening, and why it's all my chromium browsers. See bottom photo below.
Update 2: The current theory is that my system is using the first "sans-serif" font it finds because of a syntax error in ErgoDox's CSS for the font-family; "Lato" should be enclosed in single quotes ' and it is not. This is causing my system to fall back to the first sans-serif font it finds, which is normally something more useful like "Arial", but is pix PixelFJVerdana12pt in my case. I've installed both "Lato" and "LatoLatin" and it is still rendering this awful font.
Update 3: Uninstalling "pix PixelFJVerdana12pt" fixed the issue ?? Now I'm looking into that font to figure out what the heck that even is? Now it renders Lato from the web? I'm putting an updated screenshot at the bottom with it fixed.
Here's what I've discovered and tried:
The site uses "Lato,sans-serif;" for all its fonts - loaded from woff2/woff files hosted on their site.
This problem exists for all of my chromium browsers: Chrome, Brave, Vivaldi, Edge.
The site loads just fine in chromium (Chrome) for a friend of mine.
The site loads just fine for me on my mobile phone.
Extensive searching online yields no reports of anyone else having this issue.
The site displays fine in Firefox.
I've installed Lato to my machine directly from Google Fonts.
I've downloaded the woff2/woff files from ErgoDox and opened them using a woff viewer online; they display correctly there.
Reloading the site with cache disabled does not work.
There are no console, or network errors (in developer tools).
The only extensions I have installed in this instance of chromium are: 1Password, Adobe Acrobat and Application Launcher for Drive (Google).
I run Windows Defender and Malwarebytes Enterprise.
I highly suspect this issue is local to me, and not a more global issue.
Anyone else with this issue? Any suggestions?
Problem demonstration:
Weird rendered font:
After uninstalling "pix PixelFJVerdana12pt":
The solution to the problem was to uninstall the "pix PixelFJVerdana12pt" font. I have no idea what is wrong with it, but it's now working as expected.
Those of you who get your kicks out of IT troubleshooting and mysteries, this is a good one for you to try to figure out! I'd still love to understand why this was happening - so strange.
I think I've figured it out and fixed it on my system - the font pix PixelFJVerdana12pt/PixelFJVerdana12pt by Flashjunior.ch has a TTF UniqueID of 0, which must cause Windows's font handling to treat it differently. I changed this to the font's name in FontForge, and replaced it on my system - after a restart of Chrome, the fonts in Oryx and gameatlas.com seem to be how they were intended to look.

IE8 Different presentation of the same html from local drive, network drive and apache

my html/css works fine with chrome, FF and IE11. Also with IE8 when loaded locally from my harddrive.
When the same files are located in an networkdrive the css seems not to work properly. Colors and fonts are fine, but some div-containers are displayed at the wrong positions.
When i transport the files in the htdocs of an apache fonts and colors are fine, but other problems occur with the positioning. Strangly not the same as when started from the networkdrive. Some divs are now correct, others ar now misplaced.
I´m not able to find any pattern with this.
I can check the behaviour within ff and chrome with the build-in dev-tools. But i don´t know of any similar tool within IE8.
Any idea for my 1001 attemp to fix the problem?
Thanks a lot!
Microsoft introduced different rendering modes for local and Internet servers so that web developers would break down in tears.
If there’s no X-UA-Compatible value and site is in Local Intranet
security zone, it will be rendered in EmulateIE7 mode by default.
Add X-UA-Compatible header or META to force full IE8 standards mode.

CSS does not work with deployed application in IE

I have developed a small web App with MVC.
I have some CSS that does work OK when in debug in visual studio i.e. on IIS Express
It looks like as below (now I cannot insert images, thanks to stackoverflow)
When I deployed this application to my local machine, some CSS does not work.
This is how the deployed application appears. I explain, all the rounded corners are gone. and the location of some DIVs is not where it is desired.
it happens in IE, Chrome is largely OK.
when I check rendred css in developer tools for IE, all the "border-radius" elements appeared underlined. and position of the DIVs can be fixed by re-adjusting margins etc (which are good to go with Chrome).
btw IE Version is 11.0.9600.16428
Windows 7 professional, IIS Version 7.5.76
Any clues?
This can be several things. But I would check the following:
Check that all css files have been deployed and contains the styling as the source.
Check that the mark up is the same. Try opening the two sites in different tabs and check the source.
Check your developer tools for 404 on css/js files.
Check for javascripts errors.
Check if the correct doctype is set.

Video.js breaks IE9 and IE10 under certain, unknown, parameters

I've been banging my head against my desk for months now trying to find a solution to this problem. The biggest issue is that it only pops up in certain circumstances. Since modern.ie launched and IE10 was released I've renewed my search for answers.
I'm running Win7 64-bit and currently have the latest IE10 (10.0.9200.16521). When I load a site with video.js installed it fails in standards mode. But works with Flash in quirks mode. Removing video.js in various ways loads the video(s) fine with IE10's HTML5 capabilities. This even actually happens on the videojs.com home page. So far I've tried the following suggestions from other locations...
Use a full path instead of relative URLs.
Change to preload="none"
Running IE after disabling add-ons
Running IE in safe mode
Running IE as a separate user
Numerous other similar things months ago I don't recall.
I have successfully run the site on fresh installs inside virtual machines. And my Win7 64-bit computer at home. But my machine at work, previously with IE9 and now with IE10 does not work. I've seen similar posts so I know I'm not alone. Does anyone have any new suggestions?
A super simple example that exhibits this issue can be found in this other question: video.js videos get stuck in IE9 and IE10, double length on Mac Safari
Update: Found a reference to forcing IE to use Flash. Thought it might be a workaround while trying to get IE to use HTML5. It successfully made other browsers use Flash (in a test to make sure my IE conditional comment wasn't messed up). IE still did not work.
Update 2: I have found other web sites that are totally unrelated that also fail to load. Considering this issue does not happen on a fresh install I may need to resort to an attempt to remove IE and install from a fresh download. Sadly this will not actually locate what is causing this issue so I may hold off and sift through the video.js source. That'll take a LOT of time so if anyone comes up with a solution in the meantime please let everyone know.
It took a few more random shots in the dark (uninstalling plugins, dropping to IE8 and then installing a fresh copy of IE10) before I resorted to sifting through "Related" links on here. But I finally found the solution.
Drop Helvetica from the videojs style sheets.
(And the rest of your styles).
Once I removed all instances of Helvetica from my style sheets everything worked beautifully.
I've known Windows doesn't get along with old Type 1 fonts—like Helvetica (I need it installed since my company's logo is set in it and it's bitten me before). What I didn't realize was that IE9 and IE10 effectively can't render them at all and that's what was killing videojs.
Sadly we can't force users to go out and buy new versions of Helvetica or Helvetica Nueue. So my suggestion is dropping it in favor of "sans-serif".
h1 {
font-family: sans-serif;
}

partial responses from remote server

I'm posting this question here, but I'm not 100% sure where the problem lies. I have a site hosted through Media Temple that I'm developing. It's started to continually give me http 206 responses (partial content) on image and js assets. I see these through firebug. This results in missing images and js files, or in some browsers like Safari, half rendered images. When I view my work off my local server I see no issues.
I see this behavior on all browsers, firefox 3.6, safari 5.0.3, chrome 8. I work off of mac os x 10.6.6. Different images exhibit this behavior at different times, and the only thing that works temporarily is to clear the cache, but I'll typically begin to see the problem again shortly.
The other thing, as much as I can tell, I don't see this problem on other machines. My work machine (also a Mac) doesn't show this behavior at all. The clients this site is for have never complained of these issues at all.
I've also taken some of these problematic assets and moved them to other servers and pointed my browser there, no problem, so it doesn't seem to be a corrupt file.
I've run out of places to look and was hoping someone on these forums might have some suggestions. This is a real mystery and would love to get to the bottom of it.
Sounds like a problem on the server side. Have you tried restarting the web server or taking a look at the error log?