DANIELHONRADE

Oh man! after doing so many Drupal theming projects and fixing browser compatibility issues, I feel, I can fix wunderbar today! cool... I can feel it...its last update was still last January.

10 am

The first problem, I think, is that parseInt() ain't going to work for IEs, so I have to use alternatives, IEs can't just get it.

return $(obj).width() + parseInt($(obj).css('margin-right')) + parseInt($(obj).css('margin-left')) + parseInt($(obj).css('padding-left')) + parseInt($(obj).css('padding-left'));

bar_w += totalwidth(this)+4; //this looks better since all the margins are only 1px

11 am

Second thing is that the DOM for this is a little complicated, I have to simplify it.

<div id="branding-bar">
<iv id="branding-bar-content">
(all elements here, deleting the left and right divs, bar-bg,
controlling this div's size will make all elements follow
</div>

I also changed some images like the background and open/close buttons.

2 pm

I added a class called wunderbtn-icon and place it on all elements to be calculated for their widths, I think it's easier for jquery to select all these elements with this single class name,
then I have to add the width of the #bar-user which is 130px.

With wunderbtn-icon class, I can now put all common properties such as height, width, margins, etc. to this single class name, which in effect reduces the size of CSS.

4 pm

With lots of 'trial and error' on css properties, I finally made it to work on IE8, IE7, IE6, Firefox, Safari, Chrome. Yeah... I knew I could fix this today.

On IE6 there's this transparency issue which can be fixed by png_behave module but not 100% great. And IE6 doesn't understand position: fixed, I changed it to position: absolute, which of course scrolls also.

Now view this this bar (Wunderbar!) on the lower right of your browser, try IE6-IE8!