CODEWITHSUNDEEP
htmlcssvisual-studio
webdad3
webdad3

Reputation: 9090

Visual Studio 2013 CSS Styles in Development

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;
}

Upvotes: 0

Views: 1059

Answers (2)

Martin Zikmund
Martin Zikmund

Reputation: 39112

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

Upvotes: 3

Phlume
Phlume

Reputation: 3131

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.

Upvotes: 0

Related Questions