Grails 3 production version stylesheet displays different than develpement version - grails

Question

I am trying to deploy the grails 3 web app using war command. Development version shows proper style sheet and after deploying on production server its just messes everything up .as css and JavaScript are minified i cant really figure out the problem ....example in the image development version
production version
I am using above code to display tab and below css..
#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:100%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background: url(../images/tableftF.gif) repeat-y;;
margin: 1px;
padding:0px 10px 0px 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background: url(../images/tabrightF.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
#tabsF #current a {
background-position:0% -42px;
}
#tabsF #current a span {
background-position:100% -42px;
}
<div id="tabsF">
<ul>
<li><span> Viewer1 </span></li>
<li><span> Viewer2 </span></li>
<li><span> Viewer3 </span></li>
</ul>
</div>

Answer 1

You can see the CSS rules in Firefox developer tools for chrome developer tools
If you want you can disable the css/js minifation as shown below. And build the war and see if the issue still exists that way you can make sure if its the problem with minifaction or problem with your code. And once u have isolted and fixed the problem enable it again.
//build.gradle
assets {
minifyJs = false
minifyCss = false
}