67212

CSS behavior difference between development version and published version in IE10

Question:

We have created an ASP.NET website, and so far the little CSS we have used has worked fine. We tested in on the VM's in IE 10.0.9200.16899. Now we have published the website on our development server in IIS 7 for testing purposes, and when I open up the site on the VM (opening the same browser), there are layout differences; some severe, some not quite so.

To give examples: (1) We are using Infragistics components, and their styling seems to be very near to the original for the most part (some differences in font size, symbol size, ..., but very small).

(2) The following hover transition in the bootstrap navbar works on the site that starts up from within Visual Studio, but not with the deployed version on the development server. The colors are correct, though, and the hover color changes as well; it's the transition that's missing in the deployed version.

.navbar-default .navbar-brand { color: #3b3b3b; transition: color 0.2s ease-out; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ff9900; background-color: transparent; }

(3) I styled a button to have a gradient background and an image (icon) on the left on top of the background gradient, as well as one rounded corner. But in the deployed version, the whole button is grayed out, the image is missing, and I can't make out a rounded corner. The rest of the CSS works fine, though, as far as I can see.

.MyButton { background: url("/img/SomeIcon.png") no-repeat 8px center, -ms-linear-gradient(top, #374a9a 0%, #061671 70%); border: none; border-top-right-radius: 5px; color: white; /* Some other font stuff and padding that still works fine */ }

It's my first time publishing a website, and so far I always thought that style differences were mostly related to differences in browser brands and versions. But this problem has to be something else, maybe IIS-related? Any suggestions or ideas as to why this could differ so much are greatly appreciated. Somehow (2) and (3) seem vaguely related, since both the gradient and the transition animation are something that I'd naively think of as "needing some sort of rendering".

Could a difference between IIS versions be the reason? Visual Studio seems to host the application in an IIS Express (How can I find out the version? I see IIS Express 8.0 installed, but the property in my project just says "IIS Express"), while the server hosting the site has IIS 7.0 installed. Any input or ideas are greatly appreciated!

Answer1:

You probably have one of the browsers in either compatabiity mode, or are using the F12 developer tools to render it as an older version of IE/quirks mode.

Recommend

  • How can I pass complex expression to parametrized active pattern?
  • Installing ocropus-0.4.4
  • Azure Resource Template Deployment issues
  • Deploy same Javascript webapp build to different environments
  • What dll is needed for Windows.Devices.Geolocation?
  • Trouble connecting to Google Cloud SQL server from deployed app
  • Microsoft Chart Controls for Microsoft .NET Framework 4.0
  • not able to create VC++ project, with VS11
  • Visual studio 2015 keystroke with mouse button
  • How to solve “undefined reference to function” error?
  • Color time-series based on column values in pandas
  • Upgrade project from WorkLight 6.1 to MobileFirst 7.1
  • Geom_jitter colour based on values
  • TFS - how do I sum child task hours to parent
  • Deploying a CodeRush plugin from the Community Site
  • How to pass solution folder as parameter in command line arguments (for debug)?
  • Function calls are not supported. Consider replacing the function or lambda with a reference to an e
  • ASP.NET MVC 2 Preview 2 - display directory list rather than home/index
  • Web.config system.webserver errors
  • How to revert to previous XCode version?
  • SharedPreferences or SQLite Database?
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Python CGI os.system causing malformed header
  • Using $this when not in object context
  • Uncaught Error: Could not find module `ember-load-initializers`
  • How to recover from a Spring Social ExpiredAuthorizationException
  • ILMerge & Keep Assembly Name
  • Deserializing XML into class C#
  • Large data - storage and query
  • Jquery - Jquery Wysiwyg return html as a string
  • Function pointer “assignment from incompatible pointer type” only when using vararg ellipsis
  • WOWZA + RTMP + HTML5 Playback?
  • 0x202A in filename: Why?
  • Confusion with PayPal's monthly billing cycle
  • How to include full .NET prerequisite for Wix Burn installer
  • trying to dynamically update Highchart column chart but series undefined
  • File not found error Google Drive API
  • Programmatically clearing map cache
  • costura.fody for a dll that references another dll
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize