Question

Ok here is the fiddle.

http://jsfiddle.net/ozzy/mnmc7/

Code is very very basic at this stage, but essentially here is the css:

.Box {
    width:660px;
    border: 1px solid #aaaaaa;
    border-radius: 3px 3px 3px 3px;
    height:140px;
}
#Logo {
    position:absolute;
    -moz-transform:rotate(270deg);
    transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -o-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    z-index:inherit;
    zoom:1;
}

here is the html so far:

<div class="Box">
                                <div id="Logo">
                                    <img src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" width="130px">
                                </div>
                            </div>

The idea is to get the image to exactly sit inside the div, and float it to the left with say 5px margin. So that it looks like this:

Answer 1

Try adding this to the logo:

position:relative;
float:left;
top:43px;
left:-33px;

Also in Internet Explorer 9 it appears they want you to use rotation=4

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

http://jsfiddle.net/AlienWebguy/mnmc7/21/