The “No CSS3 until it’s supported by IE” mindset

Posted on November 9, 2010 by Simon

CSS3 has some amazing elements which make styling a site a lot quicker and it can reduce the amount of bandwidth used on the server. Up until a few months ago I was firmly in the “If IE can’t support I can’t use” group. I now believe that was wrong and I hope to explain why… Continue reading →

Share this post with others:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • De.lirio.us
  • Live
  • StumbleUpon
  • LinkedIn
  • Print
  • Slashdot
  • Technorati
  • TwitThis
Posted in New concepts and methods | Tagged , | 2 Comments

CSS a:hover not working or crashing webkit (Chrome, Safari)

Posted on October 20, 2010 by Simon

I came across a strange webkit bug today affecting Chrome and Safari. I had an a:hover on a li and all it did was change the background on hover. The problem was it worked on all browsers except Chrome and Safari.

The code was .nav ul li a:hover so I also added .nav ul li:hover a to the line and that fixed the problem in both Safari and Chrome.

To sum up:

.nav ul li a:hover {}

Became…

.nav ul li a:hover, .nav ul li:hover a { }

Very, very unusual for IE6 to be happy but modern browsers flip out…

Share this post with others:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • De.lirio.us
  • Live
  • StumbleUpon
  • LinkedIn
  • Print
  • Slashdot
  • Technorati
  • TwitThis
Posted in Browser Bugs | Tagged , , , | 7 Comments

Full list of CSS3 supported elements in IE9

Posted on October 15, 2010 by Simon

As IE9 looms on the horizon it is useful to know exactly what CSS3 elements are being supported in Microsoft’s latest browser. Microsoft’s MSDN site has a list of all currently supported CSS3 elements for IE9 but it also contains a list of all CSS2.1 elements support from IE5.5 to IE9. This is a very handy bookmark for all web designers!

Click here to see IE9′s support of CSS3

For the latest W3 progress as well as the release state this is also worth a bookmark: http://www.w3.org/Style/CSS/current-work

Share this post with others:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • De.lirio.us
  • Live
  • StumbleUpon
  • LinkedIn
  • Print
  • Slashdot
  • Technorati
  • TwitThis
Posted in New concepts and methods | Tagged , | Leave a comment

CSS Background image won’t display in IE7

Posted on September 27, 2010 by Simon

When you do the same code pretty much every day problems can be quite infuriating because everything looks fine. I was testing a JavaScript carousel and I noticed that the button to go back wasn’t displaying in IE7. I took a very quick look at the code and it seemed fine…

background:transparent url(/Global/JS/next-horizontal.png)no-repeat top left;

I have learnt time and time again that in these cases you rule out the simple first because it is usually the simple answer which solves a majority of problems. The first thing I do is go “slowly” through the code one piece at a time. On the first sweep of the line I noticed that I hadn’t given the “no-repeat” a space after the closing bracket for the PNG. I always give that space so this was something I haven’t done before. I change it to:

background:transparent url(/Global/JS/next-horizontal.png) no-repeat top left;

Voila! everything is working again. FireFox didn’t care about the missing space but IE did so I’ve just learnt something new!

A few years ago that would have had me tearing my hair out :)

Share this post with others:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • De.lirio.us
  • Live
  • StumbleUpon
  • LinkedIn
  • Print
  • Slashdot
  • Technorati
  • TwitThis
Posted in Browser Bugs | 3 Comments