Advanced CSS Design Resources - last-child.com » :focus http://www.last-child.com CSS Toys for Professional Web Developers Mon, 19 Dec 2011 18:30:15 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 A quick CSS3 sibling test with the video tag http://www.last-child.com/css3-sibling-with-video-tag/ http://www.last-child.com/css3-sibling-with-video-tag/#comments Tue, 15 Jun 2010 15:56:31 +0000 Ted http://www.last-child.com/?p=240 <video>...</video> <p>...</p> </li> I wanted the paragraph to appear when the video is [...]]]> I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net.
I wanted to display related information when the video is playing. The sibling selector makes this easy.

Here’s the basic markup


<li>
<video>...</video>
<p>...</p>
</li>

I wanted the paragraph to appear when the video is selected. So here’s the simple CSS


section#videolist li {
	position:relative;
}
section#videolist li p {
	display:none;
	position:absolute;
	bottom:-100px;
	left:0;
}
section#videolist li video:focus+p {
	display:block;
}

The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.

]]> http://www.last-child.com/css3-sibling-with-video-tag/feed/ 1 Get rid of the dotted lines on links with image replacement http://www.last-child.com/get-rid-of-the-dotted-lines-on-links-with-image-replacement/ http://www.last-child.com/get-rid-of-the-dotted-lines-on-links-with-image-replacement/#comments Tue, 18 Apr 2006 17:15:40 +0000 Ted http://www.last-child.com/get-rid-of-the-dotted-lines-on-links-with-image-replacement/ I don’t remember where I first found this tip (Hedger Wang?), but it’s a good one. If you are using image replacement, i.e. background images and negative text-indent, you may notice a dotted line appear when the link is clicked and waiting for the page to change (:focus). It’s outlining the text that happens to be wayyyyy off screen. It’s easy as pie to fix this issue.

CSS Fix

This will fix the problem in Firefox. Just drop this into your global.css file.

a:focus { -moz-outline-style: none; }/*this avoids having image replacement sections display a dotted outline*/

JavaScript Fix

This will fix the issue in the other browsers.

var theahrefs = document.getElementsByTagName('a');
//fix dotted line thing when link is OnClicked
for(var x=0;x!=theahrefs.length;x++){
theahrefs[x].onfocus = function stopLinkFocus(){this.hideFocus=true;};
}

]]> http://www.last-child.com/get-rid-of-the-dotted-lines-on-links-with-image-replacement/feed/ 2