The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> TD height and width inconsistency in Firefox
Brian Chandler
post May 16 2011, 02:39 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,298
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post May 16 2011, 02:45 AM
Post #2


Jocular coder
********

Group: Members
Posts: 2,298
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... (?)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 16 2011, 06:49 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,256
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 16 2011, 09:44 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,256
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... blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post May 16 2011, 12:58 PM
Post #5


Jocular coder
********

Group: Members
Posts: 2,298
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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 16 2011, 02:02 PM
Post #6


.
********

Group: WDG Moderators
Posts: 8,256
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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Ephraim F. Moya
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 13th December 2019 - 12:10 PM