Software utilities

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!

I’ve found out a nice article on how to place an icon or image next to a select option. This is the sample css:
<select name=”issuetype” id=”issuetype”>
<option value=”1″ class=”imagebacked” style=”background-image: url(/images/icons/bug.gif);” selected>
Bug
</option>
<option value=”2″ class=”imagebacked” style=”background-image: url(/images/icons/newfeature.gif);”>
New Feature
</option>
<option value=”3″ class=”imagebacked” style=”background-image: url(/images/icons/task.gif);”>
Task
</option>
<option value=”4″ class=”imagebacked” style=”background-image: url(/images/icons/improvement.gif);”>
Improvement
</option>
</select>

option.imagebacked {
padding: 2px 0 2px 20px;
background-repeat: no-repeat;
background-position: 1px 2px;
vertical-align: middle;
}

Here’s an example:

EDIT: actual dropdown