I have the following html and styles apply fine when they are defined within the page but when I move the style to a .css it doesn't apply (using bootstrap with jsp so not sure if that applies or not).
NOTE: I have other styles in that .css that are styling html properly on the .jsp page. Just not this particular wontStyle class.
index.jsp
<body>
<div id="wrapper">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="well">
<div class="wontStyle"> <!-- This won't style in .css but will style inside page -->
If I apply the following in the page tag it applies the margin and padding (it works).
<style>
.wontStyle{
margin-top: -9px !important;
padding-bottom: 18px !important;
}
</style>
However, if I move the style to mystyle.css it won't apply the styles anymore (doesn't work)?
mystyle.css
.wontStyle{
margin-top: -9px !important;
padding-bottom: 18px !important;
}
included in my index.jsp
<link href="content/css/mystyle.css" rel="stylesheet">
How can I get it to apply styles from my .css file?
EDIT/UPDATE:
The issue was with the following bootstrap modal collapse style missing a } was breaking wontstyle when placed below the collapse.
.collapse {
.transition(height .15s ease);
position:relative;
overflow:hidden;
height: 0;
&.in {
height: auto;
}
I didn't see any errors in chrome on console for .css. How can I catch something like this in the future (css pages failing to load or breaking mid-point/etc,)?