Closed
Bug 469371
Opened 16 years ago
Closed 16 years ago
anchor displays low if (1) inside td (2) anchor display:inline-block (3) no inner text (4) inner img vertical-align:top
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 223764
People
(Reporter: susansmythejunk, Unassigned)
Details
Attachments
(2 files)
example gif to reproduce the bug
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
This is a display anomaly occurring only when a complicated set of css conditions are all present. I have a number of anchors inside a single td. All but one have an image and text inside. The remaining one has only an image. The image-only anchor drops 17px lower than the others. If you add any text inside the anchor, for example a  , it will pop back up to the correct display location.
Only specific css conditions trigger this anomaly. The anchors all have display:inline-block, and the images all have vertical-align:top. If you remove either of these styles, the anomaly is not present.
The same anomaly also occurs when only one anchor is present in the td, but it is harder to notice because there's nothing else to compare it to. The anomaly also occurs within a paragraph element as well as a td.
In my test, the same css styles are applied to all elements of like kind. All images are 13px in height. We first noticed this on installing Firefox 3.0.4. Since then, we tested the same HTML/css with version 2 and the display anomaly does not occur.
Reproducible: Always
Steps to Reproduce:
1. make a 13x13 pixel gif file and call it "image.gif"
2. paste demo html given below into an html file in the same directory
(if it doesn't come over properly, I can email a copy)
3. open the html file in Firefox 3.0.4
<html>
<head>
<title>Demo Firefox 3.0.4 Anchor Display Problem</title>
<style>
img {
vertical-align: top;
border: 0px none;
}
a {
display: inline-block;
background-color: whitesmoke;
padding: 2px 3px;
border: 1px solid gainsboro;
text-decoration: none;
}
td {
padding:4px 5px;
color: dimgray;
font-family:verdana,sans-serif;
font-size: 70%;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Without Bug:
</td>
<td>
<a href="#"><img src="image.gif"/> Normal Display</a>
<a href="#"><img src="image.gif"/> Normal Display</a>
<a href="#"><img src="image.gif"/> Normal Display</a>
</td>
</tr>
<tr>
<td>
With Bug:
</td>
<td>
<a href="#"><img src="image.gif"/> Still Normal</a>
<a href="#"><img src="image.gif" title="Not Normal"/></a>
<a href="#"><img src="image.gif"/> Normal Again</a>
<a href="#"><img src="image.gif" title="Not Normal"/></a>
</td>
</tr>
</table>
</body>
</html>
Actual Results:
Two anchors in the second row display 17px lower than the others. These two have only an image, no text, for contents.
Expected Results:
The bottoms of all anchors should be aligned with each other.
|
Reporter | |
Comment 1•16 years ago
|
||
|
|
Reporter | |
Comment 2•16 years ago
|
||
The reason it "works" as desired in Fx2 is, that Fx2 doesn't know what "inline-block" is, so it uses "inline" instead. This bug happens due to the quirks mode implementation of the line height calculation, which is the intended behaviour. However, if you set vertical-align: top; for the a element as well, you'll get the desired layout.
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Resolution: --- → WONTFIX
You need to log in
before you can comment on or make changes to this bug.
Description
•