Adobe’s Browserlab…

October 8th, 2009

Been a while since I posted. But I found something that I thought was interesting and COULD be useful to some web designers/developers. Adobe came out with a product called Browser lab. Basically it is a screen shot service. You type in a url, and it takes screen shots of that site using different browsers in different operating systems.

It has some cool features…2 up view to compare to browser screens side by side, 1 up, and Onion Skin view. The last is kind of cool. It overlays two views on top of each other and you can adjust the transparency to see the differences between two browsers.

You have to have an account with adobe to use it, and for right now it is free to the public. They will eventually start charging a monthly fee to use it, probably in the $10-$20 range, like their editor (Incontext Editor).

On the one hand I like the Browserlab for what it is, BUT…you will still have to open the site up that you are building in the actual browsers to use developer or firebug to fix errors.

IE6 PNG’s revisited.

September 9th, 2009

Ok, so I had to do a transparent box on top of a photo, and it had to work in IE6. I already talked about how to do PNG’s in IE6 using Fireworks and CSS, without any javascript or hacks. Well, it didn’t work with a 60% white box over a background image.

I have a div with a background image, and a div on top of that with the 60% white transparent box. Here is an example of what I needed to do:

transparent box example image

Here is what you have to do to get that to work in IE6:

1) Save the file as a PNG-24 in Photoshop
2) Open it in Fireworks
3) Change the PNG-32 to PNG-8
4) Change No Transparency to Alpha Transparency
5) Click Rebuild
6) Export

Here is the CSS:

background-image: ulr(../images/imageName.png);
_background-image: url(../images/imageName.png);
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader 
(src='../images/imageName.png',
sizingMethod='scale');

Remember that the _ means that it is only using that attribute for IE6.

IE6 Min-height problem

August 25th, 2009

Here is one for the newbies to web design. Min-height does not work in IE6, but here is a to get it to work.

selector {
min-height: 500px;
height: auto !important;
height: 500px;
_overflow: visible;
}

IE6 doesn’t understand the min-height or the !important, but it does see the height: 500px, and the overflow: visible extends the container so that everything displays. Simple as that.

First cool link post

August 18th, 2009

Ok, I’m actually going to give you 2 cool links in the first post…for cool links…

First up, Netvibes. A very awesome rss reader that is fully customizable. Trust me, you’ll love it.

http://www.netvibes.com

And Evernote for the second. A very awesome note taking program that lets you sort notes into different notebooks, search things by tags, sync your desktop version with your online one. What is really cool with this is, if you have 2 computers, say a work and a home comp, take notes on the one at work, click sync. Go home start up Evernote at home, and click sync. And wallah, same notes appear. Great for lots of stuff.

http://evernote.com/

Installed code highlighting…

August 18th, 2009

As you can see, I have installed code highlighting….now I just have to change the styles.