Archive for January, 2010

IE CSS Bugs That’ll Get You Every Time

Tuesday, January 26th, 2010

ie-bug

IE 6 actually had the best CSS support of any browser when it first came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn’t work in IE 6. While I generally refuse to pander to IE 6’s limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that’ll get you every time:

The Box Model

This is perhaps the most common and frustrating bug of all in IE 6 and below. Let’s say you declare a box like this:

div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

Read more

Tags:

How To Create an IE-Only Stylesheet

Tuesday, January 26th, 2010

This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear.

If you read this blog, there is a 99% chance you’ve had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.

Read more

Tags: , , ,

IE Background RGB Bug

Tuesday, January 26th, 2010

Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare a fallback color before the RGBa value, so older browsers that don’t support it will get a solid color version:

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

The situation is that the RGB fallback color only works when using shorthand. If you were to declare the fallback color like this:

div {
	background-color: rgb(255,0,0);
	background-color: rgba(255,0,0,0.5);
}

Using the background-color property only, it will fail and display no background color at all.

Solution

Using RGB for a fallback is nice. It’s no-brainer work because all you have to do is duplicated the RGBa value, remove the “a” and remove the 4th (opacity) parameter. If you want to keep using RGB as a fallback, just remember to set it using shorthand (if possible), or set the fallback using regular HEX codes or keywords.

In the example, the result of 50% red is a light red anyway, so using a hex code to specify that value might be a more appropriate fallback color anyway.

div {
  background-color: #fd7e7e;
  background-color: rgba(255,0,0,0.5);
}

Tags: , ,

  • Page 1 of 2
  • 1
  • 2
  • >