Quarter Life Crisis

The world according to Sven-S. Porst

CSS height¶

387 words

Another CSS question. It’s actually one that I’ve come across a few times already. For example when writing my post about the Das Pop gig. For that I made a 3x1 pixel animated GIF file which is supposed to reflect the strip light thing they had on the web in the most efficient way.

[Looking at the graphics in Safari or WebKit based browsers makes it look blurred and non GIF like because it’s enlarged a lot. That’s a feature of Safari that can be nice but generally irritates me a lot. Particularly, as is very apparent in this case, as the blurring isn’t symmetric - it doesn’t happen at the edges of the image. And, yeah, generally Safari (Cocoa’s?) downscaling looks rather crappy as well.]

My idea was to have that image at the left of the text for all of the post. But what can I specify for the image’s height in CSS to achieve that. I didn’t want to use a number of pixels as the total height of the post will of course vary. So my next guess was to use 100%, but that makes it have the height of the current window in Safari and the proportionally correct height in Camino as it seems. So – as far as I understand at this stage – setting the image’s size as a percentage, will give you the percentage of the parent element’s width for the image’s width in both Camino and Safari. But for the height, you’ll get the percentage of the window’s width in Safari and the percentage of the height the image should have to keep its original proportions in Camino.

Just for completeness’ sake, let me mention that Internet Explorer/Mac seems to work like Camino in this respect, as does Firefox, of course, while Opera and OmniWeb seem to go along the lines of Safari.

The problem I have with this is not only that I couldn’t achieve what I had in mind but also that none of the results seems particularly logical to me. So if you can offer insights on any aspect of this, i.e. how to get things done as I wish or how things are meant to be and how I can see some logical sense in what happens, your comment will be appreciated.

February 10, 2005, 15:41

Comments

Comment by Thomas Corthals: ¶

I’m having similar problems with image height. I have a container div on my page with a height of 100% and this makes it stretch nicely over the entire hight of my window. But when I put a very large image in the container, a heigth of 100% seems to display the image at its real size, while I want it reduced to the window height. For obvious reasons, I can’t do that with a fixed height in pixels.

December 7, 2005, 14:58

Comment by Thomas Corthals: ¶

I was able to solve the issue. The image is inside a hyperlink (anchor tag), which is inside a div. That div is inside yet another div, which is directly inside the body. I had to put a height of 100% on the body, both divs, the anchor and the image. Furthermore, the anchor is displayed as a block level element. This works in Firefox, Opera and IE (I haven’t tested in other browsers).

December 16, 2005, 12:12