 TD height and width inconsistency in Firefox |
  |
| Brian Chandler |
 May 16 2011, 02:39 AM
Post
#1
|
|
Jocular coder  Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43  |
I use Firefox to print documents: here's a page of labels -- http://imaginatorium.org/private/label20.htm
You will notice the CSS for each table cell, corresponding to one label: CODE TABLE.label { margin: 9mm auto 0 9.5mm; border: none; padding: none; border-collapse: collapse; } TABLE.label TD { width: 67.3mm; height: 36mm; margin: 0; padding: 0; border: 2mm solid #ff8f8f; vertical-align: top; text-align: center; } The labels are each 69.3 x 38 mm, so the CSS values for "width" and "height" are the respective values minus the border width. However, when I print this document in Firefox, the *width* values seem to be correct, matching the label spacing of 69.3 mm, but the *height* values do not match: the spacing between successive labels is 36 mm instead of 38 mm. The implication is that I need to follow the CSS W3 explanation horizontally, but something else vertically. Can anyone shed any light on this? I tried googling for "CSS TD width height inconsistency firefox", but got nowhere. |
  |
 
|
| Brian Chandler |
May 16 2011, 02:45 AM
Post
#2
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Followup: I saw some comments suggesting using a <div> within each <td> for sizing. Is it a good idea (for empirically determinable reliability) to regard all table sizing as unreliable?
Hmm, I suppose I could just generate 20 absolutely positioned divs, one for each label... (?) |
|
|
|
| Christian J |
May 16 2011, 06:49 AM
Post
#3
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Does it only happen in print or print preview, and not on the web page? When I print-previewed the last row of labels spilled over to a second page.
Possibly your "Transitional" Doctype puts Firefox browsers in "Almost standards mode", which according to http://hsivonen.iki.fi/doctype/ "implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification". But when I tried a "Strict" Doctype the print preview ignored the logo's CSS dimensions. You seem to use a JSPrintSetup extension: http://jsprintsetup.mozdev.org/ does that affect things? |
|
|
|
| Christian J |
May 16 2011, 09:44 AM
Post
#4
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(Christian J @ May 16 2011, 01:49 PM)  when I tried a "Strict" Doctype the print preview ignored the logo's CSS dimensions. Forgot using the "print" style media type...  |
|
|
|
| Brian Chandler |
May 16 2011, 12:58 PM
Post
#5
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Thanks! This is only for printing (obviously), but I get the same effect on the screen (but can't make precise measurements).
Seems this "almost quirks" whatever it is causes the problem. I can't find an explanation anywhere of exactly what "traditional vertical wossname" is, but I can kludge around it easily, by simply not subtracting the border from the real height. (I generate CSS pages with PHP, which makes for a _lot_ less frustration.) The JSPrintSetup thing enables me to override the Completely Stupid defaults Firefox is determined to return to at every opportunity. In particular, by default there are enormous margins, which defeat attempts to print on labels. I did start investigating the nitty-gritty of FF printing, and it is truly awful. There are lots of different sorts of margins, all *added* together, and all in diffferent units -- no mm or anything sensible, just 1/00-points, micro-ells, femtoparsecs and so on. About HTML5: is it, like, strict? I'm opposed to masochism, but if I could just switch, it would be nice if things were closer to some sort of spec... |
|
|
|
| Christian J |
May 16 2011, 02:02 PM
Post
#6
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(Brian Chandler @ May 16 2011, 07:58 PM) About HTML5: is it, like, strict? I'm opposed to masochism, but if I could just switch, it would be nice if things were closer to some sort of spec... AFAIK it doesn't separate between Transitional and Strict syntax at all. The syntax rules appears to be like HTML4.01 Transitional, but you can also use XHTML syntax if you like. Apparently you can even mix HTML and XHTML syntax, the following intentionally sloppy example actually validates at http://validator.w3.org/ (because the HTML5 Conformance Checker is still experimental?): CODE <!doctype html> <title>foo</TITLE> bar <P CLASS=x>baz <br /> <br> When it comes to browser mode switching, the HTML5 Doctype makes today's browsers do their utmost to follow the specs, but so do some of the old Doctypes. |
|
|
|
| Ephraim F. Moya |
May 16 2011, 08:27 PM
Post
#7
|
|
Advanced Member Group: Members Posts: 167 Joined: 2-September 07 From: New Mexico Member No.: 3,702 |
QUOTE(Brian Chandler @ May 16 2011, 12:45 AM) Followup: I saw some comments suggesting using a <div> within each <td> for sizing. Is it a good idea (for empirically determinable reliability) to regard all table sizing as unreliable? Hmm, I suppose I could just generate 20 absolutely positioned divs, one for each label... (?) I think this is the best idea. I've done some work this way that worked well. (but not on a printer) I positioned some info with respect to the upper left hand corner of some randomly sized photos using absolute positioning. Good luck. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 12:28 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC