Software utilities

If you need to have a background color with a background not fully opaque, i.e. with an alpha layer, here’s the sample CSS taht you need:

.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
} 

the last two lines of the CSS are for older Internet Explorer browser, while Internet explorer 9 and the upcoming IE 10 fully support the alpha channel. The problem is that those browsers will use both the opacity lines, so you will have a double level of opacity, and a different behavor in IE9 and IE10 (strangely, in this case IE6-7 and Firefox Chrome Safari will behave the same!!). The best solution would be to add a conditional css inclusion and put the last two lines in an external browser, like this:

<!--[if lt IE 9]>
 <link rel="stylesheet" type="text/css" media="all" href="css/ie.css" />
<![endif]-->

and add the last two lines above in this file.

Hi, maybe you already know something about IE7 and quirks mode. I had problem with a wordpress theme not showing properly on IE7 (strange, isn’t it?!?! ). After googling a bit, I found out that a blank line before doctype caused IE7 to go in quirks mode and make a mess of my beautiful page. I removed it since it was just a blank line and everything went ok.

But now i have a problem, since I need to place a text before doctype (to show a waiting div, for example when you search for a hotel on expedia or similar, you see a Please wait etc… message). Now this text breaks IE7 visualization.

Do you know a way to solve this????

As you may know, Internet Explorer 6 CSS rendering had many flaws. Some of them may be corrected using some trick, such as adding an underscore before the property name:

div

{

    width: 20px; //for Firefox

    _width: 30px; //for IE6

}

IE7 solved some of this bugs, butyou may still find some differences between it and Firefox or other browsers. In thi case, you may use another trick, incompatible with IE6:

div

{

    width: 20px; //for Firefox

    _width: 30px; //for IE6

    .width: 30px; //for IE7

}

Yes, adding a point is enough to make aware IE7 only of this rule!

I think that Microsoft guys knew the CSS problemsof IE6 and IE7, and they also knew that theuy were different bugs, so they added this “feature” to create differnce tricks for the two browser. What do you think?

I had a problem with the margin CSS property on a website with cake. Actually, I used a CSS template for WordPress, copying the code to my website. The code seemed identical, the CSS too, but while on Firefox everything was ok, using IE 7 the page was left oriented (while using Firefox, or accessing a blog with that theme with Iinternet Explorer 7, it was centered). After a long debugging, i discovered that CakePHP was configured with debug level 1, which outputted the compilation time at the beginning of the page, in a comment. This seemed to upset IE, because when I set the debug level to 1, the comment disappeared and IE 7 displayed the page properly too.

I was wondering why if I add a background to a li elemente inside an unordered list (ul) with an inline display style, the image shows up shrunk, it is only visible behind the text present inside the element. I finally discovered that it’s due to the inline stuff. Both Firefox and IE7 behave the same (previous verisons of IE don’t have this problem, but they misinterpreter the HTML and CSS rules, as usual). Here is the original code:

ul.mymenuclass {

height: 20px;

width: 520px;

}

ul.mymenuclass li {

background-image: url(tab.gif);

display:inline;

width: 82px;

height: 20px;

}

And here’s the modified code:

ul.mymenuclass li {

float: left;  

background-image: url(tab.gif);

display:inline;

width: 82px;

height: 20px;

}

Hope it helps!