Hello

I hope someone could find an intelligent and robust solution to the following problem:

Imagine the need to support a system of skins. Each skin should know how to render a specific object. A skin could have the following abstract functions:
- renderButton
- rednerTable
- renderHeader
and so on
The output of these functions should be HTML which provides a concrete implementation based on the skin.
We could have a 'wood' skin which renders the elements in a brownish color, a metal looking skin, and so on.

The complication comes from the requirement that each skin the skin implementation cannot be browser dependent.
There could be a Firefox implementation for each of the skins and yet an IE implementation.

This forms two sibling hierarachy with the Browser abstract class at the top of one and Skin at the top of the other.

My question is? how can I combine these two hierarchy in a smart way so that I will be able to easily support new skins and new browsers?

I don't want to end up writing classes like: MetalIESkin, WoodFirefoxSkin and so on because this solution isn't robust.

I was thinking about having the Skin functions take a Browser object as a parameter and then user it to render themselves, but I am not sure how this helps me.

My ultimate solution should have an isolated code that knows how to render the metal button for IE (for example).
I was thinking about the Abstract factory and Prototype design patterns but I fail to take them into the next step and using them to achieve my goal

help would be appreciated