I'm having an absolute nightmare trying to setup a table I want
Its going to have multiple rows, and the cells with the pictures have to have AT MOST 1px padding/margin ie the picture must fill the whole cell as much as possible.
1.
<tr>
<td>Pic</td>
<td>Text></td>
<td>Pic</td>
<td>Text</td>
<td>Longer Text</td>
<td>Clickable Pic</td>
<td>Clickable Pic</td>
<tr>
and 2.
<tr>
<td>Pic</td>
<td>Text></td>
<td>Pic</td>
<td>Text</td>
<td>Longer Text</td>
<td>Blank</td>
<td>Blank</td>
<tr>
I know its looks straightforward, but I need it to be EXACTLY the same in IE as Firefox, and its driving me mad
use some simple css
img {margin:0; padding: 0;}
td {margin:0; padding: 0;}Thanks but I have tried that
Lets take one case as an example:
One of the images is 24px x 24px, but when put into a cell which is 30px wide with 0px padding and 0px margin, the cell still increases in width in IE, but not Firefox.
I've tried to make the image a background of the cell, but that just causes more problems.
Any ideas?
An image smaller than the cell will expand the cell??? You must be doing something in the same column to cause this. Show the full code.I'm telling you IE just messes it up completely!
Right... i've set up a nice, simple example for you:
The page is viewable here:
<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/test.htm">http://www.firstchoicevacationhomes.com/test.htm</a><!-- m -->
The little 'world' picture is right-aligned in the cell, yet for some reason there's a gap between its right edge and the edge of the cell in IE. Firefox renders it perfectly:
CSS:
table.table-fancy
{
border-spacing: 0px ;
border-collapse: collapse ;
}
td.cell-fancy
{
border: 1px solid RGB(170,170,255);
margin: 0px; padding: 5px;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
}
td.cell-fancy-nopadding
{
margin: 0px; padding: 0px;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
border: 1px solid #ccc;
}
HTML:
<table class="table-fancy">
<tr>
<td class="cell-fancy" width="150" rowspan="2"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"property_details.asp?ID=6"><img class="picture" src="images/properties/thumbs/2_02022006115600.JPG"></a></td>
<td class="cell-fancy-nopadding" width="40" height="25"></td><td class="cell-fancy-nopadding" width="10">7</td>
<td class="cell-fancy-nopadding" width="40"></td><td class="cell-fancy-nopadding" width="10">7</td>
<td class="cell-fancy-nopadding">$332.50 / night</td>
<td class="cell-fancy-nopadding" align="right" width="30"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/link.gif" width="24" height="24" style="padding: 0px; margin: 0px;"></td>
<td class="cell-fancy-nopadding" width="30"></td></tr>
<tr>
<td class="cell-fancy-nopadding" colspan="7">This elegant brand new 7 bedroom, 6 12 bathroom estate home offers absolute luxury throughout.<BR><BR>The home is located in one of the newest, most exclusive vacation rental communities in Central... <a href=http://www.webdeveloper.com/forum/archive/index.php/"property_details.asp?ID=6"> (read more...)</a></td>
</tr>
</table>
<BR>
<table class="table-fancy">
<tr>
<td class="cell-fancy" width="150" rowspan="2"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"property_details.asp?ID=2"><img class="picture" src="images/properties/thumbs/2_30012006154442.jpg"></a></td>
<td class="cell-fancy-nopadding" width="40" height="25"></td><td class="cell-fancy-nopadding" width="10">5</td>
<td class="cell-fancy-nopadding" width="40"></td><td class="cell-fancy-nopadding" width="10">3</td>
<td class="cell-fancy-nopadding">$363.90 / night</td>
<td class="cell-fancy-nopadding" width="30"></td>
<td class="cell-fancy-nopadding" width="30"></td></tr>
<tr>
<td class="cell-fancy-nopadding" colspan="7">Lovely villa in Georgia. The home is located in one of the newest, most exclusive vacation rental communities in Central Florida. The home is in a gated culdesac of just 32 houses and is the close... <a href=http://www.webdeveloper.com/forum/archive/index.php/"property_details.asp?ID=2"> (read more...)</a></td>
</tr>
</table>The solution you seek may be one or two things with Internet Explorer. Both are bugs.
1. I've noticed that IE-Win leaves white space around images, floated or not floated. This has to do with the img element being inline by default. Set the 'world' image to display: block;
2. (And this is most likely your problem), you're suffering from the IE-Win 3 pixel margin float bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->). In this case, set the image in your CSS to display: inline;
Welcome to the Wonderful World of Internet Explorer.
Thanks, I tried both those recommendations and neither works.
The right margin looks quite big, maybe 7 pixels or so. Its driving me crazy!Add this:<table class="table-fancy">
<colgroup>
<col style="width:150px;">
<col style="width:40px;">
<col style="width:10px;">
<col style="width:40px;">
<col style="width:10px;">
<col></col>
<col style="width:30px;">
<col style="width:30px;">
</colgroup>
<tbody>Thanks Fang but I've never seen that before... what does it do? And where should I add it? Before the table content? And does the <tbody> tag need to be closed?
EDIT: Fang, that worked a treat! Thanks! Can't believe I never heard of the colgroup tag, its so useful!
Its going to have multiple rows, and the cells with the pictures have to have AT MOST 1px padding/margin ie the picture must fill the whole cell as much as possible.
1.
<tr>
<td>Pic</td>
<td>Text></td>
<td>Pic</td>
<td>Text</td>
<td>Longer Text</td>
<td>Clickable Pic</td>
<td>Clickable Pic</td>
<tr>
and 2.
<tr>
<td>Pic</td>
<td>Text></td>
<td>Pic</td>
<td>Text</td>
<td>Longer Text</td>
<td>Blank</td>
<td>Blank</td>
<tr>
I know its looks straightforward, but I need it to be EXACTLY the same in IE as Firefox, and its driving me mad
use some simple cssimg {margin:0; padding: 0;}
td {margin:0; padding: 0;}Thanks but I have tried that
Lets take one case as an example:
One of the images is 24px x 24px, but when put into a cell which is 30px wide with 0px padding and 0px margin, the cell still increases in width in IE, but not Firefox.
I've tried to make the image a background of the cell, but that just causes more problems.
Any ideas?
An image smaller than the cell will expand the cell??? You must be doing something in the same column to cause this. Show the full code.I'm telling you IE just messes it up completely!Right... i've set up a nice, simple example for you:
The page is viewable here:
<!-- m --><a class="postlink" href="http://www.firstchoicevacationhomes.com/test.htm">http://www.firstchoicevacationhomes.com/test.htm</a><!-- m -->
The little 'world' picture is right-aligned in the cell, yet for some reason there's a gap between its right edge and the edge of the cell in IE. Firefox renders it perfectly:
CSS:
table.table-fancy
{
border-spacing: 0px ;
border-collapse: collapse ;
}
td.cell-fancy
{
border: 1px solid RGB(170,170,255);
margin: 0px; padding: 5px;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
}
td.cell-fancy-nopadding
{
margin: 0px; padding: 0px;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
border: 1px solid #ccc;
}
HTML:
<table class="table-fancy">
<tr>
<td class="cell-fancy" width="150" rowspan="2"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"property_details.asp?ID=6"><img class="picture" src="images/properties/thumbs/2_02022006115600.JPG"></a></td>
<td class="cell-fancy-nopadding" width="40" height="25"></td><td class="cell-fancy-nopadding" width="10">7</td>
<td class="cell-fancy-nopadding" width="40"></td><td class="cell-fancy-nopadding" width="10">7</td>
<td class="cell-fancy-nopadding">$332.50 / night</td>
<td class="cell-fancy-nopadding" align="right" width="30"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/link.gif" width="24" height="24" style="padding: 0px; margin: 0px;"></td>
<td class="cell-fancy-nopadding" width="30"></td></tr>
<tr>
<td class="cell-fancy-nopadding" colspan="7">This elegant brand new 7 bedroom, 6 12 bathroom estate home offers absolute luxury throughout.<BR><BR>The home is located in one of the newest, most exclusive vacation rental communities in Central... <a href=http://www.webdeveloper.com/forum/archive/index.php/"property_details.asp?ID=6"> (read more...)</a></td>
</tr>
</table>
<BR>
<table class="table-fancy">
<tr>
<td class="cell-fancy" width="150" rowspan="2"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"property_details.asp?ID=2"><img class="picture" src="images/properties/thumbs/2_30012006154442.jpg"></a></td>
<td class="cell-fancy-nopadding" width="40" height="25"></td><td class="cell-fancy-nopadding" width="10">5</td>
<td class="cell-fancy-nopadding" width="40"></td><td class="cell-fancy-nopadding" width="10">3</td>
<td class="cell-fancy-nopadding">$363.90 / night</td>
<td class="cell-fancy-nopadding" width="30"></td>
<td class="cell-fancy-nopadding" width="30"></td></tr>
<tr>
<td class="cell-fancy-nopadding" colspan="7">Lovely villa in Georgia. The home is located in one of the newest, most exclusive vacation rental communities in Central Florida. The home is in a gated culdesac of just 32 houses and is the close... <a href=http://www.webdeveloper.com/forum/archive/index.php/"property_details.asp?ID=2"> (read more...)</a></td>
</tr>
</table>The solution you seek may be one or two things with Internet Explorer. Both are bugs.
1. I've noticed that IE-Win leaves white space around images, floated or not floated. This has to do with the img element being inline by default. Set the 'world' image to display: block;
2. (And this is most likely your problem), you're suffering from the IE-Win 3 pixel margin float bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->). In this case, set the image in your CSS to display: inline;
Welcome to the Wonderful World of Internet Explorer.
Thanks, I tried both those recommendations and neither works.The right margin looks quite big, maybe 7 pixels or so. Its driving me crazy!Add this:<table class="table-fancy">
<colgroup>
<col style="width:150px;">
<col style="width:40px;">
<col style="width:10px;">
<col style="width:40px;">
<col style="width:10px;">
<col></col>
<col style="width:30px;">
<col style="width:30px;">
</colgroup>
<tbody>Thanks Fang but I've never seen that before... what does it do? And where should I add it? Before the table content? And does the <tbody> tag need to be closed?
EDIT: Fang, that worked a treat! Thanks! Can't believe I never heard of the colgroup tag, its so useful!