If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

td img {display:block;} makes image links 100% wide

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
16 years ago
13 years ago

People

(Reporter: Chris Hester, Assigned: Marc Attinasi)

Tracking

Trunk
x86
Windows 98
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

16 years ago
Here's the code I'm using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>Bug test</title>

<style>

td img {display:block;}

</style>

</head>

<body>

<table width="642" border="1" cellspacing="0" cellpadding="1" align="center">
 <tr>
  <td align="center">
   <p><a href="http://www.mozilla.org">
   <img src="http://www.mozilla.org/newlayout/screenshots/vanity.gif" border="1"
alt="Test image" /></a></p>

   <p><a href="http://www.mozilla.org">Some text</a></p>
  </td>
 </tr>
</table>


</body>
</html>

The result (using Mozilla 1.0 2002053012) is that the cursor changes to a hand
not just over the image, but across the whole left and right space next to it in
the table.

This might be a fault with the CSS I am applying, but this is essential for a
table layout that breaks in Netscape/Mozilla without this fix. But why the odd
effect with the image link?
Keywords: qawanted

Comment 1

16 years ago
Think this is related to the DTD used - different rendering in quirks vs. 
standard mode.
(Reporter)

Comment 2

16 years ago
Yes, I don't need the td img trick in Quirks mode. (If I don't use that code,
which came from A List Apart by the way, then I get lines of space below cells
in a table. [This only happens in Mozilla and Netscape 6].)
-> Layout
Assignee: Matti → attinasi
Component: Browser-General → Layout
QA Contact: imajes-qa → petersen

Comment 4

15 years ago
A block extends all the way across its containing element.  Therefore, if you
set an image to be a block, it has the same behavior.  The <img>, and therefore
the link, takes up the whole line.  Mozilla is behaving correctly.

Why are you setting it as a block anyway? (it apparently has no effect in
Mozilla other than the issue you are reporting)
(Reporter)

Comment 5

15 years ago
As explained above, I had to use display:block due to a recognized problem with 
table cells and images. I assume the problem is now fixed in Mozilla but before 
it was an essential hack.

Comment 6

15 years ago
Yes.. this works as intended... block width defaults to 100% of the containing block

-> INVALID
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago
Keywords: qawanted
Resolution: --- → INVALID

Comment 7

13 years ago
*** Bug 265163 has been marked as a duplicate of this bug. ***

Comment 8

13 years ago
(In reply to comment #6)
> Yes.. this works as intended... block width defaults to 100% of the containing
block
> 

You're wrong. According to the specs, image width should be it's _instrict_
width, not the default 100%:

http://www.w3.org/TR/CSS21/visudet.html#q7
The used value of 'width' is determined as for inline replaced elements.

http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width
If 'width' has a computed value of 'auto' and 'height' also has a computed value
of 'auto', the element's intrinsic width is the used value of 'width'.

Set this image width in CSS, you will see that it stretches. So if it has
width:100%; (as you says) there won't be any space on it's sides, it will be
stretched to fill it. Now it has something like padding-left and padding-right
to fill the free space. If you remove table and p, it will have only
padding-right. IMO Opera and IE behaves correctly here, Gecko and KHTML are wrong :(

Comment 9

13 years ago
My apologize to all, it is the right behaviour. To keep all clear - read this:
http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level
and
http://www.w3.org/TR/CSS21/visudet.html#blockwidth
The used value of 'width' is determined as for inline replaced elements. Then
the rules for non-replaced block-level elements are applied to determine the
margins.
You need to log in before you can comment on or make changes to this bug.