|
Posted by Harlan Messinger on February 19, 2008, 6:47 am
Please log in for more thread options C A Upsdell wrote:
> miguel.mateo@gmail.com wrote:
>> On Feb 19, 3:27 pm, Harlan Messinger
>>> miguel.ma...@gmail.com wrote:
>>>> I am trying to fix a weird problem and I have found no reason for the
>>>> miss behaviour of IE. The following code:
>>>> <html> <body> <center>
>>> The <center> tag is long since obsolete. Remove.
>>>
>>>> <table width="100%" border=1> <tr> <td>
>>> Use CSS for centering inline content in the cell: style="text-align:
>>> center;". (Better to use a <style> section or a separate CSS file.)
>>>
>>> ><center>
>>>
>>>> <img alt="Greece 2004" src="http://upload.wikimedia.org/
>>>> wikipedia/commons/thumb/
>>>> 6/62/%E2%82%AC2_commemorative_coin_Greece_2004.jpg/150px-
>>>> %E2%82%AC2_commemorative_coin_Greece_2004.jpg"/> </center> </td>
>>>> <td>Greece</td> </tr> <tr> <td colspan="2"> Description: is a
>>>> description that holds </td> </tr> <tr> <td style="width:160"
>>>> width=160>
>>> In CSS, you have to say 160 *what*. And when you do ("width: 160px;"),
>>> you don't also use the HTML width attribute.
>>>
>>>
>>>
>>>> <center> <img alt="Finland 2004" src="http://upload.wikimedia.org/
>>>> wikipedia/commons/thumb/a/ab/
>>>> %E2%82%AC2_commemorative_coin_Finland_2004.jpg/150px-
>>>> %E2%82%AC2_commemorative_coin_Finland_2004.jpg"/> </center> </td>
>>>> <td>Greece</td> </tr> <tr> <td colspan="2"> Description: </td> </tr>
>>>> </table> </center> </body> </html>
>>>> Shows a table with some rows. I am trying to put the first cell to
>>>> 160 pixels and the image centered on it (image of 150 pixels) and I
>>>> find no way of doing it. Can somebody tell me what am I doing wrong?
>>>> Please change the code and try ...- Hide quoted text -
>>> - Show quoted text -
>>
>> I changed the code based on your suggestions to:
>>
>> <html>
>> <body>
>> <table width="100%" border=1 style="text-align:center;">
>> <tr>
>> <td style="width:160x;">
>> <img alt="Greece 2004" src="http://upload.wikimedia.org/
>> wikipedia/commons/thumb/
>> 6/62/%E2%82%AC2_commemorative_coin_Greece_2004.jpg/150px-
>> %E2%82%AC2_commemorative_coin_Greece_2004.jpg"/>
>> </td>
>> <td>Greece</td>
>> </tr>
>> <tr>
>> <td colspan="2">
>> Description: is a description that holds
>> </td>
>> </tr>
>> <tr>
>> <td style="width:160x;">
>> <img alt="Finland 2004" src="http://upload.wikimedia.org/
>> wikipedia/commons/thumb/a/ab/
>> %E2%82%AC2_commemorative_coin_Finland_2004.jpg/150px-
>> %E2%82%AC2_commemorative_coin_Finland_2004.jpg"/>
>> </td>
>> <td>Greece</td>
>> </tr>
>> <tr>
>> <td colspan="2">
>> Description:
>> </td>
>> </tr>
>> </table>
>> </body>
>> </html>
>>
>> Still the first cells (where the images are hold) does not go to 160
>> pixels, instead expands to way more. This does not happen If I remove
>> the last word of the "description" content ... any idea?
>
> Stop specifying a table width of 100%. Don't specify a width at all.
> Right now you specify 100%, which makes the browser make a table the
> width of the page, which is much wider than the columns you have
> defined, so the browser expands the widths of the columns.
No, that's all right, because the first column is the only one for which
he's trying to specify the width, he's just doing it wrong. Once he gets
it right, the browser should allocate 160 pixels to the first column and
then allocate the remaining width to the other columns.
>
> Also, do style="width:160x; text-align:center;" to center the contents
> of that table cell.
Don't tell him to use 160x!
|