Ninja CSS Blog http://ninjacss.com/blog html, css, javascript & other stuff Tue, 17 Aug 2010 16:15:01 +0000 http://backend.userland.com/rss092 en CSS – image links It depends on what’s going to be in the links themselves. If the client wants full on images (including the text in the images), I’d usually just use an <img> with an <a> wrapped around it, as it’s simple and works in all browsers. Alternatively, with the same tools, if ... http://ninjacss.com/blog/2010/08/17/css-image-links/ CSS – image/background transparency filter:alpha(opacity=90); -khtml-opacity: 0.9; -moz-opacity:0.9; opacity: 0.9; Now for the different ways of setting opacity… For Internet Explorer: filter: alpha(opacity=90); For Mozilla: -moz-opacity: 0.9; For Safari (current): opacity: 0.9; This is the important one. It is the current standard supported by Safari, Opera and Firefox For Safari (old): -khtml-opacity: 0.9; This is for older versions of Safari, back before it adopted webkit (which is ... http://ninjacss.com/blog/2009/11/09/css-imagebackground-transparency/ CSS – Selector hacks .someClass { padding-top: 10px; /* shows in all browsers */ *padding-top: 10px; /* shows in IE7 and below */ _padding-top: 10px; /* shows in IE6 and below */ *padding-top: 10px;_padding-top:10px; /*shows in IE7 and IE6 */ http://ninjacss.com/blog/2009/11/05/css-selector-hacks/ Curse you 2.8.5! I hate when I upgrade WP and my plugin(s) break. Please bear with me as I figure out how to fix my blog =) http://ninjacss.com/blog/2009/10/27/curse-you-2-8-5/ CSS – image swap What You Want To Do: You have a horizontal (or vertical) menu list - when you hover over each item, you want it to "change" so that it indicates you're mousing over it and you don't want to use Javascript to accomplish this. How To Do It: Instead of "swapping" ... http://ninjacss.com/blog/2009/07/16/css-image-swap/ Javascript – image swap and preload What You Want To Do: you have a menu of items or a set of images that need to change when they are hovered over. How To Do It: Use the MM Image Swap! Put the following code between the <head> tags or a Javascript file that is called on whichever ... http://ninjacss.com/blog/2009/06/30/javascript-image-swap-and-preload/ CSS – overflow: hidden; FTW! The Problem: The outer container was not wrapping around some text. It was clear in my code that the text should be inside the area with the grey border. The Solution: Use the style "overflow: hidden;" The CSS looked like this: .container { border: 1px solid #cccccc; border-top: none; } So then, I was like: SHAZAM! and ... http://ninjacss.com/blog/2009/06/29/css-overflow-hidden-ftw/ Welcome This is where I will put up HTML/CSS/Javascript issues I come across. If I have a solution to the problem, I will also post that. I'll also write about anything I come across that might be seen as helpful or cool to a front-end web developer (aka ME). http://ninjacss.com/blog/2009/04/28/welcome/