0

Has anyone else run into the issue where the style looks fine in development mode in the various browsers (IE, Chrome & Firefox) and then when you deploy the site, the style is a little off?

I know the CSS is the same between my box and the shared server. So I'm not sure what it could be! Is there some sort of CSS tool that could help me debug this?

Development

Production

These images are from Google Chrome. I also want to note that I'm using the default bootstrap.css file from the MVC template that Visual Studio 2013 uses.

HTML:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <a href="../Home/" class="navbar-brand">
        <img src="~/Images/jaggedarraysLogoSmall.png" /></a>
</div>

CSS:

.navbar-brand,.navbar-nav > li > a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-brand {
    float: left;
    padding: 10px;
    text-indent: -9999px; /* hides the link text */
    line-height: 20px;
    margin-top: 10px;
    width: 185px;
    background: url(../Images/jaggedarraysLogoSmall.png) no-repeat;
    height: 35px;
}
codingrose
  • 15,563
  • 11
  • 39
  • 58
webdad3
  • 8,893
  • 30
  • 121
  • 223

2 Answers2

3

You should use the browser tools in IE10/11 or equivalent tools in other browsers and check for the concrete areas the are not correctly displayed. Good developer tools will show you the hierarchy of styles and the concrete values, that are being applied, so you can see if anything differs. In case the values are different, the source can point you in the right direction.

You should also make sure that you have cleared browser's cache and that the hosting provider isn't adding some code on your page (some freehostings for example supply ads or similar).

One more possiblity – because ASP.NET bundling performs automatic minification and reformatting of your CSS code for release code, the source of your problems could also be some error in CSS syntax, which browser understands, but ASP.NET bundling mechanism reads incorrectly and causes wrong output for release. Use the W3C CSS Validator – http://validator.w3.org/ – and fix any errors.

To be sure the minification is the cause, try to disable it temporarily for production to see if it helps – see the last post here for an easy way to ahieve that – ASP.NET Bundles how to disable minification

Community
  • 1
  • 1
Martin Zikmund
  • 38,440
  • 7
  • 70
  • 91
  • have you run into this issue before? It just seems like it shouldn't be an issue. – webdad3 Jan 12 '14 at 21:29
  • Well it is quite weird :-) - it definitely shouldn't happen. But you should check the browser tools first and in case nothing seems suspicious, send us a screenshot of a difference and related CSS. In case the CSS file is a static one, the only things I can now think of are browser cache and some added code from hosting provider (however unlikely today...). – Martin Zikmund Jan 12 '14 at 21:32
  • 1
    Updated my answer with one more possibility. – Martin Zikmund Jan 12 '14 at 21:38
  • I think it does have to do with minification. When I set the debug=false locally then the spacing issue displays... – webdad3 Jan 12 '14 at 22:03
  • Then this is definitely the cause and we have narrowed it down :-) ! Have you tried the W3C validator? There might be something as a missing semicolon or something like that. – Martin Zikmund Jan 12 '14 at 22:05
  • How do you regenerate the minified files? I deleted the files from the project. – webdad3 Jan 12 '14 at 22:06
  • You can use the ones you are getting in production – check the HTML of the site and find the – Martin Zikmund Jan 12 '14 at 22:09
  • 1
    that took forever but I eventually got it! Thanks for all your help. The min version was causing it. – webdad3 Jan 12 '14 at 22:58
0

I use firebug (http://getfirebug.com/) in Chrome and FF, and then the IE dev tool [F12] in IE. Unfortunately the dev tool in IE is pretty lousy, but it allows you to at least adjust positioning as needed.

Have you though of creating a CSS reset file to help "zero" things out?

Check out these pages if you are unaware of the css reset:

http://www.cssreset.com/

http://www.css-reset.com/

I usually use Eric Meyer's even though it sometimes feels like overkill. In a pinch I use the universal reset, but that too can be problematic. Read the site to inform yourself, and make your own decision based on your needs.

Phlume
  • 3,075
  • 2
  • 19
  • 38