[SOLVED] 404 as a Class / ID Identifier

[dave_sticky]

Hi guys,

 

I came across an interesting issue that I'm not sure I understand. Working on CSS for a website, I wanted to apply a class to an ID box. So...

 

// The CSS

#content {
display: block;
position: relative;
float: left;
width: 300px;
height: 10px;
border-width: 1px;
border-style: solid;
}

#content.404 {
border-color: #990000;
}

#content.blah {
border-color: #990000;
}

// The HTML

<div id="content" class="blah"></div>
<!-- The above will give me a box with a red border, but... -->

<div id="content" class="404"></div>
<!-- That one gives me a box with a black border. They should be the same (ie, red). -->

 

Does anyone have any idea why this would happen? Can CSS not handle certain characters when defining classes?

 

Just a bit confused, as it took me about 45 minutes to realise this was happening, and I'd quite like to know what the problem is! Any thoughts very much appreciated.

 

Thanks,

 

Dave

 

 

[cags]

Perhaps this is what your referring to...

 

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")

 

Source: http://www.w3.org/TR/CSS21/grammar.html

[xtopolis]

Thanks cags; I did not know about the escape char for this.

[haku]

I didn't know about the work around either, but I know starting classnames with a digit is bad practice, probably for that exact reason.

[dave_sticky]

Ah, Thanks! Very helpful. I'll just avoid leading numeric chars!