Css overriding nodejs express bootstrap

Question

I have developed a web application for mobile with Java+Spring, because of slow response i am now trying to implement the same thing on node.js, express.

I used bootstrap.css and styles.css for my site specific styles and a few overrides of bootstrap. In my old implementation everything worked currectly but right now on nodejs, All styles from bootstrap is applied currectly to my markup while all overrides from styles.css are ignored by chrome. Any idea what am i missing.

Here is example demostration of my problem

Some markup from html

<div class="row">
        <ul id="tabs-menu" class="nav nav-tabs">
          <li class="active"><a href="#bollywood" rel="1">Bollywood</a></li>
          <li><a href="#western" rel="3">Western</a></li>
          <li><a href="#pakistani" rel="2">Pakistani</a></li>
          <li><a href="#islamic" rel="4">Islamic</a></li>
        </ul>
</div>

css properties as inspected by chrome

    //from bootstrap
    .nav-tabs > li > a:hover {
        border-color: #eeeeee #eeeeee #dddddd;
    }

    //from bootstrap
    .nav > li > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #eeeeee;
    }

    //from bootstrap
    .nav-tabs > li > a {
        margin-right: 2px;
        line-height: 1.428571429;
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;
    }

    //from bootstrap
    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
    }

    //from style.css
    .nav>li>a {
        color: #000;
        background: #ddd;
    }
    //from style.css
    .nav>li>a {
        padding: 3px 1px 3px 1px; //ignored
        margin-bottom: 1px;
        margin-right: 1px; //ignored
        border-radius: 0px; //ignored
        font-size: 13px;
    }

Problem is styles from style.css with //ignored comment at the end are ignored by chrom where as in my previous implementation exactly the same code worked perfectly.

here is my style.css

body {
    min-height: 500px;
    padding-top: 70px;
    padding-bottom: 70px;
    font-family: 'juice_light';
}

a
{
    color:#CA4242;
}

a:hover
{
    color:#B71B1B;
}

.navbar-default {
    background-color: #fff;
    border-color: #e7e7e7;
}

.navbar-header {
    width:100%;
}

.navbar
{
    min-height:65px;
}

#MyPlayQueue
{
    float: right;
    padding: 15px;
    font-size: 14px;
    line-height: 40px;
    height: 20px;
    color: #000;
    font-weight: bold;
}

#MyPlayQueue
{
    float: right;
    padding: 20px 5px 0px 0px;
    font-size: 14px;
    line-height: 30px;
    height: 20px;
    color: #000;
    font-weight: bold;
}

#MyPlayQueue:hover
{
    color:#CA4242;
}


.row
{
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom:10px;
}

.nav>li>a {
    padding:3px 1px 3px 1px;
    margin-bottom: 1px;
    margin-right: 1px;
    border-radius: 0px;
    font-size: 13px;
}

.tab-content>.active {
    padding: 10px 0px;
}

.nav>li>a {
    color: #000;
    background:#ddd;
}

.nav-tabs {
    border-bottom: 5px solid #D71921;
}

.nav-tabs>li.active>a
{
    color: #fff;
    background:#d71921;
    cursor:pointer;
}
.nav-tabs>li.active>a:hover
{
    color: #fff;
    background:#D52737;
}

#sub-categories, #sub-menu
{
    clear:both;
    text-align: center;
    padding: 10px 0px 0px;
}

p {
    margin: 0 0 5px;
}

@font-face {
    font-family: 'juice_light';
    src: url('/fonts/juice_light-webfont.eot');
    src: url('/fonts/juice_light-webfont.eot?#iefix') format('embedded-opentype'),
        url('/fonts/juice_light-webfont.woff') format('woff'),
        url('/fonts/juice_light-webfont.ttf') format('truetype'),
        url('/fonts/juice_light-webfont.svg#juice_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'juice_regular';
    src: url('/fonts/juice_regular-webfont.eot');
    src: url('/fonts/juice_regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('/fonts/juice_regular-webfont.woff') format('woff'),
        url('/fonts/juice_regular-webfont.ttf') format('truetype'),
        url('/fonts/juice_regular-webfont.svg#juice_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#content
{
    padding:0px 0px 70px;
}

#content .stub_holder
{
    display: block;
    width: 120px;
    height: 120px;
    background: -15px -10px url("../images/stub_image.png");
}

#content #albumStage
{
    vertical-align:bottom;
    display:block;
}

#content #albumStage .albumCover img
{
    border:5px solid #eee;
    width:100px;
}

#content #albumStage .info .albumCover
{
    float:left;
}

#content #albumStage .info .albumInfo
{
    padding-left:115px;
}

#content #albumStage .info .albumInfo .albumTitle
{
    font-size:20px;
}

#content #albumStage .info .albumInfo .albumCategory
{
    font-size:20px;
}
#content #albumStage .info .albumInfo .albumTracks
{
    font-size:14px;
}

#content #albumStage #albumControls
{
    clear:both;
    display:block;
    padding:10px 0px 10px 0px;
}

#content #albumStage #albumControls .albumControls
{
    background:#D71921;
    padding:5px;
    border:3px solid #ccc;
    color:#fff;
    margin:3px 6px 3px 0px;
    cursor:pointer;
}

#content ul#albums, #content ul#songs
{
    list-style-type:none;
    padding: 0px;
}

#content ul#songs
{
    padding-left:0px;
    width:100%;
}

#content ul#songs li.song, #content ul#songs li.song_end
{
    padding:20px 5px 40px 5px;
    border-top:1px solid #aaa;
    display:block;
    clear:both;
}

#content ul#songs li.song_end
{
    text-align: center;
}

#content ul#songs li.song.alternate
{
    background:#f2f2f2;
}

#content ul#songs li.song .streamControls img
{
    padding-right: 3px;
    width:25px;
}

#content ul#songs li.song .streamControls, #content ul#songs li.song .songDetail
{
    float:left;
    padding-right:5px;
}

#content ul#songs li.song .songDetail
{
    max-width: 210px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#content ul#songs li.song .queueControls
{
    padding-right: 5px;
    float: right;
}


#content ul#albums li.album
{
    float:left;
    padding:3px;
    height: 170px;
}

#content ul#albums li.album img
{
    border : 5px solid #ddd;
    width: 120px;
}

#content ul#albums li.album .albumTitle
{
    display:block;
    font-weight:bold;
    padding-top:2px;
    text-align:center;
    width:120px;
}

#content ul#albums li.album a
{
    color:#000;
}

#aEnd
{
    clear: both;
    text-align: center;
    border: 1px solid #ddd;
    padding: 10px;
}

.loader
{
    display:inline-block;
}

.load-progress {
    width: 150px;
    background-color: #aaa;
    height: 5px;
}

.play-progress {
    width: 0px;
    background-color: #333;
    height: 5px;
}

.row.footer
{
    opacity:0.9;
    position: fixed;
    bottom: 0px;
    padding:0px;
    padding-top:5px;
    margin:0px 0px 0px -15px;
    height:70px;
    width:100%;
    background:#000;
}

#playListSeekBar, #playListControls
{
    text-align:center;
}

#playListSeekBar, #playListControls img
{
    padding-left:10px;
    padding-right:10px;
}

#playListSeekBar, #playListControls img.control
{
    cursor:pointer;
}

#playListSeekBar .timers
{
    color:#aaa;
}

#playListSeekBar .timers#timeLeft
{

}

#playListSeekBar #controls_playList
{
    padding-bottom: 3px;
}

additionally here is layout.jade if it helps understanding my question

doctype html
html
  head
    title= title
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width', initial-scale='1.0')
    meta(name='author', content='Khushal Khan')
    meta(name='description', content='Mobilink Streaming Web App')
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/bootstrap.css')
    link(rel='shortcut icon', href="/images/favicon.ico")

    //
      script(src='/javascripts/less-1.3.3.min.js')

    //if lt IE 9
      script(src='/javascripts/html5shiv.js')

    script(type='text/javascript', src='/javascripts/jquery.min.js')
    script(type='text/javascript', src='/javascripts/bootstrap.min.js')
    script(type='text/javascript', src='/javascripts/scripts.js')
  body
    block content

Answer 1

Ok, a few things that I recognized:

• First of all: Your first given example is not working probably because of your // comments. // in CSS is not standard, so a few browser will misinterpret that.
• Second: For me your example code works fine, besides these // problems.
• Third: I believe your issue comes by first calling your individual style.css and that gets overwritten in part by that given bootstrap.css.

Please try this code below, where I changed the position of your linked css files:

doctype html
html
  head
    title= title
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width', initial-scale='1.0')
    meta(name='author', content='Khushal Khan')
    meta(name='description', content='Mobilink Streaming Web App')
    link(rel='stylesheet', href='/stylesheets/bootstrap.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='shortcut icon', href="/images/favicon.ico")

    //
      script(src='/javascripts/less-1.3.3.min.js')

    //if lt IE 9
      script(src='/javascripts/html5shiv.js')

    script(type='text/javascript', src='/javascripts/jquery.min.js')
    script(type='text/javascript', src='/javascripts/bootstrap.min.js')
    script(type='text/javascript', src='/javascripts/scripts.js')
  body
    block content