|
|
Posted by dorayme on 09/28/07 21:07
In article <AodLi.2069$%q2.2065@newsfe1-gui.ntli.net>,
"David Basford" <dbasfo2@ntlworld.com> wrote:
> I have a problem that I can't get my head around
>
> <table width='90%' border='0' cellspacing='8' cellpadding='6' >
> <tr>
> <td width='27%'><span class='resourceheader2'>Text</span><br><br><img
> src='Pic.jpg'></td>
> <td width='18%'>stuff</td>
> <td>stuff</td>
> </tr>
> </table>
>
> but the picture seems to set the width
It depends on whether the pic is specified with a width. If it is
not and it is small, say 10px, it will take up only a portion of
a table cell width set at 27% of the width of the table (which in
turn) is set at 90% of the width of the table's containing body
which might be body and is likely to be at least 800px wide...
You should know that the natural width of the picture (the 100%
size of it as viewed in any image software) is the width of a pic
unless you otherwise specify it. Thus if you say it is 50px, or
50% then the browser will try to accommodate that and ignore the
native width. % are tricky because it is always relative to the
containing element and you need o ask what is the width of
*that*, will *that* accommodate, will *that* fit. Tables are
intelligent creatures and try their best to be everything to
everyone.
> - and the other columns get minimised
> if I set
> <img src='Pic.jpg' width='27%'>
> then it ends up with a column of the width of the original pic with a 27%
> size picture in it :(
>
> I don't want to fix the column widths if I don't have to - but it might be
> my only choice.
>
> Any ideas what is wrong here?
>
It depends on what you are trying to do? It is not clear quite
what you want to happen? What do you imagine or want to happen
for your visitors on different browsers, different screens or
platforms? Once that is known, further advice is possible.
Here is some code that gives a doctype and you can play about:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>List with em dimmed bullets</title>
<style type="text/css">
table {width: 90%;}
td {border: 1px solid #000;}
</style>
</head>
<body>
<table cellspacing='8' cellpadding='6' >
<tr>
<td style="width:27%"><img src="bazzieinwatera.jpg" width="10px"
alt=""></td>
<td style="width:18%">stuff</td>
<td>stuff</td>
</tr>
</table>
</body>
</html>
I am not quite sure if you are thinking about the situation of
specifying a cell to be 27% and also a pic to be 27%. If so, add
in the style in the head
img {width: 27%;}
leave off dimensioning the image inline in <img...> and see how
the image will under some generous browser widths take up only
about a quarter of that cell's width.
--
dorayme
[Back to original message]
|