Why won't this BG image display?

Here is my HTML:

                <div id="leftMenuWrapper">
                    <div id="ramps" class="leftMenuHeaderButton"></div>
                    <div id="carServiceRamps" class="leftMenuSubButton"></div> <div class="clear"></div>
                    <div id="67RaceRampsXT" class="leftMenuProductButton"></div>
                </div>

Here is my CSS:

#leftMenuWrapper{
background:url(../images/main_elements/leftMenu_BG.jpg) repeat-y;
border:#777777 thin solid;
width:160px;
margin-left:-19px;
posit开发者_如何学Cion:absolute;
padding-bottom:5px;
}

.leftMenuHeaderButton{
width:175px;
height:35px;
position:relative;
top:-16px;
left:-11px;
}
    #ramps{
    background:url(../images/main_elements/leftMenu/Ramps.png) no-repeat;
    }


.leftMenuSubButton{
width:169px;
height:21px;
position:relative;
float:right;
left:1px;
}
    #carServiceRamps{
    background:url(../images/main_elements/leftMenu/car-service-ramps.png) no-repeat;
    }

.leftMenuProductButton{
width:160px;
height:20px;
clear:both
}

    #67RaceRampsXT{
    background:url(../images/main_elements/leftMenu/67-Race-Ramp-XTs.jpg) no-repeat;
    width:160px;
    height:20px;
    }

.clear{clear:both}

Everything works, except <div id="67RaceRampsXT" class="leftMenuProductButton"></div> won't display it's BG image (it won't even display a BG color). The element is there, because if I adjust the sizes, it adjusts accordingly, but it won't display images in FF or Chrome.

I can put an <IMG> in it no problem, and I can even assign a BG to .leftMenuProductButton but not to #67RaceRampsXT

I don't think ids can start with number. Try to change your id to something like RaceRamps67XT and test it that way - in both HTML and CSS and see what it does.

Pretty sure only class identifiers can start with a number. For IDs you want [A-Za-z_]. Try changing your ID to #sixtySevenRaceRampsXT. Check out this question on valid IDs for more information:

What are valid values for the id attribute in HTML?