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 (browser notes below) and came up with this CSS3 carousel experiment.

To do this, you should have the following markup:

<div class="carousel">
  <a href="#" class="first-image">1</a>
  <a href="#" class="second-image">2</a>
  <a href="#" class="third-image">3</a>
  <a href="#" class="fourth-image">4</a>
  <img src="main-background.jpg" alt="" />
</div>

It’s really rather plain, it’s because we’ll be choosing the image using CSS’ child selectors to move the image and it won’t work if we enclose the links in a div or list.

And this CSS:

  img { -webkit-transition: all 5s; -o-transition: all 5s; }
  .carousel { width: 500px; height: 372px; overflow: hidden; }
  a.first-image:hover ~ img { margin-left: 0; }
  a.second-image:hover ~ img { margin-left: -500px; }
  a.third-image:hover ~ img { margin-left: -1000px; }
  a.fourth-image:hover + img { margin-left: -1500px; }

New child selectors: the ~ symbol is used to select all fellow child elements, in this case, an image. If you add another image, it will be selected by this, too. The + sign on the other hand is to select a descendant that directly follows it. It’s really exciting, go nuts! ¹

Browser (in)compatibilities:

• For some reason, webkit-based browsers doesn’t interpret this very well, the second and third link can’t be triggered unless you hover on the fourth link first.
• Firefox interprets the child selectors perfectly but not transition because it will only be implemented in Firefox 4.
• The experiment works perfectly in Opera 10.6 and it gives me a warm fuzzy feeling inside. :D

• 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 that, lose the excess top and bottom spaces while still being able to maintain the layout of the element. (That is, based on my understanding)

  And in some bizarre cases, inline will do and yes, it will still look like it’s a block item and will just take out the excess margin, weird, yes? I wish I have an explanation for this.

• There are numerous times and reasons why we want to set list-style to none. What sucks is that after you’ve turned off the list-style to the parent list item, you’d realize that you want the bullets to show in the children element.

  All hell breaks lose when no matter what head-banging you do, it just won’t show up. Thankfully, display: list-item is there to restore the bullets and is working in IE too!

• List items are supposed to line up neatly even when a float is used to an image before it. However, there are times when that’s not the case in, you guess it! IE 6. Standards-aware browsers will be solved by adding:

  { overflow:hidden; list-item-position:inside; }

  The result may be that the bullet may be a little too close to the text but at least it’s not below the list item just like in IE. The trick is to use display:inline-block too.

• Not all of the CSS problems are in IE. Sometimes the great Fx 2 has some quirks too. It usually happens in the useful, albeit a little used, autocomplete function. What usually happens is that the autocomplete items go under the div elements below it.

  Here’s what I usually do:

  HTML

  <div class="parent_element">
    <div class="autocomplete">
      <ul>
        <li>Value here</li>
      </ul>
    </div>
  </div>

  CSS

  .parent_element { position:relative; z-index:99; overflow:visible; }

  What my understanding of this is that once the z-index is set, then it lifts the entire div and everything within it above every other element in the page therefore eliminating the problem.

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 overflow-y (vertically) or overflow-x (horizontally) (your CSS document won’t validate for CSS 2.1 though, but it’s valid once tested against CSS 3).

So your CSS (for IE 6) will look something like this:

div.parent-element { height:300px; overflow-y:visible; overflow-x:hidden; }

The Complexities that hasLayout Brings

There are some instances when you have to define the height and overflow properties of an element (usually applicable to lists) to meet the demands of the hasLayout curse in IE. In these instances, you will have to add a bogus height and overflow:hidden thinking that it will not bring harm to your design.

That is until you wanted to add a min-height to the parent div.

If your bogus height is set to 1%, you element will collapse. Setting the height to auto will render your layout worse than before because that means that your element “will not have a layout” (ie, your hasLayout is nonexistent in IE).

Setting the height to 100%, however, will then expand your element to the height of its parent div (or element).

You can solve this dilemma by changing your overflow value from hidden to visible and setting the height of your element (usually, list items) to 1% just to retain the bogus height.

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 who need to manage their angers. I used to be very explosive when I’m angry or when I can’t find a solution to a problematic rendering error. Sure, you can say that I matured a little but I think that if IE’s following my every whim all the time, then I don’t think I would be used to seeing any design screwed up in the blasted beloved browser.

If it fixed your problem…

Chances are that it opened a LOT of seemingly unrelated problems waiting to be discovered. I fixed a height problem and the next thing I know, the other elements (who are important at that!) are not showing up anymore. So be wary, be very, very wary about that hacks and fixes.

With IE, anything is possible

I honestly have a feeling that the Murphy’s Law was created with IE in mind, no kidding! If you think that there’s no way that any element will collapse specially if you already specified its width and height, then expect IE to crush that belief of yours.

If you’re dealing with IE, it’s OK to be paranoid

And check, and check, and check. There was a time when an office mate and I was checking the same site in IE, just different machines and it’s rendering differently. Seriously.

If your element collapsed in IE, chances are that it doesn’t have a haslayout

And that usually means you need to add a height and width to your element and if that still did not work, add an overflow:hidden. Sometimes that still won’t work so you have to add a display:block. That usually does the trick. If you don’t want to add a specific height however, you can add 1% or 100% as its value, anything as long as it’s not auto or a pixel or em. Be careful though, if you add a height to its parent div, it’ll take the height of its parent.

I could never stress this enough — haslayout is everything in IE

If your element is inline, then it’s fine, but if it’s a block-level element we’re talking about, grab the IE dev toolbar and hunt for that ever-elusive haslayout property.

Sidenote: Want to run 2 IE in the same machine? Download IE 6 and then download a copy of IE 7 standalone, yes, it’s necessary that it’s in that order and not the other way around because last time I had IE 7 as my default browser and got the IE 6 standalone, IE dev toolbar no longer worked which is one of the things that enabled me to keep my sanity back then.

Before using an IE hack, check out if you can solve the problem without it.

Yes, even if it drives you insane. It’s daunting, it’s scary, but it’s to be done. I hate to look at an IE6 specific stylesheet that contains more or less 100 lines of code. If it’s a problem with margins, try to see if the changes you need to do will make such a big impact to the other browsers, if it’s hardly noticeable then apply the fix in your main stylesheet. Now if we’re talking about 20-25 pixels (or more) difference then by all means, do it in a separate stylesheet.

IE6 doesn’t want <tr> to have borders

It’s annoying when I realized that. I thought the problem was that the table doesn’t have haslayout (how can a table not have a haslayout when it’s a block-level element by default, yes?!) that’s why the borders won’t show up. Turns out that IE doesn’t render a border when it’s in the <tr> tag, you have to add the border in the <td> tag and don’t forget to add border-collapse:collapse for your table so that the border will look continuous.

Test again and again and again

I told this to you before, remember? You can never be too sure with IE so you must be paranoid. You must be an OC and you must never forget to expect the worst case scenarios.

So there! What IE taught me so far, anyone else want to throw in some ideas too?

One unrelated musing, do you know that I just finally realized that this sign < stands for less than and > stands for greater than. It’s stupid, I know but it’s true! And guess what finally taught me this very “complicated” mathematical symbol.

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 using your image on plain backgrounds and your background does not have patterns on them then PNG 8 will be a good solution.

So, while I was looking for a hack to make PNG work on IE 6, I came across IE PNG Fix of Twinhelix which is a good enough solution for me because it doesn’t complicate things for me and it also works on PNG backgrounds on CSS and images you have to insert into your HTML file. However, this being a “hack”, of course it has some limitations too.

The list is from the author, the ones that with emphasis are mine.

• Can’t help IE versions prior to 5.5, sorry.
• Users can’t right-click-save processed PNG images, they’ll save the blank GIF file if they try that. In some cases this might be a feature, not a bug…
• The script detects the “.png” extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere. Apparently, this is also an issue in RoR, I really don’t know why but the images will still not be transparent unless you specifically call the image using the <img> tag, so say goodbye to your <%= image_tag("path_to_file_here") %> way of calling images (unless it’s a JPG or GIF of course).
• It’s most reliable on elements with non-’auto’ dimensions set. So, give images and other elements width/height values; ’100%’, ’10em’ and ’200px’ and so on are all OK, otherwise, you will have a heart attack once you’ve seen it in IE, it’s transparent, yes but still, it is not pretty.
• Background PNG images can’t be tiled. This is a limitation of the IE filter.
• Similarly, padding and borders don’t indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
• There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.

For it to work, all you have to do is create a blank transparent GIF file (it doesn’t matter what size it is) put the path to it in the htc file and call the htc by adding

* { behavior: url(/path_to/iepngfix.htc) }

anywhere in your CSS file. Note that you can replace * with img or whatever element you want. Then voila! PNG transparency has been achieved.

Applying :hover pseudo class for whatever element in IE 6

As I’ve said before, another shortcoming of IE 6 is that it only applies the :hover pseudo class on the a element so it’s really hard to create a hover state for menu items using the sliding door technique unless all you have to do is change the menu item’s link color. Unless you love cutting images for specific menu items or your item’s width is fixed and don’t care what it’ll look like once you have increased the font size, then I guess you need not worry about it.

Anyway, this time, I need not look so hard because of whatever:hover yey! All you have to do is put the htc file anywhere in your site, call it in your CSS using the behavior property again like so –

* { behavior: url(/path_to/csshover.htc) }

(again you can change * to whatever element you want) and voila! You can apply the :hover pseudo class to whatever element that you want and you can be absolutely certain that it will be reflected in IE 6. Lovely. :)

Is there a hack for IE 6 that you know? Please do share. :)

Update (April 28, 2008): Joni buzzed me earlier to ask if maybe adding the behavior property in a stylesheet that’s meant only for IE will make your stylesheet valid. I tried it at Last Leaf and it did! So… now you can make your site valid even though you’re using htc. I can’t believe I failed to test that when I’ve been using IE conditionals for more than a year already! hehe Credit to Joni Ang, XHTML/CSS/Wordpress theme designer extraordinaire :) Also, if you’re using wordpress and you added htc within your theme’s folder, don’t forget to add the complete path to your blank.gif and htc, otherwise, it won’t work.

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 a default CSS that will have all of the classes that I always use plus the default appearance of almost all of the elements.

Classes it is understandable but why elements you ask? Well, one main reason is still the pesky IE. IE does not render quote tags the same way that the new browsers do, i.e. they do not put quotation marks before and after the quote tags to signify that it is a quote. So what I do is take out the quote on all of the browsers in CSS and instead put the hex decimal for quotation marks — &ldquo ; (minus the space) for left quote and &rdquo ; for right quotes. If we have to lose support for IE 6, I have to say that it will be pretty hard to maintain. But that may not for how many years from now.

So, here is what my default CSS looks like, feel free to use it if you like:

a img {
   border:0 none;
}
q:after, q:before {
   content: ''
}
code, samp, kbd, pre, tt {
   font-size: 115%;
}
pre code, code pre {
   font-size:100%;
}
acronym, abbr {
   border-bottom: 1px dotted #000; cursor: help;
}
dfn {
   font-style: italic;
}
dl dt {
   font-weight: bold;
}
dl dd {
   margin-left: 0; margin-bottom:.8em;
}
ul li, ol li {
   margin-bottom: .3em;
}
fieldset {
   border:0 none;
}
th, caption {
   text-align: center;
}
legend {
   font-weight: bold;
   font-size: 120%;
}
input, select, textarea {
   padding:.2em;
}

.clear {
   clear: both;
}
.right {
   text-align: right;
}
.left {
   text-align: left;
}
.alignright {
   float:right;
   margin-left: .8em;
   margin-bottom: .8em;
}
.alignleft {
   float:left;
   margin-right: .8em;
   margin-bottom:.8em;
}
.center {
   text-align: center;
}
.strong {
   font-weight:bold;
}
.italic {
   font-style: italic;
}
.navigation {
   padding: .8em 0;
   text-align: center;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 105%;
   font-weight: bold;
}
	.navigation ul, navigation li {
            list-style: none;
            margin: 0;
            padding: 0; }
	.navigation li {
            display: inline;
            list-style:none;
}

Have I missed to style any important element?

I used relative measurements so that I don’t have to edit it anymore whenever I have to use it. I also do not put any specific rule such as borders, background colors and those that depends on the look and feel of the site.

What do you do to make your coding easier?