I created a test page with the following code and found that this doesn't work in chrome either. There are 3 images and the fighter22.jpg is a very large picture. I would have thought it would get resized to 20% of 722 (table width) but it doesn't.

You are resizing the table cell, not the picture.

As you have set the width of the table, you can also set the width of the image although the use of tables in this instance is not necessary as you could place the images using CSS. This would also save you a lot of code.

Keith
www.studiosoft.co.uk

Actually, the width of the table is necessary as I want the left column to be 20% of the total width of the table.

I had thought that the image would be constrained by the container it was in. Obviously, not the case.

Also, the problem with this is that I wanted the image to be able to be the size of the column but if I fix the size of the image and the column gets smaller, it can again push the column out.

I assume I cannot use a "%" for the width property. And surrounding it with a div wouldn't help either.

Thanks,

Tom

Quote:

if I fix the size of the image and the column gets smaller, it can again push the column out.

You can add another image: a transparent GIF file created at 1pixel wide by 1pixel tall. In the HTML, you can size it to whatever width you need to maintain column width. That will keep a column from collapsing.

But as Keith suggested earlier, you can better control all this by using CSS divs instead of a table design.

Not sure how that works (transparent gif), but on the divs - wouldn't you still need to put the size in the image.

I tried this:

I just used the jet to see what happened and the table actually did better as it still kept the column aspect correct (even though the right column was squashed at only about 5% of the size of the table width). With the floats the images were on the same row (which they weren't without them) but instead of the text being to the right of the image (as in the table), they were in the middle of the picture since the picture took up most of the table width.

As I mentioned in my earlier post, the fact that you are fixing the width of the table itself means that you are specifying the total width of the display.

If you use a combination of divs and CSS to style the whole page, you can specify precisely where on the page each element shows rather than throwing them in the air and seeing where they land.

Many of us were reluctant to transfer from the familiar tables to the witchcraft of CSS but believe me, the transition is worth it. You still use tables for tabular data but using CSS for layout means you write a lot less code and it is easier to debug.

Keith
www.studiosoft.co.uk

You can set a max-width for the images.

You could of course make the images the correct size for the job so resizing becomes unnecessary.

Keith
www.studiosoft.co.uk

Quote:

Many of us were reluctant to transfer from the familiar tables to the witchcraft of CSS but believe me, the transition is worth it.

CSS is not witchcraft, it's total awesomeness and a must

->OP

Remember if you want to set a size of a container and then have the content of it resize to fit the container, you would set the container width to the size you want or percentage, and then the child element can be set to '100%', this way when the container changes size so does the child element.

EG.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

I was merely pointing out that CSS appears to be witchcraft at first until you become familiar with a new way of working.

Why would you combine a fixed main container with percentages inside it.

Keith
www.studiosoft.co.uk

I know Keith, and I was agreeing with your sentiment.

>> Why would you combine a fixed main container with percentages inside it.

I thought the parent container was 20% relative to the screen resolution, so putting 100% on the image constrains it to the size of the parent which is dynamic. Or am I missing something?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

I have never been a fan of percentages, in theory they are great but using them means we are at the mercy of browser foibles.

Keith
www.studiosoft.co.uk

I use them on fonts a lot, which works well, but I rarely use them on elements unless I want 100%!

Now that responsive design has taken over from fluid design, I doubt they are used as much anyway.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

Quote:

I have never been a fan of percentages, in theory they are great but using them means we are at the mercy of browser foibles

I don't believe it is the use of percentages that triggers the appearance of "browser foibles" in this case. The OP defined a fixed width for the table (725px) and a percentage of that width for one of the columns(20%). That's effectively the same as declaring a fixed width of 145px for the column. Nobody in the thread seems to have tried explicitly setting the column width to 145 pixels (including me, without access to the OP's choice of image files and browsers), but I would expect to see the exact same behaviour (for each browser) as you get with percentages - but not necessarily the same behaviour across different browsers.

Essentially you're giving the browser conflicting instructions: "Make this column 145 pixels wide, and display this 200-pixel-wide image within it." Each browser has to square that circle, and different ones may come up with different solutions - not all (or any) of which will be the one you desire or expect. It's like putting out invalid HTML - sure, most browsers will figure out what you mean most of the time, but why take the risk from those that don't?

My advice would be to give consistent instructions in your code, then you won't have to worry about what browsers will do with them. Either make sure that all your images fit your column, or that your column fits all your images. Don't expect the browser to magically know which one of your instructions you want it to disobey.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd