Closed Bug 57123 Opened 24 years ago Closed 23 years ago

binarix.com - Images have gaps in XHTML

Categories

(Tech Evangelism Graveyard :: English US, defect, P3)

All
Linux
defect

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: bojan, Assigned: bc)

References

()

Details

(Whiteboard: [fixed?])

From Bugzilla Helper: User-Agent: Mozilla/4.75 [en] (X11; U; Linux 2.2.17 i586) BuildID: 2000092909 The menu on the left hand side of the page has images which are supposed to be layed without gaps. This is true if document type is HTML transitional but not if it's XHTML transitional. Reproducible: Always Steps to Reproduce: 1. Load the page. 2. 3. Actual Results: Gaps are showing where there should be none. Expected Results: Should render with no gaps like with HTML DTD.
This is not a bug. The XHTML doctype declaration triggers the standards layout mode and the CSS box model is applied. (Mozilla has two layout modes: quirks and standard. To use the quirks layout mode, remove the doctype declaration.) The <a> element is a non-replaced inline element. As per spec its height is given by the line-height property--not the height of the content. http://www.w3.org/TR/REC-CSS2/visudet.html#q15 Also, by default images are aligned with the baseline of the <a> element--not with the bottom of the <a> element box. http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align These aspects of the layout can be changed by explicitly overriding the default values via CSS.
Component: Browser-General → Evangelism
Summary: Images have gaps in XHTML → Images have gaps in XHTML
Forgot to reassign...
Assignee: asa → blakeross
QA Contact: doronr → zach
Status: UNCONFIRMED → NEW
Ever confirmed: true
-> evangelism@telocity.com for my evangelism bugs. removing the now-depreciated evangelism-related keywords. setting platform to All.
Assignee: blakeross → evangelism
Hardware: PC → All
Reassigning evangelism bugs to bclary@netscape.com.
Assignee: evangelism → bclary
I have some pixel images to control the height & width of tables.When I put an image inside a <td> with XHTML and the DOCTYPE, Mozilla renders more space than the desired.I have also been testing with the line-height property, as Henri Sivonen comments, and I have better results, but still there is a gap.I have a:<td class="lineheight1pixel"><img src=".." height="1"...></td>The class is defined as { line-height: 1px; } and its rendered as 3 pixels (I suppose that is 1 pixel before the image, 1 pixel the image an 1 pixel after the image.I have search in the CSS reference, and its correct, whem you put line-height to one value, it should be rendered with 1 pixel above and 1 pixel at the bottom, but this means that there isn't a suitable way of maintaining the DOCTYPE and have a good render on Mozilla.Its planned to solve it or not???
Blocks: 85276
There are gaps around images that I cannot control with CSS. I've put a testcase up on http://mxc.ca/mozbug/ . Removing the DOCTYPE makes the page render properly. I have tried loading up my stylesheet with all the no-padding no-border commands I could find and was unable to remove the whitespace beneath my image. Of course, I'd be happy if someone could show me how this can be done...
img { vertical-align: bottom; } td { line-height: 1px; } The first helps a lot (removes the gap) But the second is a big hack (works in windows, but not in linux, since it doesn't find a find as small as 1px height). The first one (default vertical-align: baseline; is documented in w3c css) but I can't find where the second one (<td><img ... height="1"></td>) is described. It seems that the image is rendered as text but there is not a single letter. How can you turn this off? Remember: Specifing the use of a font of height 1px is a hack!
Actually, using "vertical-align: bottom;" removes all the gap for me running Linux with moz092, while using baseline instead of bottom only helps a little. Thank you chtephan!
Arun, I'm giving you all the Linux bugs. If these bugs can be confirmed for other OS's please (someone) change the Platform/OS to All/All and reassign to the default Evangelism Component Owner.
Assignee: bclary → aruner
All Evangelism Bugs are now in the Product Tech Evangelism. See bug 86997 for details.
Component: Evangelism → US English
Product: Browser → Tech Evangelism
Version: other → unspecified
Arun, I am taking your Linux bugs minus banks. Hope you don't mind.
Assignee: aruner → bclary
Summary: Images have gaps in XHTML → binarix.com - Images have gaps in XHTML
It appears to me that this page has been redesigned and no longer displays the reported gaps. I would like to mark this bug as fixed. Any objections?
Whiteboard: [fixed?]
Yes, the page has been redesigned and there are ways to drop the gaps. The main thing is to make sure the style for both the <a> and <img> contained within it are OK. Usually this helps a lot in the CSS stylesheet: line-height: inherit; for both <a> and <img>. There are a few other tricks, like keeping your table cells the correct height, but the bottom line is: it can be done. So, yep, close it.
Status: NEW → RESOLVED
Closed: 23 years ago
Resolution: --- → FIXED
v
Status: RESOLVED → VERIFIED
Product: Tech Evangelism → Tech Evangelism Graveyard
You need to log in before you can comment on or make changes to this bug.