I'm having trouble with my CSS styles not applying to certain IDs in Chrome and FF. Specifically, the IDs that are not working are 1_1, 1_2, and 1_3.
It's worth noting that the ID "buttons_menu" is functioning correctly.
Here is the 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>
This is the corresponding 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;
}