I am trying to create a 2-column html table. I want to put a large image in a cell within the second column of the table, and "wrap" the image in <div> tags so I can limit the display width, and have scroll bars so the user can scroll the image to view the entire thing.
The sizing of the <div> works correctly but, the table is always the width of the ENTIRE image...nothing I do seems to limit the width of the table. So, even though the <div> is the correct width, and has the scroll bars, the table is the width of the underlying image.
I am including a sample html page that demonstrates the problem. Just choose a large image that you might have on your machine, and insert it's path into the <img> tag. The example image I am using is 1600X1200.
PS: in this example I am using "min-width" and "max-width", but the problem is the same if I simply use "width".
This code works properly in Firefox. Is there anything I can do to get the desired behavior in IE or, are table widths determined by the contents of the table in IE, regardless of the properties that are defined?
Thanks, in advance, for any advice you can give.
The sizing of the <div> works correctly but, the table is always the width of the ENTIRE image...nothing I do seems to limit the width of the table. So, even though the <div> is the correct width, and has the scroll bars, the table is the width of the underlying image.
I am including a sample html page that demonstrates the problem. Just choose a large image that you might have on your machine, and insert it's path into the <img> tag. The example image I am using is 1600X1200.
PS: in this example I am using "min-width" and "max-width", but the problem is the same if I simply use "width".
This code works properly in Firefox. Is there anything I can do to get the desired behavior in IE or, are table widths determined by the contents of the table in IE, regardless of the properties that are defined?
Thanks, in advance, for any advice you can give.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test a Large Image in a Table</title>
</head>
<body>
<table style="border-bottom-width:thin; min-width:30em; max-width:65em;">
<tr>
<td style="width=20%; background-color:gray;">
Title #1
</td>
<td style="width=80%; background-color:red;">
Why is the table width the same as the width of the image below, in IE?
</td>
</tr>
<tr>
<td style="width=20%; background-color:gray;">
Title #2
</td>
<td style="background-color:red;">
<div style="overflow:auto; min-width:30em; max-width:50em;">
<img src="" alt="some large image" style="z-index:1" />
</div>
</td>
</tr>
</table>
</body>
</html>