If you google it, you will come across a large number of suggestions on how to resolve it. However, just a minor subset of them are completely solid, thus providing a concrete solution.

Dave Shea on mezzoblue writes about it. Despite the fact that he briefly analyses the phenomenon not only you can get a good idea why this happens, but you can read the best solution that I have ever tried. In brief, Dave Shea suggests to convert a sRGB profile prior to the slicing.

The single disadvantage is that the layers are erased upon the conversion so make sure to save a copy first.

Don’t get me wrong, but it sounds like a good joke to me; Internet Explorer becomes a standards compliant browser!

The important part of the official announcement is that “IE8 now renders the Acid2 Face correctly in IE8 standards mode”. You got it? IE8 standards mode; IE8 as every browser comes with two basic rendering modes: quirks and standards. In addition, IE8 provides a special mode called “IE8 standards mode” which is the only mode that successfully passes the famous test. The fun part is that “IE8 standards mode” is not enabled by default and it’s up to the web developer to enable it by placing a new opt-in flag in the head tag.

I admit that I don’t like the way IE8 works. I understand that it is partially necessary to provide support for websites that were built especially for IE6. On the other hand, the lack of such support would force the web developers to update such websites in order to work under “IE8 standards mode” and hopefully under any standards compliant browser!

To conclude, IE8 provides a standards compliant mode which successfully passes the Acid2 Face test but in the meantime encourages old websites to keep and maintain their IE6-only code! Someone could fairly argue that this is just another move from Microsoft in order to keep their browser share.

Wait! There is something else… did you have a look at the official website? Oh… my… God! You should imagine Janice (Chandler’s annoying girlfriend) from Friends saying that! It’s full of high contracted colors badly combined over text and backgrounds. It makes me blink many times before I finally manage to focus on something! Have a look at the bottom of the main page: blue text on yellow background! Come on guys… I know you can do better!

Anyway, I am looking forward for a similar contest about the London 2012 website design… actually, I might participate this time!

I am back with another post in the styling with CSS series. Have you ever tried to style the number of an ordered list? While the replacement of the default bullets is too obvious (list-style-image does the trick), the method of styling list numbers is not. What follows is a demonstration of how this can be achieved by two methods: a) the quick-and-dirty and b) the modern way.

Let’s start with the quick and dirty way, a well-known method which is oddly supported by all browsers, including the little naughty ΙΕ6. The idea behind this method is to apply a set of the desired formatting rules on the li tag and wrap its contents with a block element; div is usually the tag of choice. The last step is to restore the default typography and colours for the wrapper. Unfortunately, it seems that this method does not work with background property. I have prepared some examples for illustration purposes. The following is a CSS example of turning list numbers into red.

1. /* - - - ( coloured list numbers ) - - - */
2. ol.colour li {
3. color: #c33;
4. }
5.  
6. /* - - - ( list sub elements ) - - - */
7. ol li * {
8. color: #333;
9. }
10. Download this code: coloured.txt

On the other hand, the modern way is more complicated but more powerful. It is more powerful because you can not only change the colour or the font family, but you can change the content as well. For example, you can get rid of that dot and replace it with a nice parenthesis. Of course, as one might expect this does not work in all browsers; in fact it works only in Opera! This method is a part of the CSS2 specification, under the Markers and Lists section. Again, I have prepared some examples for you. As I have mentioned, this works only in Opera (Firefox fails to increase the counter it can be solved via counter-reset property ) but I would like to hear about other modern browsers behaviour. The following is the mentioned example of parenthesis:

1. /* - - - ( hide list number ) - - - */
2. ol.parenthesis li {
3. list-style-type: none;
4. }
5.  
6. /* - - - ( replace it with a nice parenthesis ) - - - */
7. ol.parenthesis li:before {
8. display: marker;
9. content: counter(counter) ")";
10. counter-increment: counter;
11. counter-reset: none; /** Firefox fix: counter failed to be increased ) **/
12. width: 2em;
13. float: left;
14. }
15. ol.parenthesis {
16. counter-reset: counter;
17. }
18. Download this code: parenthesis.txt

Well, that’s all! I hope you’ve enjoy it

An almost ten-year gallery is out there and I am wondering why is still “up”, especially after the recent redesign of microsoft.com. It is worth mentioning that it is the number #3 result in google search “css gallery”. Anyway, you can view this as a historical opportunity to see some of the first (maybe?) css examples, under the concept of content and presentation separation: Same Content – Different Style

The problem behind the styling of horizontal rules is perfectly analysed by Marek Prokop. I will not mention or analyse the problems again, since it is out of the scope of this post — what follows is an alternative method of styling horizontal rules.

I do like horizontal rules. They are essential for styling and separating the content in cases that CSS are not available. When I was designing iacons.net, I attempted to use the hr tag pure, without any extra wrappers such as <div class="hr">. Eventually, I came up with a solution: a combination of :after pseudo-class and UTF-8 symbols. Unfortunately, this method can not be used for IE6 and I am not sure about IE7…

I have prepared some examples of formatted horizontal rules. View the source for extra information on how to achieve it.