Closed
Bug 327029
Opened 19 years ago
Closed 19 years ago
The anchor tag relies on font-size to determine it's height.
Categories
(Core :: Layout: Block and Inline, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: pwoodward, Unassigned)
Details
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
The anchor tag "boxing" relies on the font-size setting. It assumes that the content of the anchor tag will be text (not an image) - and sets it's height accordingly. If you link with an image - and give the anchor some padding, and a background-color, you'll see right away that only the lower portion of the image gets a background color.
Reproducible: Always
Steps to Reproduce:
1. Try this code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
a.thumbnail {
width: 176px; height: 132px;
padding: 6px 8px 6px 8px;
background-color: blue;
}
a.thumbnail:hover {
background-color: red;
}
</style>
</head>
<body>
<a href="#" class="thumbnail"><img src="images/thumbnail.png" width="160" height="120" alt="" border="0"></a>
</body>
</html>
2. Add a font-size: 100px; to the a.thumbnail style. Reload.
Actual Results:
Only the "baseline" of the anchored image gets a background (about 10 point font).
Expected Results:
That the image would be floating in the center of a block 176 pixels wide, 132 pixels tall - with 8 pixels to either side, and 6 pixels to the top and bottom. Thus the background would appear as a frame around the image.
Maybe IE renders it wrong - but my understanding is that the <A> tag should function as a block element - with boxing.
|
||
Comment 1•19 years ago
|
||
<a> is inline by default. If it wasn't, links in the middle of a paragraph would be on a separate line. If you want your <a> to be a block, you have to set display: block on it. That explains why Firefox ignores your "width: 176px; height: 132px;", but it might not explain why the image doesn't get the <a>'s background.
Component: General → Layout: Block and Inline
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Version: unspecified → 1.8 Branch
Nope, it does explain it.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•