Checkbox Styling Bug

Chrome and Firefox will pretty much ignore checkbox styling but IE won't. If you wanna see this in action open this page in all three browsers. This is mostly fine because the original style of the checkbox is not bad. However, when you look at IE you might notice that you checkbox is looking weird.

Weird Looking Checkbox  :
Normal Looking Checkbox: 

After digging in my CSS, I found out that IE will respect the border and background-color styles for a checkbox while Chrome and Firefox won't. I had style like this specified:

input, textarea, select { border: 1px solid #ddd; background-color: white; }

IE applied this style to the checkbox and it ended up looking off. So I figured I can just add another css style to reverse it.

imput[type=checkbox] {border:none !important; background-color: inherit !important}

Problem solved, right? nope!! It turns out that with IE, you can't take it back. Once you apply style to the checkboxes borders or background-color you are screwed.

The only way I was able to solve this problem is by not applying the style in the first place. So I went back to my original CSS and changed it to:

input:not([type=checkbox]), textarea, select { border: 1px solid #ddd; background-color: white; }

Now my checkboxes look the same in Chrome, Firefox, and IE.

Hope this helps!

Cross Browser styling

The project I am currently working on is about to go live. It's an ASP.NET MVC web project for the healthcare industry. We have been working on it for about a year now, and all this time we have been developing exclusively in Chrome.

Now that we are going live, we have to make sure that things are functional and looking alright in IE and Firefox. I ended up being the lucky one in charge of the exciting task!!!!

Here is how I did it:
I convinced the whole world to just FREAKING USE CHROME... M'KAY??

Alas, few users are still resisting, being the nice guy that I am, I decided to make the website temporarily work in IE and Firefox, until I come up with a new strategy to switch the rest of the world to Chrome.

I am gonna add posts to describe some of the issues that I ran into and how I solved them or why I just gave up.

I am blogging

Finally, after procrastinating for years, I decided to start blogging. I guess what always stopped me, is the idea that no body would care about what I have to say. However, I finally convinced myself to do it anyway. Here is why I am gonna start blogging about code:

1. I have a lousy memory! Sometime I run into situations while writing code, and I get this feeling that I had to deal with this problem before. So hopefully if I blog about odd coding issues, I will have a reference to use for the future.
2. I like the idea that one day someone might find something useful in what I write. I can't count the times I have used other people's blogs to solve a problem, or learn about something. The idea that I might be able to give back one day is exciting.

So there you have it, Bassam is blogging!!