CSS Rendering differently on server than local - css

I have this annoying CSS rendering issue that I am not sure what is causing it.
on my local copy everything looks that way I want it. When I deploy it to the server IIS.
there is one minor very minor DIV that is not rendering the way I want it or the same is what the local copy renders.
In this case, there is a padding on top and bottom of the div when there should not be. It looks fine in the local.
I tried setting the X-AU in the header but that did not help.
It is only rending that one div differently. all of the other elements looks fine. This is really strange.

Have you tried to disable IIS static content compression?
I already had issues with minified jquery and css on servers running IIS and I had to change it to non-minified versions of it.

Can you check if on your local you are running the site using SSL? I had a similar issue. I was running the site within VS 2013 and local IIS over SSL and on the live site, I was not. Fix was to configure https bindings on the live site and this fixed the issue.

Related

asp:Image border-width css inconsistency

So I'm a developer/admin for a medium size .net site, and I've run across a weird inconsistency. For reference, I'm running two instances of my site on the same server (IIS 8.5, .net 4.5); the live website and a sandbox instance of the codebase so I can test all development changes before I push them live. The config files differ only in that the sandbox site uses alternate connection strings and has it's debug flag set to true, and the sites each run on their own (identically set up) application pools.
I noticed recently that anywhere I use an asp:Image, the live site renders 'style="border-style:0px;"' onto the image tag. Interestingly, however, the sandbox instance does NOT render the style attribute.
Any idea what could be causing this discrepancy? I know that a simple solution would be to just not use asp:Images where it's a problem, but if I can I'd like to fix the underlying issue since the whole point of the sandbox is to reliably test changes on the actual server before I push them to the public site.
I got back to this issue after a few days of more pressing matters.
Turns out I missed a line in my web.config. On the sandbox site, the controlRenderingCompatibilityVersion attribute of the system.web <pages> element had been updated some time ago from 3.5 to 4.0. Apparently the live site config file never got updated, and Microsoft changed the border rendering behavior between those two versions. Updated the live site and the issue resolved itself.

Strange display behavior with IE8 on localhost vs dev server

Just started a site, using standard html/css - nothing fancy. Just divs to create a framed look. The server code is asp.net (4.0).
When I debug the program locally out of visual studio 2012, the page looks exactly as I designed it in all of my browsers (ie8/ff/chrome). When I publish it to my dev server and open it in IE8, the layout is messed up (i.e, my login box is now at bottom of page instead of center). However, if I open that same page on the dev server with firefox or chrome, it looks correct.
I've tried deleting all the files and republishing. I've viewed the source behind both the working (localhost) and broken (dev server) and it is identical.
Any ideas or additional troubleshooting steps I can try?
Thanks.
Edit:
Screenshot: http://i.imgur.com/tNiIFCz.png (side by side of dev vs localhost)
Masterpage: http://pastebin.com/c94Pinih
Css: http://pastebin.com/Txtac3kw
Login page: (the page that is messed up in IE8): http://pastebin.com/BN5bBamP
You could try:
make sure all of your resources are being loaded correctly (IE8 can do this, but other tools are available)
validating HTML/CSS
checking your render modes locally vs in production. If this is the issue, you can probably use the X-UA-Compatible meta tag to force a specific version of the IE render engine.
checking for any page/script errors
checking that the source in production matches the source when viewed locally
checking differences between IIS
Also by "standard html/css", I assume this is HTML4/CSS2? Do you have a link to check out?
Removed the top level div and it worked. Still not sure why it worked in ie8 on the local box, but not the dev box.

ASP.NET website looks different when deployed

I have googled around for the answer to this question, but haven't come up with anything. Maybe the search terms I used were too generic... Anyway, here goes:
I am discovering the joys of web design and ASP.NET, and the nightmare of trying to get things to display in the same way in IE and all the other browsers.
I am working in VS2010 and debugging my website using IE8. What I really don't get is why the website once I publish it looks different in IE from the way it looks in debug mode... I mean small things only, like border in gridviews disappearing in the published site, simple html horizontal rules aren't the same either.
It also messed up my list menu pretty bad, but I managed to fix that with the *display: inline; hack. The weird thing is that it doesn't need it in debug mode, but needs it for the published website.
I am hosting the site on my own machine, running Win XP Pro and hosting through IIS with .NET 4.0... Could the issue be IIS related?
Any help would be much appreciated, because those differences are just ridiculous and are driving me to desperation. I wish everyone over here would use Chrome or Safari, but unfortunately IE still rules in Japan...
This works for me, overrides the setting in ie
META Tag in HEAD element of your web page (or better in master page)
<meta http-equiv=“X-UA-Compatible” content=“IE=8” />
link here to info
http://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx
I find it better to override compatibility in the HTTP Reponse Headers in IIS, adding header:
X-UA-Compatible: IE=Edge
The IE=Edge part will set compatibility to use the highest mode available, will apply to all users, and also apply to all pages in the site whilst only having to put the header in one place.
I've seen similar behavior related to trusted sites/intranet sites/internet sites security settings. When you run in debug mode is the URL you are using different from when you publish it? I've seen sometimes when I debug using a URL like http://localhost/xxx and when I access the same site straight from IIS using a URL like http://machinename.domain.com/xxx that one resolves to a trusted site or local intranet and the other to internet and it changes the appearance based on the IE settings.
For those using ASP.NET MVC, you can add kgp4death's
<meta http-equiv=“X-UA-Compatible” content=“IE=8” />
to the head element in your _Layout.cshtml.
I think you did not have given the correct path in the <script src="path">. Please check your path and also check the related file u must place this file in the project folder
I hope this suggestion solve your problem

Identical files from different servers. Why might IE 8 display them differently?

I'm working on a site that will go on my company's intranet. I developed it locally on my computer, checking it in different browsers and on colleague's computers, and when it was done I handed it off to IT. They put identical copies on a staging server, and on the production server. This is a site built only with html, javascript, and css. No server side scripting. It also uses a DWF viewer plugin from Autodesk. It is a single standalone page (not part of a CMS) that allows users to load drawings into the viewer and then click to see info from a database of space info saved in a series of js arrays (the space DB software spits out a js file with all the info listed in array literals, creating a crap ton of global variables - ugh, but I digress).
When I followed their links (using IE 8) the version on the staging server looked as expected, but the layout is hosed on the version from the production server. Specifically, it seems like a div that is supposed to flow to the right of a div that is float: left is displaying below the floated div at full width, as though it was clear: left (which it is not). It also has the wrong height.
I downloaded the files from each and they are identical to my local version. Frustrated, I cleared my browser's cache, restarted my computer, checked it on a colleague's computer who also has IE 8. All the same issue. Staging server good. Production server bad.
Finally I uninstalled IE 8 and looked at it in IE 6. Both versions looked fine.
So, to recap. Two different servers. No server side scripting. Identical files. One browser agrees they are identical, the other does not. What could cause this?
Have you checked that IE8 isn't rendering it in compatibility view (IE7 rendering)? By default IE8 renders things in the "Intranet Zone" in compatibility view with everything else in normal mode.
You can change the mode with the little broken page button to the right of the URL bar.
Apart from the compatibility setting, other things that could differ from computer to computer for an identical page:
Font size. Windows allows system-wide font resizing, impacting layouts. It could account for the second div falling underneath the first one.
Resolution. Could it be a resolution issue? Could also account for the div problem.

Images are not showing up in application and even on the default iis website after new install of IIs7 on Vista x64

Seems like everything else works fine on my website but the images are not showing. No errors are being thrown either. Even the localhost default site image is not working. I have the static option turned on as well. Any ideas on how to fix this would be great.
You may have to turn Static Content on in World Wide Web Services / Common Http Features. This can be accessed via the 'Turn Windows Features on or off' section in the Control Panel.
See below for an example...
http://peterkellner.net/2008/04/01/iis7imageproblem/
When I get images not appearing it is because the files themselves don't have correct permissions. Go in and make sure that the files are inheriting permissions from their parent.

Resources