Software utilities

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:

Sometimes when using IE6/IE7 a text will disappear, it will seem to be there but you won’t see it unless you highlite it. It’s called Peekaboo bug, some report it was corrected in IE7 but it doesn’t seem so to me.

How to solve the Peekaboo bug?

A solution is to add position:relative; to the containing div. It solved this issue for me. If you have any other solution feel free to post it!

Other resources: http://www.brownbatterystudios.com/s.. http://www.zeldman.com/2006/…

I found a very nice discussion about Google rounded corners, which describes a way to get rounded corners from a dynamic page in Google groups. Doesn’t seem to me a good choice to rely your website design on an external tool, especially because in that url you can see the word beta, not a synonym of stability and reliability! It could be a nice starting point, you could create your own rounded corner creator just save those images for future use. Happy designing!