Closed Bug 279082 Opened 20 years ago Closed 20 years ago

Problem displaying multible images in a table cell while using linefeed in code

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
minor

Tracking

()

Status:
VERIFIED DUPLICATE of bug 22274

People

(Reporter: m, Assigned: bugzilla)

References

(
URL
)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

The page displayes in two ways depending on a linefeed in the xhtml code that
should not matter. I use the code:

   <table class="bg">
    <caption>White to play the starting roll</caption>
    <tr>
     <td style="vertical-align:top">
      167
     </td>

     <td class="w300" rowspan="2">
      <img style="width:291px;height:18px"
src="http://www.dbgf.dk/bbs/images/n_low.png" alt="" /><img
style="width:25px;height:66px" src="http://www.dbgf.dk/bbs/images/o_w_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_ud_b_2.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_up_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_ud_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_up_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_ud_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_up_w_5.png"
alt="" /><img style="width:25px;height:66px"
src="http://www.dbgf.dk/bbs/images/b_up_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_ud_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_up_w_3.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_ud_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_up_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_ud_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_up_b_5.png" alt="" /><img
style="width:25px;height:66px" src="http://www.dbgf.dk/bbs/images/c_up_0.png"
alt="" /><img style="width:267px;height:20px"
src="http://www.dbgf.dk/bbs/images/b_center.png" alt="" /><img
style="width:24px;height:20px" src="http://www.dbgf.dk/bbs/images/c_ce_1.png"
alt="" /><img style="width:25px;height:66px"
src="http://www.dbgf.dk/bbs/images/o_b_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dn_w_2.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dd_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dn_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dd_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dn_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dd_b_5.png" alt="" /><img
style="width:25px;height:66px" src="http://www.dbgf.dk/bbs/images/b_dn_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dn_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dd_b_3.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dn_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dd_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dn_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dd_w_5.png"
alt="" /><img style="width:25px;height:66px"
src="http://www.dbgf.dk/bbs/images/c_dn_0.png" alt="" /><img
style="width:291px;height:18px" src="http://www.dbgf.dk/bbs/images/n_high.png"
alt="" />
     </td>
    </tr>
    <tr>
     <td style="vertical-align:bottom">
      167
     </td>
    </tr>
   </table>

If I delete the linefeeds the page displays correctly:

   <table class="bg">
    <caption>White to play the starting roll</caption>
    <tr>
     <td style="vertical-align:top">
      167
     </td>

     <td class="w300" rowspan="2"><img style="width:291px;height:18px"
src="http://www.dbgf.dk/bbs/images/n_low.png" alt="" /><img
style="width:25px;height:66px" src="http://www.dbgf.dk/bbs/images/o_w_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_ud_b_2.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_up_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_ud_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_up_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_ud_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_up_w_5.png"
alt="" /><img style="width:25px;height:66px"
src="http://www.dbgf.dk/bbs/images/b_up_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_ud_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_up_w_3.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_ud_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_up_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_ud_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_up_b_5.png" alt="" /><img
style="width:25px;height:66px" src="http://www.dbgf.dk/bbs/images/c_up_0.png"
alt="" /><img style="width:267px;height:20px"
src="http://www.dbgf.dk/bbs/images/b_center.png" alt="" /><img
style="width:24px;height:20px" src="http://www.dbgf.dk/bbs/images/c_ce_1.png"
alt="" /><img style="width:25px;height:66px"
src="http://www.dbgf.dk/bbs/images/o_b_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dn_w_2.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dd_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dn_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dd_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dn_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dd_b_5.png" alt="" /><img
style="width:25px;height:66px" src="http://www.dbgf.dk/bbs/images/b_dn_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dn_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dd_b_3.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dn_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dd_0.png"
alt="" /><img style="width:18px;height:66px"
src="http://www.dbgf.dk/bbs/images/p_dn_0.png" alt="" /><img
style="width:18px;height:66px" src="http://www.dbgf.dk/bbs/images/p_dd_w_5.png"
alt="" /><img style="width:25px;height:66px"
src="http://www.dbgf.dk/bbs/images/c_dn_0.png" alt="" /><img
style="width:291px;height:18px" src="http://www.dbgf.dk/bbs/images/n_high.png"
alt="" /></td>
    </tr>
    <tr>
     <td style="vertical-align:bottom">
      167
     </td>
    </tr>
   </table>

The problem is old, and I found the bug in an old book: O'reilly "Web design in
a nutshell" from 1999 where Netscape had the same problem.

As you see the problem is not relatede to only xhtml but also html

Reproducible: Always

Steps to Reproduce:
1. Hmm - open the page - it does not display the graphics as should be expected.
2.
3.

Actual Results:  
It displays the graphics with vertical spaces between the images.

Expected Results:  
There should be no spaces and if there were they should also be there when I
delete the linefeeds in the xhtml code. I like the first which I interprete
corresponds best to w3c xhtml standards.

I like to keep my code as readable as I can, and I can't if I use the workaround
deleting linefeeds.
add:
img { display: block; } 
and the gap will go away.

*** This bug has been marked as a duplicate of 22274 ***
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → DUPLICATE
Status: RESOLVED → VERIFIED
IMG { display ; block } will solve the problem with the vertical spaces, but
will create a new one since I have and need more than one image in each line.
IMG { display ; block } just makes every image stand on top of each other.
yes, img { display:block; } will make ALL images block elements. Just add
display:block to images that you are showing vertically.

So lets say that these images are in a td with a classname "images", you can then
td.images img
{
    display:block;
}

to only make the images inside that td block elements, the other will remain inline.
You need to log in before you can comment on or make changes to this bug.