Im currently coding up a design which requires the sliding doors technique see here for sliding doors http://kailoon.com/css-sliding-door-using-only-1-image/ Ive used this technique many times before but only on unordered lists and links ie a nav menu. I cant find anything about achieving the same effect on heading tags ie <h1> im wondering is it possible, has anyone done such a thing before ? Im sure i could quite easily change my h1 to ul add a single li with a href and ive got my sliding door but then that kinda defeats the purpose of the heading tag ...

With a bit of fiddling i got this to work using the same sliding doors technique, heres the code i used for anyone else that may need this.

The css:

h1.mainbox-title {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://kailoon.com/example/sliding-door/images/blue.png) no-repeat scroll right top;
color:#0D5F83;
float:left;
font-size:16px;
padding:4px 15px 0 0;
}
h1.mainbox-title span {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://kailoon.com/example/sliding-door/images/blue.png) no-repeat scroll left top;
float:left;
height:26px;
margin-top:-4px;
padding-left:15px;
}

The html:

<h1 class="mainbox-title"><span>Tele'sand40"tv's</span></h1>

With a bit of fiddling i got this to work using the same sliding doors technique, heres the code i used for anyone else that may need this.

The css:

h1.mainbox-title {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://kailoon.com/example/sliding-door/images/blue.png) no-repeat scroll right top;
color:#0D5F83;
float:left;
font-size:16px;
padding:4px 15px 0 0;
}
h1.mainbox-title span {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://kailoon.com/example/sliding-door/images/blue.png) no-repeat scroll left top;
float:left;
height:26px;
margin-top:-4px;
padding-left:15px;
}

The html:

<h1 class="mainbox-title"><span>Tele'sand40"tv's</span></h1>

 

talk about mega-non-validation ^^

talk about mega-non-validation ^^

It actually does validate just remove the firefox specific code and it validates just fine