Question

I cant figure out what the problem is here. My CSS styles are not working for some of my IDs, that is, the styles aren’t being applied or even seen by chrome or FF.
The IDs that are not working are all the ones like 1_1, 1_2, 1_3.

Note that the ID “buttons_menu” IS working.

HTML:

    <div id="buttons_menu">
        <div class="row">
            <div id="1_3" class="menu-item"></div>
            <div id="2_3" class="menu-item"></div>
            <div id="3_3" class="menu-item"></div>
        </div>
        <div class="row">
            <div id="1_2" class="menu-item"></div>
            <div id="2_2" class="menu-item"></div>
            <div id="3_2" class="menu-item"></div>
        </div>
        <div class="row">
            <div id="1_1" class="menu-item"></div>
            <div id="2_1" class="menu-item"></div>
            <div id="3_1" class="menu-item"></div>
        </div>
    </div>

CSS:

   body{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width: 1024px;
    height: 768px;
    background-color: white;
    margin: 0px;
    padding: 0px;
    position: relative;
    background: white url('../images/index/bg.png') no-repeat;
}
#buttons_menu{
    position:absolute;
    top:250px;
    left:66px;
    height:100%;
    width:100%;
}
.row{
    margin-bottom: 26px;
}
.menu-item{
    display: inline-block;
    border:1px solid black;
    margin-right: 5px;
    width: 209px;
    height: 122px;
}
#1_3{
    background: url('../images/index/1_3.png') no-repeat;
}
#2_3{
    background: url('../images/index/2_3.png') no-repeat;
}
#3_3{
    background: url('../images/index/3_3.png') no-repeat;
}
#1_2{
    background: url('../images/index/1_2.png') no-repeat;
}
#2_2{
    background: url('../images/index/2_2.png') no-repeat;
}
#3_2{
    background: url('../images/index/3_2.png') no-repeat;
}
#1_1{
    background: url('../images/index/1_1.png') no-repeat;
}
#2_1{
    background: url('../images/index/2_1.png') no-repeat;
}
#3_1{
    background: url('../images/index/3_1.png') no-repeat;
}

Answer 1

An HTML ID cannot begin with a number. Change them to some_prefix_1, etc.

See this question for more information – there are additional limitations in XHTML … while HTML5 seems to be taking the more permissive route.