IE not constraining image size
IE not constraining image size
(OP)
I have been having a problem trying to get IE and Chrome to handle tables and images the same.
I originally had issues with IE not constraining (resizing) large images and for some reason Chrome was making the images 1/10 the size of normal sized images. I fixed that for Chrome by adding a width of 20% on the td that held the image and 80% on the td that had paragraphs of text.
This worked fine for Chrome as shown in the sample code of the table below.
But IE still does not constrain a large image. So if all the images are around 50px but you have one that is about 300px the 2nd td gets pushed all the way to the right. Why doesn't the width of 20% constrain the image in IE as it does in Chrome.
Thanks,
Tom
I originally had issues with IE not constraining (resizing) large images and for some reason Chrome was making the images 1/10 the size of normal sized images. I fixed that for Chrome by adding a width of 20% on the td that held the image and 80% on the td that had paragraphs of text.
This worked fine for Chrome as shown in the sample code of the table below.
But IE still does not constrain a large image. So if all the images are around 50px but you have one that is about 300px the 2nd td gets pushed all the way to the right. Why doesn't the width of 20% constrain the image in IE as it does in Chrome.
CODE
<table width=725 border="0" cellspacing="0" cellpadding="0"> <tr> <td style="width:20%"> <a title="something" href="www..."> <img src="/images/docimage.gif"/></a> </td> <td style="width:80%"> Some text </td> </tr> </table>
Thanks,
Tom
RE: IE not constraining image size
CODE
RE: IE not constraining image size
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.
CODE
Keith
www.studiosoft.co.uk
RE: IE not constraining image size
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
RE: IE not constraining image size
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.
RE: IE not constraining image size
I tried this:
CODE
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.
RE: IE not constraining image size
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
RE: IE not constraining image size
CODE
RE: IE not constraining image size
Keith
www.studiosoft.co.uk
RE: IE not constraining image size
->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.
CODE
<div style="width:725px"> <div style="width:20%;float:left"> <img src="TestData/fighter22.jpg" style="width:100%;" /> </div> <div style="width:80%;float:right"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>
"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
RE: IE not constraining image size
Why would you combine a fixed main container with percentages inside it.
Keith
www.studiosoft.co.uk
RE: IE not constraining image size
>> 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
RE: IE not constraining image size
Keith
www.studiosoft.co.uk
RE: IE not constraining image size
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
RE: IE not constraining image size
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