BUG in CSS 3.0?

I'm designing a layout for a blog I'm planning to setup and happen to notice this BUG. I'm not a real genius to CSS knowing all the properties without an API reference, but at least I know how it works. I carefully checked all the rules I've written, because this bug seem to freeze the hover, visited and other states.

What the bug does is that, it will ignore the states you apply on an element. It will remain on the default settings applied to it.

To have that scenario, you must reference your elements in hierarchy by many times. I wrote many CSS rules and access the elements in hierarchy, to get accurate at the cost of writing some element selectors over other. 


When I encountered this bug, I tested it in FF (3.5.5) and Google Chrome (3.0.195.27). Both doesn't accept any rules I add, but once I remove some element.

example:

<div class="gray">
<div class="postButtons">

<a href="#" class="postReadMore" >
<span class="left"></span><span class="linkto">READ MORE</span>
</a>

<a href="#" class="postReadOTH" >
<span class="right"></span><span class="linkto">日本語で読む</span>
</a>
</div>

</div>

.postReadMore,.postReadOTH
{
float:left;
margin:10px;
}

.postReadMore span.linkto, .postReadOTH span.linkto
{
float:left;



}



.gray .postButtons .postReadMore:hover,.gray .postButtons .postReadOTH:hover
{

border-top:solid 1px #CCC;
border-left:solid 1px #CCC;
border-right:ridge 1px #000;
border-bottom:ridge 1px #000;


}

.gray .postButtons .postReadMore:hover .left
{
width:57px;
height:57px;
background: transparent url(../rchImages/sprites.png) no-repeat scroll -274px -202px;

}


.gray .postButtons .postReadOTH:visited .right
{
background: transparent url(../rchImages/sprites.png) no-repeat scroll -274px -202px;

}






.gray .postButtons .postReadMore:visited .left
{
background: transparent url(../rchImages/sprites.png) no-repeat scroll 0px -202px;
}



.gray .postButtons .postReadOTH:hover .right
{
width:57px;
height:57px;
background: transparent url(../rchImages/sprites.png) no-repeat scroll 0px -202px;
}

using these will freeze the .readMore element to default, nothing happens on hover, on visited,

but, once I remove an element to the hierarchy 

FROM

.gray .postButtons .postReadMore:visited .left

{

background: transparent url(../rchImages/sprites.png) no-repeat scroll 0px -202px;

}

TO

.gray  .postReadMore:visited .left

{

background: transparent url(../rchImages/sprites.png) no-repeat scroll 0px -202px;

}

thinks work now... this is not a matter of browsers, since I tried different browser and still it didn't worked. I tried to remove some element in selector, and both works...

I guess there is just a limit to anything. 

A step into Semantic Web - XFN

I just drop by few blogs and wondered what does XFN attribute is for. Curious about the unknown XHTML attribute that I'm really sure I've used well, I tried searching and found XNF site, that is relating websites. How to use it is as simple like this:


1. First, if you have a link (anchor), just add an attribute "rel on it.
2. The value of attributes are as follows (reference: http://gmpg.org/xfn/join)

<a href="http://mypartnersite.com/" rel="acquantance met co-worker">text for my co-worker site</a>

XFN quick reference

relationship category	XFN values
friendship (at most one):	friend acquaintance contact
physical:	met
professional:	co-worker colleague
geographical (at most one):	co-resident neighbor
family (at most one):	child parent sibling spouse kin
romantic:	muse crush date sweetheart
identity:	me

3. Then, at your head tag, you must reference the XFN profile by adding an attribute "profile" and giving it a value of "http://gmpg.org/xfn/11" . and that's it. 
< head profile="http://gmpg.org/xfn/11" >





I'm just thinking that doing this will improve the Web 3.0 - Semantic Web, since it will have something to check whether sites are in what way related or not. That, I'll have to find out and see what happen next. ^_^

Twitter still under siege?

twitter is still under siege