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.
Related
I have developed an application that uses bootstrap glyphicons and font-awesome. A major customer has tight security rules and the glyphicons are not displaying when using IE11.
The site is hosted in Azure. At the customer's site they work in Chrome. They also work in IE on a machine that runs it locally (with visual studio). I think it's an 'Internet' zone setting but I don't have permission to see it.
I host the css and font's in my application.
When I go to the font-awesome site (http://fontawesome.io/icons/) I cannot see the fonts.
When I go to the bootstrap site (http://getbootstrap.com/components/) I can see the glyphicons.
I changed my app to use the CSS from bootstrap (http://getbootstrap.com/dist/css/bootstrap.min.css). I can see that it downloads the css but I don't see the font.
When running locally, using the bootstrap hosted css, I see it successfully get's the font with this request.
http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.eot?
When hitting my hosted site it never seems to attempt to get the font. I don't see any errors.
Why can I not get the font in my application but it works on the bootstrap site?
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.
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.
I created a quick and dirty HTML file to demonstrate an issue I am encountering in IE compatibility mode. When I open it in IE8 from my desktop, it opens in standard mode. I need to be able to switch it to compatibility mode, but the icon for that disappears when I am viewing a local HTML document. What's up with that?
UPDATE: None of the three proposed solutions has resulted in the compatibility mode icon showing in IE8. Instead, I have put my code into an .aspx page and executed it through Visual Studio. Since it's originating from localhost, the browser thinks it is a remote document and is displaying the compatibility icon like I wanted.
However, if anyone can get this to work without having to do that, I am still open to ideas since launching a web app isn't really the ideal solution for me.
I'm not sure whether this'll work because of IE's many crazy exceptions and rules regarding local files and compatibility mode, but try the META tag approach.
In your <head>, for example say:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
See understanding compatibility modes to make sure you pick the right one.
You could try pressing F12 to open the developer toolbar, and change it in there.
Update: Have you tried tools > compatibility view settings > display all websites in compatibility view?
Users can override the ‘local
intranet’ setting by un-checking
‘Display intranet sites in
Compatibility View’ at Tools ->
Compatibility View Settings.
http://blogs.msdn.com/b/ie/archive/2009/06/17/compatibility-view-and-smart-defaults.aspx
None of the three proposed solutions has resulted in the compatibility mode icon showing in IE8. Instead, I have put my code into an .aspx page and executed it through Visual Studio. Since it's originating from localhost, the browser thinks it is a remote document and is displaying the compatibility icon like I wanted.
However, if anyone can get this to work without having to do that, I am still open to ideas since launching a web app isn't really the ideal solution for me.
I have a big problem with my web site (you can see here), several user can't see images with firefox. I use too firefox but I don't have this problem.
These users use firefox 3.5.2 with windows XP or VISTA. I have no idea to find the problem.
Have you any idea ?
Thanks a lot.
Perhaps the user has accidentally blocked images from your domain.
In Firefox:
Tools > Options > Content tab > Load images automatically should be checked > click Exceptions... make sure the Site list does not include mowen-world.com. If it is there, highlight it and click Remove Site.
I've had similar issues a few weeks ago. The reason was that the JPG images were somehow corrupted. Some browsers/OS combinations showed them without problems, but on others they didn't show.
I fixed it by opening every JPG image and saving them again in a good image editor (like Photoshop or Fireworks)
Whenever I get a problem like this, I start from basics... like "is the HTML valid".
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmorwen-world.com%2F
There are some issues listed here that could cause odd behaviour.
When I look at the site, I can see all the images fine and the website looks reasonably well laid out (Firefox 3.0.14 Windows XP AND Internet Explorer 8 Windows XP).
I can't see an issue using Firefox 3.5.3 on Windows Vista, just FYI.
Personally whenever I have issues with assets not loading or markup/CSS behaving weirdly, my first stop is Firebug. The Net panel shows the requests for any images and their respective responses. Certainly a good place to start looking.