Closed
Bug 152806
Opened 23 years ago
Closed 22 years ago
td img {display:block;} makes image links 100% wide
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: register, Assigned: attinasi)
References
Details
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?
|
||
Comment 1•23 years ago
|
||
Think this is related to the DTD used - different rendering in quirks vs.
standard mode.
|
Reporter | |
Comment 2•23 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].)
|
||
Comment 3•22 years ago
|
||
-> Layout
Assignee: Matti → attinasi
Component: Browser-General → Layout
QA Contact: imajes-qa → petersen
|
||
Comment 4•22 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•22 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•22 years ago
|
||
Yes.. this works as intended... block width defaults to 100% of the containing block
-> INVALID
|
||
Comment 7•20 years ago
|
||
*** Bug 265163 has been marked as a duplicate of this bug. ***
|
||
Comment 8•20 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•20 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.
Description
•