Re: [WSG] display:table equal height and print style problem for Firefox
Hi, I am out of office until Tue 13th August and will respond to your email on my return. Best Regards, Ruairi *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] display:table equal height and print style problem for Firefox
Hi Georg, Many thanks again! This often means CSS based column-layouts can't be (re)created for print, which, IMO, isn't a bad thing since multi-columns running over several printed pages doesn't make all that much sense. Linearizing - one column after the other - makes a lot more sense on print. I aware of this and already suggested to client. The end-client wouldn't listen, just as he wouldn't listen the fontsize issue. It hasn't been a pleasant project to work on, as much as I wanted to, I cannot just quit half-way because this will be irresponsible (secretly I do hope I get fired though!). Generally: you should not reuse your screen-styles for print and rely on overriding with print-styles. Starting from scratch with a complete set of print-styles, will usually result in less complex print-styles and more reliable results. It works however I run into another problem. First I realized I forgot to add 'media=screen for the style sheet and was getting different results both from Safari, Firefox (both don't seem to render correctly) and IE (it shows correctly). As soon as I added the 'media=screen, they work well but the content in IE is gone. Had the #outer and #inner declared overflow: auto (*also tried 'visible' ) and height: auto (tried 100% too); removed the 25000px in #middle and #right, still, the content is missing. It comes back if I remove the 'media=screen in other stylesheet. And yes, the print.css is with media=print. Checked your perfect equal height page in IE6, there is a big gab between the first and second column. I don't see you have a print style sheet but the equal height column declaration doesn't get in the way. How come? My IE7 is standalone version, the print preview doesn't work therefor I can't test it. This is the same site that I can't show the URL, I wonder if it's ok if I send you the page offlist again to take a look? tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] display:table equal height and print style problem for Firefox
Tee G. Peng wrote: [...] Checked your perfect equal height page in IE6, there is a big gab between the first and second column. I don't see you have a print style sheet but the equal height column declaration doesn't get in the way. How come? I use '@media screen' wrappers for existing styles, so they only work on screen. Browsers are using their own defaults for print, which (generally speaking) is a lot better than most designed solutions. We must override the expressions in print-styles though, as IE doesn't respect @media when it sees expressions. That created the gaps between columns for print. The fixed version is up now... http://www.gunlaug.no/tos/moa_11f.html My IE7 is standalone version, the print preview doesn't work therefor I can't test it. This is the same site that I can't show the URL, I wonder if it's ok if I send you the page offlist again to take a look? Is it up? I couldn't find any print-styles at first glance. regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] display:table equal height and print style problem for Firefox
Tee G. Peng wrote:
A 3 column layout used the display table equal height technique
I am not going to worry the IE at this moment yet ( I understand I
can use Conditional comment for print style sheet too?), but want
to know if there is a way I can make the logo and the middle/right
columns stay in one page in Firefox. Obviously I can't declare
display:none for #outer and #inner.
#outer, #inner,#middle, #right {display: block;}
#left {display: none;}
...would be the a good print-base.
Floating should be avoided since large floating elements tends to
(still) break Gecko. That's probably why Firefox is messing it up now.
This often means CSS based column-layouts can't be (re)created for
print, which, IMO, isn't a bad thing since multi-columns running over
several printed pages doesn't make all that much sense.
Linearizing - one column after the other - makes a lot more sense on
print.
Generally: you should not reuse your screen-styles for print and rely on
overriding with print-styles. Starting from scratch with a complete set
of print-styles, will usually result in less complex print-styles and
more reliable results.
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] display:table equal height and print style problem for Firefox
Anybody know if there is a way for this.
A 3 column layout used the display table equal height technique
#outer {display:table}
#inner {display:table-row}
#left, #middle, #right {display:table-cell}
and the logo with floated left is placed outside the above divs.
img src=logo.gif id=logo
div id=outer
div id=inner
div id=left content left /div
div id=middle content middle /div
div id=rightcontent right /div
/div
/div
For the print style sheet, client wanted to remove the left column,
but keep the middle and right column, so the print shows two columns.
If I have all ids (except the left column that is declared
display:none) floated left, the right column in Safari floated to the
left , placed above the middle column. Right column floated right
aslo get the same result in Safari
If only #middle and #right are floated and no special treatment for
#outer and #inner, then Safari, Firefox and Opera respect the columns
but in Firefox, the logo which is placed outside the #outer wrap,
stays in page 1, and the #middle and #right columns jump directly to
page 2, with a empty page 3. In IE (floated elements are used), the
right column is missing.
I am not going to worry the IE at this moment yet ( I understand I
can use Conditional comment for print style sheet too?), but want
to know if there is a way I can make the logo and the middle/right
columns stay in one page in Firefox. Obviously I can't declare
display:none for #outer and #inner.
Thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] display:table equal height and print style problem for Firefox
Hi, I am out of office until Tue 13th August and will respond to your email on my return. Best Regards, Ruairi *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Display:Table
I'm compiling some information for an article and would appreciate your opinion on an issue. The issue: Imagine that all display values are supported by all browsers as of midnight tonight. Do you think that using display:table and display:table-cell to create multi-column layouts is correct or incorrect - and why? Thanks in advance. -- Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Display:Table
I'd say it's technically correct, as they'd simply be displayed as a table without changing the semantics... but I'd feel dirty using them like that. I'd feel like it was a hack. I'd much rather keep doing things as I do now until CSS's multi-collumns get finished and supported. Imagine that all display values are supported by all browsers as of midnight tonight. Do you think that using display:table and display:table-cell to create multi-column layouts is correct or incorrect - and why? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Display:Table
On 2/4/06, Kenny Graham [EMAIL PROTECTED] wrote: I'd say it's technically correct, as they'd simply be displayed as a table without changing the semantics... but I'd feel dirty using them like that. I'd feel like it was a hack. I'd much rather keep doing things as I do now until CSS's multi-collumns get finished and supported. Display:table isn't any dirtier than float:left. It's a way of telling the browser to render the content, in this case, telling the browser to render it as it would a table... equal height columns, auto widths, etc. Very reliable and easy to work with too. If it was supported widely I would use it all the time. Also I'm pretty sure that CSS multi columns are for inline content, not block. You can't use it, AFAIK, to make block columns. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Display:Table
Display:table isn't any dirtier than float:left. I never said it was a rational feeling. ;) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Display:Table
Al Sparber wrote: Imagine that all display values are supported by all browsers as of midnight tonight. Do you think that using display:table and display:table-cell to create multi-column layouts is correct or incorrect - and why? Yes, it can be, and it would be a much better technique than the existing float techniques, except for the fact that it's limited to source ordered columns. I use display: table-*; on my home page to create the columns, which is why the columns don't work in IE. In fact, using floats for layout is even considered harmful by some [1]. The best technique in the future won't be the multi-column layouts, but the new techniques being worked in the new draft CSS3 Advanced Layout module [2]. [1] http://dbaron.org/log/2005-12#e20051228a [2] http://www.w3.org/TR/css3-layout/ -- Lachlan Hunt http://lachy.id.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Display:Table
On 5 Feb 2006, at 7:13 am, Al Sparber wrote: The issue: Imagine that all display values are supported by all browsers as of midnight tonight. LOL - still eleven hours to go on my side ;-) can't wait... Do you think that using display:table and display:table-cell to create multi-column layouts is correct or incorrect - and why? display:table/display:table-cell is certainly a good way to style content-blocks into multiple columns. Pro: it creates a structured grid that is easily controlled: new block formatting context for each column, various properties of table (table-layout, border-collapse, empty-cells, horizontal alignment), all with a minimum of mark-up; equal-height columns. Probably closer to the original intent of CSS as a styling language [1] Cons: bound to source order, some undefined behaviour (position:relative on table-cell [2]). It is already possible to create very consistent things across browser-land. Except, that is, in IE (win). Much less of hack than float based layouts. @Kenny Graham CSS's multi-collumns [3] is more about flowing content across multiple collumns, not really a layout technique for grid layout and grid positioning. There exist an interesting early draft about grid layouts: http://www.w3.org/TR/2005/WD-css3-layout-20051215 See Bert Boss message to the www-style list [4] [1] http://dbaron.org/log/2005-12#e20051228a [2] http://www.w3.org/TR/CSS21/visuren.html#propdef-position (pos. relative on table-cell is only supported by iCab 3.0) [3] http://www.w3.org/TR/css3-multicol/ [4] http://lists.w3.org/Archives/Public/www-style/2005Dec/0081.html Philippe --- Philippe Wittenbergh http://emps.l-c-n.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
