Category Archives: CSS

The CSS3 Carousel Experiment

Posted Friday, August 6th, 2010 05:17 pm GMT +8 | CSS |

Screen shot 2011-06-18 at 9.58.55 PM

When I first read about CSS Animation, I thought that they shouldn’t be messing with the separation of logic and style. In my mind, it should be clear that logic (animation, rotation, even the alternating row styles) should be in javascript, all the styles should be in CSS, and the document structure in HTML. One time, while working on our internal project, I thought I’d try a little -webkit-transition-duration because I wanted the color of the links to gradually change to something else on hover. But when I hovered on our main navigation that was using a sprite image, the background scrolled from one background position to the next every time we hover on it because of the delay! It was really amusing. CSS3 Carousel I experimented a little bit with transition and descendant selectors, but apparently, p ~ p doesn’t work with :hover or :active or :focus very well … Continue reading

Random CSS tips and tricks

Posted Tuesday, September 16th, 2008 03:45 am GMT +8 | CSS |

Screen shot 2011-06-18 at 10.08.55 PM

I wrote (as in handwritten) this a couple of weeks ago when I was having trouble sleeping, chances are you already know these things but, for the benefit of my rusty memory, I’ll still post it here. Besides, solving these problems took me hours of frustration, so I better chronicle it. :( There are times when list items occupy a huge space in IE even though you’re sure that you haven’t specified excessive paddings and margins to it. Setting the list item’s display value to inline-block will solve this (I’m a little surprised that IE 6 can interpret this value because I’ve always thought that it only knows block and inline, that’s how little I think of it). Inline doesn’t allow paddings and margins at the top and bottom area of the elements, however, it also means losing the width and layout of the element. In inline-block, we achieve just … Continue reading

min-height in IE 6

Posted Sunday, August 31st, 2008 03:53 am GMT +8 | CSS |

Would you look at this, while everyone has finally decided that they will be dropping support for IE 6, that’s when I decided to create a tutorial for implementing min-height for the browser. Anyway, onto the post. We all know that the min-height property doesn’t work in IE 6. Instead, the height property acts as both the element’s height and min-height. Its role will ultimately rely on the value of your overflow property. If the overflow property is set to hidden then the height of the element is its max-height. If set on visible, however, then it will be its min-height. Overflow: Visible The element will take up the specified height and when the content of the element exceeds the height then the element will just expand vertically (or horizontally, if it needs to). You can define whether the it will expand vertically of horizontally by specifying the value for … Continue reading

Lessons learned in dealing with IE 6

Posted Tuesday, June 17th, 2008 03:41 am GMT +8 | CSS |

I’ve been “battling” with IE for more than 3 years now and I just felt that it’s finally time to not only bash the poor beloved browser and instead pay homage to the good things that it was able to instill on me. There is no such thing as one tweak fix all If there’s such a thing, the guy (or girl) who was able to find that tweak would’ve been a bajillionaire by now. That or he/she’s, unfortunately probably a Microsoft employee by now. Patience is a virtue (and a very important skill) There was a time before when I was able to “fix” a specific IE bug in one of my dreams. I can’t remember what that bug was though, but I’m sure that happened, because that also happened when I was trying to play with WordPress before. Anyway, I think IE is a great therapy for people … Continue reading

The great IE 6 Hack

Posted Tuesday, April 22nd, 2008 03:45 am GMT +8 | CSS |

As a designer, the biggest problems that I have with IE are the PNG transparency problem and the :hover pseudo class is not working unless it’s used in the a element. Thanks for HTC which is only understood by IE 5.5 and above browsers — I’ve found some handy “hacks” to work around these 2 limitations on the browser designers/programmers’ love to hate. Note: calling it in CSS will make your CSS file invalid even though it’s a part of CSS property lists, I tested it against CSS 1, 2, 2.1 and 3 (just to be sure) so… CSS valid-freaks sorry… Maybe it remained to be just a part of the draft? PNG Transparency I have to admit that I haven’t really looked that hard for PNG transparency hacks, sure you can use PNG 8 but, isn’t it just a “PNGized” GIF? Anyway, if you’re certain that you won’t be … Continue reading

Being productive with CSS

Posted Monday, June 11th, 2007 03:39 am GMT +8 | CSS |

I don’t know about other people but I, for one, use a lot of classes in every design project. So with every project that I have to code, I have to put all of them again and again and again that there are moments that I was not able to add some of them altogether. For example are the classes that enables you to float a certain element (to use for images and whatnots), I always call it alignright or alignleft, always. I have never thought how slow that made me in creating CSS because every time I do one I tend to forget one or more class (or element) or worse, I forget how I was able to do it in one site (e.g. losing the quotation marks in quote tags) that I have to open the CSS file for that site again. I have always thought of creating … Continue reading