0

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;
}
Hippocrates
  • 2,510
  • 1
  • 19
  • 35

1 Answers1

4

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.

Community
  • 1
  • 1
Sean Vieira
  • 155,703
  • 32
  • 311
  • 293
  • 1
    [HTML 4 can't](http://www.w3.org/TR/html4/types.html#type-id) have IDs starting with numbers, [HTML 5 can](http://dev.w3.org/html5/spec/elements.html#the-id-attribute) (potentially, though the spec's a bit vague). – David Thomas Oct 06 '11 at 18:19
  • @DavidThomas - quite correct! You commented as I was adding the additional sentence :-) – Sean Vieira Oct 06 '11 at 18:21
  • *Laughs* - @DavidThomas, no not at all - thank you for the comment! – Sean Vieira Oct 06 '11 at 18:36