IE not constraining image size 1

[tshad]

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.

<table width=725 border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td style="width:20%">
         <a title="something" href="[URL unfurl="true"]www...">[/URL]
            <img src="/images/docimage.gif"/></a>
      </td>
      <td style="width:80%">
         Some text
      </td>
   </tr>
</table>

Thanks,

Tom

 

[tshad]

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.

         <table width="725" border="1" cellspacing="0" cellpadding="0">
            <tr>
               <td style="width: 20%">
                  <img src="TestData/PeopleOutine.jpg" />
               </td>
               <td style="width: 80%">
                  <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>
               </td>
            </tr>
            <tr>
               <td style="width: 20%">
                  <img src="TestData/ManOnGlobe.jpg" />
               </td>
               <td style="width: 80%">
                  <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>
               </td>
            </tr>
            <tr>
               <td style="width: 20%">
                  <img src="TestData/fighter22.jpg" />
               </td>
               <td style="width: 80%">
                  <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>
               </td>
            </tr>
         </table>

 

[audiopro]

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.

<img src="TestData/PeopleOutine.jpg" width='200' height='100' alt=''>

Keith

http://www.studiosoft.co.uk

 

[tshad]

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

 

[spamjim]

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.

 

[tshad]

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:

     <div style="width:725px">
        <div style="width:20%;float:left">
           <img src="TestData/fighter22.jpg" />
        </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>

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.

 

[audiopro]

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

http://www.studiosoft.co.uk

 

[spamjim]

You can set a max-width for the images.

<div style="width:725px">
        <div style="width:125px;float:left">
           <img src="TestData/fighter22.jpg" [i][b]style="max-width:125px;"[/b][/i] />
        </div>
        <div style="width:580px;float:right">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        </div>
</div>

 

[audiopro]

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


Keith

http://www.studiosoft.co.uk

 

[1DMF]

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.

<div style="width:725px">
        <div style="width:20%;float:left">
           <img src="TestData/fighter22.jpg" [highlight #FCE94F]style="width:100%;"[/highlight] />
        </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

 

[audiopro]

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

http://www.studiosoft.co.uk

 

[1DMF]

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

 

[audiopro]

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

http://www.studiosoft.co.uk

 

[1DMF]

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

 

[ChrisHunt]

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