Seeing as I haven’t posted anything here for a while I thought I had better get my article writing hat back out of its box. I thought that I should pull together all of the little css tricks and hacks I am forced to use on a daily basis seeing as even though Youtube no longer supports ie6 many of my companies clients still require it. Below is a pretty exhaustive list of all the little problems you are likely to see, and the easiest fix for them. Once you are familiar with the fixes for these bugs you start to notice situations where they may appear and code around them a different way (not float an element where inline will do for example) and, in a way, coding with ie6 in mind has improved my grasp of XHTML and CSS as it has made me think of inventive ways of creating things that will look good in all browsers.

BTW, if you are debugging your pages and don’t already use them, Firebug for firefox and a combination of the IE develoepr toolbar and DebugBar for Internet Explorer (both of which work in various versions of IE) are invaluable tools.

P.s. Some of these workarounds involve aiming code specifically at ie6, and to this end there are 2 tools at your disposal. Either a) in the style sheet, prefix the css rule that you want only IE6 to see with * html (e.g. * html div.someElement{display:inline} will make the display:inline only effect ie6). Or b) have an ie6 only style sheet, that is called in your header in ie6 conditional tags (see here for a really nice rundown of different browsers conditional tags and why they are better than hacks).

Anyway, enough rambling… to the list!

IE6 Double Margin Bug
This is when ie6, in its wisdom, doubles the left margin on the first left floated element, or right margin on the first right floated element. This is very annoying as it often throws your layout WAY out, but fortunately there is a very easy fix. If you add display:inline; to the affected element (i know, it makes no sense adding display inline to a FLOATED and hence by its nature, block level element) IE will miraculously snap back inline with the other browsers, and the other browsers will handily ignore the display:inline. If however you don’t want the browsers that are not ie to see the display inline simply add it in a hackish ie6 conditional css line or in an ie6 conditional style sheet (see above).

IE6 Repeating Text Bug
One of the weirdest ie6 bgs (not that they are ever ‘normal’) – there is a really good write-up of it here: http://www.positioniseverything.net/explorer/dup-characters.html , but in short, if you start seeing the last 3 or 4 characters in an element repeated ghostlily (that is so not a word) ghoulishly (better?) somewhere else on the page you need to add a margin-right:-3px to the element containing the words. That or remove any comments you have in the html around that element (or instead of deleting the comments, why not use the conditional html that we were talking about earlier?). Or, EVEN BETTER, in some situations the same fix as the one above (display:inline on the affected element) will cure this too. So you may want to try all three!

IE6 Ignoring heights/widths
Yeah, ie6 doesn’t understand min-width, and instead treats the width: with the same flexibility. Not a lot you can do here except ensure that you add a width (or height for that matter) and some sort of overflow rule to the element nested inside the element being pushed out.

IE6 Ignoring overflow:hidden
speaking of overflows! IE6 will often ignore the overflow:hidden and overflow:scroll, displaying the content that is outside the bounds of your div anyway, which is ruddy annoying. Easily fixed by adding a position:relative to the div (and sometimes its parent div)

IE6 and Jquery text looking crap on fadeOut or fadeIn
This is all to do with clear type and opacity. IE6 (and 7 for that matter, and i believe 8) lose the clear type on fonts as soon as you start to animate them in any way – making them look like a pile of jaggidy crap. Easiest fix? Add a SOLID colour to the background of the element with the text in. Where this isn’t possible (if the text goes over a gradient or other non solid background) you have to opt for a more complex workaround which involves having a  panel in front of the content that you fade in and out instead (think of it like a cover that starts see through and then whites out) it looks like the text is fading out, in reality it is the panel fading in.

IE6 PNG Support // :hover pseudo class // background positioning
is frankly, crap. IE will not support transparency on PNG images UNLESS (and here is a little known fact) you save the PNG as a PNG8 file (get fireworks, it makes this easy). This does have some drawbacks though as, like gif files, PNG8’s are limited to 256 colors (but unlike gifs do support alpha transparency – that is where something is kind of half see though like a shadow). If you need better quality transparent images than pNG8 can provide (a good example of this is always with gradianted images/logos) then the best PNG fix I have used is Belated PNG . It is a JavaScript based fix, and it does slow your page down when it is run on animations etc but you can’t have everything. It also fixed a few other bugs in ie6 like the lack of support for the :hover pseudo class on anything that is not an anchor and has no problem allowing you to position the background as some of the other PNG fixes out there do.

Hope there is something helpful in there, I am sure I have missed a few that I use but don’t even think about anymore, as I remember any I will certainly come back and add them to the post though, and feel free to add your own in the comments

Eddie

As “the Css guy” I am often looking around for easy ways to remember the various facets, tweaks and foibles of the language.

One of the things I have been toying with for a while is “specificity” of a css selector (basically, given two selectors for the same item, which one wins out?) I have often noticed that if you refrence somthing from a lower element of your site (for example div#wrapper div.content div.left a.biglink{color:blue}) it will have more weight (i.e it is more likely to actually be applied to the element) than just a.biglink. I came across this again recently where we had an element with an ID which then had a class added as a transformer (to change it slightly on another page). When referencing this in the css like this:
div#thisdiv{background:#ffffff}
div.transformer{background:#999999}

the ID would ALWAYS win out – it would always be white regardless of the presence of a transformation class. However, when you make a slight change and reference this as
div#thisdiv{background:#ffffff}
div#thisdiv.transformer{background:#999999}
(including the ID and the Class in the transfomer) it would win over the white when both the ID and the Class were present. This is specifity at work.

It was then I remembered an awesome resource I read a while back on the subject at Stuff and Nonsense which culminates in a fantastic little representation of how specificity works using star wars characters. See the full star wars chart here but be sure to read the article first.

What Andy does not cover is the use of inline styels in your HTML (thses will always override any css in an external style, no mater how specific) and the use of the contraversial !important tag (which essentialy overrides the specifity within the stylesheet – but many people see this as cheating!)

Eddie

Photoshop used to have problems saving ‘proper’ png files. They used to be silly large and have color-space problems. Well, it seems Photoshop is probably getting this right now but it still tends to create silly large image files which, when used in a web template, are a bit of a pain in the arse.

We found Pngcrush seemed to do a rather better job of compressing (and fixing) the PNG. You can download this from sourceforge for windows/linux  here: Pngcrush

I use a Mac, so finding it for Mac OS X isnt easy, but here isa version compiled by a colleague. Its quite an old version. pngcrush for mac os x

And heres how I use it:


unzip and move to /usr/local/bin

cd to the directory containing some PNG images.
pngcrush -rem gAMA -d fixedpngs *.png

(This command creates a directory called ‘fixedpngs’ and puts the processed png’s into it)

 

(Eddie: If you happen, like me, to be a heathen and use a windows based machine there is also awindows command prompt version of pngcrush which is very easy to use with the  command [pngcrush.exe infile.png outfile.png])