If you're using Grails and the Grails UI plugin's autocomplete feature, you may have noticed all of your textboxes have disappeared in Chrome 10. This is thanks to Chrome 10 adding a new default browser style for an invalid attribute: "hidden". Take a look at this jsFiddle: http://jsfiddle.net/jennyfofenny/VkCXh/ If you remove the CSS style on the right, Chrome 10 will by default hide input elements that have the "hidden" attribute set to true. The problem with this is that the hidden attribute is not a valid attribute - and should therefore be "undefined". So, if you've noticed this issue, make sure to add the following CSS style to your reset stylesheet so Chrome 10 behaves like all the other browsers: input[hidden=true][type=text]{display:inline;}

Recently, I was browsing CSS Beauty and noticed quite a few articles on the CSS3 @font-face rule. I have always been somewhat unhappy with sIFR - I just don't like having Flash files as header text. However, after reading more about the @font-face rule, I found out that it may be a suitable substitute for my special headline fonts - it's also mostly cross-browser compliant (and Google Chrome will be adding support in the [ Read More ]

CSS Spriting is a technique for speeding up the load times for your website by reducing the number of HTTP requests for images to the server. On Yahoo's best practices website, they say:

"CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment."

This technique can be extended for non-background images on your site as well. However, some issues arise when you use CSS spriting for your main navigation elements(among other images):

1. You can't attach alternate text to divs for accessibility purposes
2. CSS Spriting and the IE6 PNG fix a ...