Archive for the ‘Programming’ Category

How to get a CSS Transformation value

Friday, June 4th, 2010

Lately I’ve been playing around with CSS Transformations and I was frustrated by the fact that I couldn’t get the transformed value after a transformation has taken place. But if turns out you can, WebKitCSSMatrix has 6 properties for 2D transformations, 16 for 3D transformations. The 6 2D properties are labeled a – f, so here’s how, for example, to get the X transformation:

var elem = document.getElementById('somediv');
var matrix = new WebKitCSSMatrix(window.getComputedStyle(elem).webkitTransform);
var x = matrix.e;

Here’s the documentation, although it doesn’t specify what the properties represent. I know e and f are X and Y, but I haven’t tired the others.

Safari WebKitCSSMatrix Documentation

Sometimes using AlphaImageLoader for PNG isn’t worth it

Thursday, January 3rd, 2008

IE6 forced me to abandon using filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(); to render a png background transparent. The first problem was that links in the div with AlphaImageLoader were no longer working. The solution was to put the png in it’s own div, and absolutely position the div and use AlphaImageLoader. Now the links are working. The second problem I wasn’t able to solve – the text and links were using the page background color instead of the color in the styelsheet. Also, the links had a background gif (a right-aligned arrow) with transparency. The transparency was working, but every pixel in the image with a color was converted to the page background color, just like the text and links. So defeated I replaced the pngs with jpgs, although I probably saved a few bytes because instead of 2 images layered on top of each, I now had just 1 image with 2 slices positioned next to each other.

Justifying text

Monday, November 5th, 2007

I recently had a project where the client wanted the text justified. Browsers do a bad job of justifying text, but under controled circumstances it’s not too bad. IE is actually better at handling justified text because because you can control how the text is justified:

text-justify: [auto | distribute | inter-word | newspaper]

And you can control justification on the last line of text:

text-align-last: [auto | center | inherit | justify | left | right]

For this project the last line of text needed to be justified, which wasn’t happening in Firefox and Safari. The solution was to add addition content using CSS :after psuedo-selector:

	content: " ____________________________________________________________";
	line-height: 0;
	visibility: hidden

Now the last line appears justified in all browsers.

(Updated 8/28/08 to change color: #ffffff to visibility: hidden)

Clipping is forever

Thursday, October 18th, 2007

While trying to build a flyout style menu that animated the opening and closing of menus I ran into problems with the clip style property. The default value of clip is auto, however only firefox understands style.clip = ‘auto’, Safari and IE don’t honor it. By changing it to style.clip = null I got it to work in Firefox and Safari, but no go in IE. So for IE I tried style.clip = ‘rect(auto, auto, auto, auto)’ which worked in IE7 but not in IE6. So finally, by adding style.display = ‘inline-block’ to IE6 I was finally able to remove the clipping style.

As an aside, in CSS the definitive Guide it says rect(0 auto auto 0) is the same as specifing no change to the clipping region, but it didn’t work for right-aligned menus.

Hidden Divs with Scrollbars in Firefox on a Mac

Wednesday, September 5th, 2007

I almost never check Firefox on the Mac because I’ve always assumed that Firefox on a Mac renders web content the same as Firefox on the PC. Well, for at least one case, that assumtion has turned out to be false. The trouble is when a hidden div with an overflow of auto is in a div with an overflow of hidden. If the div is hidden because it is in the overflow region, the scrollbar will appear. See an example here

Turns out this is a bug in Firefox that will be fixed in Firefox 3, but is present in current version of Firefox

There are a lot of work-arounds for the problem, including using JS to enable/disable overflow on the hidden div so that scrollbars don’t need to be generated, but none of the solutions worked for me for the MBN web site because the hidden div is animated as it is revealed and hidden (click on membership then alphabetical – the alphabetical div is what was causing me the problem).

The solution that worked for me was to wrap the hidden div in another div which also has an overflow of auto. This fixed the problem for me with Firefox.

Scrollbars appear on hidden divs in Firefox on a Mac

Sunday, August 26th, 2007

Annoying bug using Firefox on a Mac. If you have a hidden div and it has scrollbars, the scrollbars will shine through:

The simple fix, using overflow: hidden when the div is not being displayed doesn’t work for a web site I’m building,, which has a hidden div that is revealed by animating the div. Changing the order of the divs works partially, although some of the scrollbar still shines through.

Internet Explorer and 120 dpi

Wednesday, July 18th, 2007

I recently was shocked to discover that changing the dpi in Windows will cause IE to scale the fonts used in a web site if the fonts use relative values (ems, percents). The effect is that the browser no longer uses 96 dpi / 16px font size as a base line, and instead uses 20px as the font base line, causing font sizes to increase, sometimes dramatically. Firefox will continue to use 96 dpi/16px as the baseline regardless of the monitor dpi, so for Firefox changing the monitor dpi will not change the appearance of a web site.

After a lot of searching it began to look like finding a solution was hopeless, until I found an article on MSDN that had examples of how to get the screen resolution and some example JavaScript for scaling the page to compensate (which didn’t work).

However, after playing around with it a bit, I realized I can compensate for the scaling using the expression() function in my style sheet. The final expression is:

font-size: expression(screen.deviceXDPI > 96 ? 1000 / ((screen.deviceXDPI / 96) * 16) + “%” : “62.5%”);

What I’m trying to do is scale the page to a 10px base line so that ems are easier to work with (1.4em = 14px, 2.0 em = 20px, etc). If the screen has a dpi higher than 96, then it recalculate the correct percentage by taking the screen dpi and dividing it by 96 to get the percentage increase (120 / 96 = 1.25 or 125%). It then multiples the percentage by 16 to determine what the baseline font size is (1.25 * 16px = 20px). That value is then divided into 1000 (10px * 100%) to get the new percentage (50%).

In my testing these seems to compensate for 120 dpi browsers and keeps the web page looking the same.

Turning images into clickable boxes

Sunday, April 1st, 2007

I’m surprised I haven’t come across this earlier, but recently I needed to turn an image of an arrow into a clickable item by putting some padding and a border around it. That was easily done, and after I added a onclick handler I figured I was done. Then I checked it in IE5.5, and there I discovered that IE5.5 ignores the padding and puts the border around the edge of the image. It doesn’t matter if I use vspace and hspace instead, or change the display to block, IE5.5 won’t honor the padding and the only solution is to change the image to include the padding, or to wrap it in a span or div. In my case, because I needed it to be a clickable button, I decided to wrap it in an <a> tag and set the padding, border, width and display: block on the <a> tag. All was good until I tested in IE7 – IE7 will only use the width of the <a> tag as the hit area, and won’t respond to clicks within the padding. This means instead of having a clickable area anywhere instead the box, instead you have a clickable area only over the image. The solution, reluctantly, was to wrap the <a> in a <div> whose only purpose is to set the width. It seems that if you don’t explicity set the width of the <a>, then it will include the padding in the hit area.

Safari 1.3 inherits overflow when it shouldn’t

Thursday, February 8th, 2007

Turns out that in certain situations Safari 1.3 will use the overflow property from one container and apply it to a different container if they are both on the same z-index, and overlap one another. For example, I had a content div with the overflow set to hidden. I had a another nav div for a flyout menu that overlaps the content div with the hidden overflow. The problem was that when the divs overlapped, the part of the nav div that overflapped the content div was hidden, even though it wasn’t inheiriting the overflow style. The solution was so change the z-index for the nav div, which was at the default, to be something else, I choose 100. After that, the nav div worked as expected. Other browsers didn’t exihibit this problem.

Beware height=1px hasLayout trick in WinIE

Tuesday, January 16th, 2007

Often you’ll need to trigger hasLayout in WinIE 6 and earlier, and a common trick is to use height=”1px” to trigger hasLayout because WinIE won’t honor the height anyway. The problem with this technique, however, is that IE6 won’t allow you to select the text in a div with a height of 1px, unless it’s in a table. One solution would be to use position=”relative” to trigger hasLayout, and for the most part it work, but in certain cases WinIE 5.5 won’t honor margins and padding on a parent div. So the final solution is to use position=”relative” and height=”1px” but restrict the height declaration to WinIE 5.5 because it doesn’t have the text select problem.

position: relative;
\height: 1px;
he\ight: auto;