7 posts related to: CSS: Odd Bug with Colons and Combined Pseudo Elements

Case of the Invisible CSS ::selection

Recently I noticed a weird bug in my free WordPress security plugin, Banhammer. For some reason, I could not select any text on the page. Usually when you click and move the mouse cursor over some text, it becomes highlighted and displayed in some other color. But this wasn’t happening on the Banhammer settings screen. No matter which HTML/text I tried to select, it just wasn’t working. T’was a real mystery.. Continue reading »

CSS Background Hover Slide Effect

While working on the site’s 24th redesign, I played around with a number of styles to customize the appearance of links. As you can see by hovering over any link, I decided to keep the styles as minimal as possible while still letting the user know that, “hey, this is a link”. This quick post shares one of the link styles I was considering, it’s sort of a “slide-up” background-color effect that happens when the user hovers over the hyperlink. Continue reading »

Ajax Slide & Fade Content with jQuery

I recently redesigned my business site, Monzilla Media. The new design features a clean and simple single-page, fixed-sidebar layout. Visitors use the various links in the fixed sidebar to quickly and automatically scroll through to any section. In the Portfolio section, each item contains a “Details” link that loads more content into the fixed sidebar. As the site is mostly static, I wanted this bit of functionality to really shine, and after much testing and tweaking, ended up with a […] Continue reading »

Display Latest Tweet with Show/Hide Cookies

My previous theme displays my latest tweet at the top of every page. It turned out to be an excellent technique for getting more followers – visitors see the tweet, click the link, and possibly follow me on Twitter. There is even a cookie-powered “Hide” link for uninterested visitors to hide the tweet for awhile. I received quite a few requests for a tutorial on the technique, so here is how to display your latest tweet with show/hide cookies. For […] Continue reading »

Beware of Margins or Padding when Using the min-width Hack for IE

While we all watch as Internet Explorer 6 dies a slow, painful death, many unfortunate designers and developers continue to find themselves dealing with IE6’s lack of support for simple things like minimum and maximum widths. Fortunately, there are solutions to this problem, primarily in the form of CSS expressions such as this: /* set the minimum width for IE 6 */ #target_element { width: expression((document.body.clientWidth < 335)? "333px" : "auto"); /* min-width for IE6 */ min-width: 333px; /* min-width […] Continue reading »

CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu

Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the jump menu change to a more visible color. Then, as the cursor moves over the various menu items, each jump link is further highlighted […] Continue reading »

CSS Hack Dumpster

Consider this page a virtual dumpster of wonderful CSS hacks.. Continue reading »