Heyhey,

I did a search for this issue on the forum and couldnt find it, so hopefully this is not a duplicate. If it is, fire at will

Anyways,
I am having a bit of trouble with my website. When I work on it and view it from my home computer (17" monitor 1280x1024) it looks fine. BUT, when I view it from work, (17" monitor 800x600) one image I added to the site takes over the page and kills the entire layout.

How I added the image to the page was:
<div class="logo"><img
src="http://www.plywoodcube.com/styles/prosilver/imageset/plywoodblocklogo.png" alt="The Plywood Cube" height = 100%></div>

Definition of logo in the CSS:
.logo{
float:left;
}

The website is:
here

here is a picture of the problem that I am seeing on the work computer:
problem image

I can not for the life of me figure out how to solve this problem. any help would be greatly appreciated

URL to page?

Safari seems to interpret height="100%" as 100% of the height of div.logo, and shrinks the image accordingly. Firefox and Opera seem to interpret height="100%" as 100% of the height of the image.

If you're trying to scale the image relative to the size of the heading text, then you might find it easier to specify height and width using em units in CSS.

There is a URL to the page in my first post, but here it is again for ease of use:

http://www.plywoodcube.com

Thanks Darin, I will give that a shot as soon as I get off work and can play with it again

But div.logo doesn't have a height so it should be as high as the image... This can't work.

FWIW, all browsers I tried, including Opera Win, displays the image at its true size AFAICS, but I don't have a high resolution screen..