Re: [css-d] Print Stylesheet issues (Repost)
-- Robert Neville <[EMAIL PROTECTED]> wrote: > I just began developing the print style sheet for my > web page listed below and have encountered several > difficulties. Apparently, the scenario is more > complex > than originally thought. This sheet scenario has > had > me perplexed for several days. I simplified the > html > and removed the JavaScript, which did not bring much > insight. > > http://neville.f2o.org/nifty_DELETE1.html > > Now, the page only has the paragraph and heading > elements. If the text occupies a page or less, > Firefox > renders the print version as expected. If the text > spans a page or more, then Firefox render the > #header; > then a page break; then the text in question; and > cut > the text off after a page of so. http://neville.f2o.org/nifty_DELETE1.html Let me follow-up my post in case anybody else encounters these situations with print style sheets. The scenario was attributed to the media type in the html header. The style sheet that preceded the print sheet needed media="screen." Then the previous styles do not interfere with the print stylesheet. Now, everything seems in working order. ORIGINAL HTML CHANGED HTML __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Print Stylesheet issues (Repost)
Partially repost I just began developing the print style sheet for my web page listed below and have encountered several difficulties. Apparently, the scenario is more complex than originally thought. This sheet scenario has had me perplexed for several days. I simplified the html and removed the JavaScript, which did not bring much insight. http://neville.f2o.org/nifty_DELETE1.html Now, the page only has the paragraph and heading elements. If the text occupies a page or less, Firefox renders the print version as expected. If the text spans a page or more, then Firefox render the #header; then a page break; then the text in question; and cut the text off after a page of so. Indeed browser's print engines are not keen on floats, yet my last print stylesheet did not remove all the floats. The overflow attributes may contribute to the scenario as well. The CSS is extensive (and based off the link below to test all styles), yet this html does not have any floats or elements with overflow attributes. So the problem may lie elsewhere. Please let me know if you have ideas for solving the problem. Heres a link with most attributes applied. http://neville.f2o.org/nifty_Simple.html Start your day with Yahoo! - make it your home page http://www.yahoo.com/r/hs __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Print stylesheet - cut pages off
I just began developing the print stylesheet for the site listed below and have encountered several difficulties. These scenarios seem simple, yet my mind has not resolved them. Damm mind blocks! So the page remains fairly complex as far as the CSS. My header div created a page break between it and the content div. The content does not break between page break and only render a little more than a page. The situation seems odd. Indeed browser's print engines are not keen on floats, yet my last print stylesheet did not remove all the floats. Changing all position fixed, absolute, float to position static may help (yet I less familiar with this attribute). In addition, the overflow attribute may contribute to the scenario as well. Let me know if you have any ideas about these scenarios. Please let your thoughts point to specific solutions rather than focus on general rhetoric. As you all know, time is a precious commodity and the information is vast. Could the JavaScript affect the print stylesheet? Check out #ArticleID which has an additional border on the left and right side. __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE issue - Max-width
Internet Explorer always presents me with challenge.
The current issue involves emulating max-width in IE
using the technique described by Svend Tofte.
http://www.svendtofte.com/code/max_width_in_ie/
The CSS code uses javascript expressions and feeds the
browser's width to the style. The CSS code follows.
* html #Content {
height: 1%;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}
My implementation does resize and display the fluid
width. The hang up in this scenario involves a
definition list, which does not extend the full width
of the #Content container. The dd tag extends to the
adjacent float (#ArticleID) and no further. The second
issues relates to how the container expands beyond the
parent when the width become minuscule. Ideally, a
min-width would solve this problem; unfortunately IE
has not included min-width in the club either.
Please load and shrink you browser window to around
288 pixels. Notice the round corner following the
fluid width. The id, #bgWh, with content expands the
beyond #container. I need to discover how to
constraint this expansion. If you remove the content,
the problem goes away. Overflow: hidden has worked for
me in the past, but did not provide the magic bullet
this time around. Let me know if you have good ideas
on dealing with these scenarios. Firefox does not have
these issues.
http://neville.f2o.org/nifty_TEMP1.html
(Long version)
http://neville.f2o.org/nifty_Sample.html
Elements in the equation:
#Content
dd
#ArticleID
Sell on Yahoo! Auctions no fees. Bid on great items.
http://auctions.yahoo.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Font degradation and flicker
My layout is experiencing typical IE bugs. The layout renders as expect in Firefox; IE has issues with it. I am not sure about how to classify this bug; my guess is that it relates to IE "has layout" behavior. IE renders anchor text within a definition list with a serif font even though my style sheet has no serif declarations anywhere. When you highlight the text with the cursor, IE flips to the style attributes as declared in the style sheet. In my other layout, the h2 appears sometimes and is not rendered other times until you highlight it. The behavior is not consistent. I have tried the holly hack and various other hacks to force IE to return "has layout." Yet the solution has eluded me. Now, I have tunnel vision from reviewing the code so much. A fresh pair of eyes would help me. I have simplified my page a good deal for dissecting this issue as well. Please let me know if you have ideas for resolving this scenario. http://neville.f2o.org/nifty_TEMP1.html (Complicated version http://neville.f2o.org/nifty_Sample.html) Yahoo! Sports Rekindle the Rivalries. Sign up for Fantasy Football http://football.fantasysports.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Descendant Selectors
> a selector of "p"
> would be sufficient to uniquely identify the needed
> element. But let's
> say there's another paragraph elsewhere on the page;
> in that case,
> "#header p" would be sufficient because #header has
> to be unique if
> you're using valid markup.
Great explanation! I pretty much have this wrapped up
with the last explanation. I wanted to expound on my
situation and ask for additional feedback.
My experimental exercise relates to creating HTML
newsletter and how webmail script render HTML and CSS.
My interests do not fall into HTML vs plain text email
discussion. This exercise is valid and educational in
purpose.
Even after reading about StyleinEmail, the topic is
still allusive especially in Gmail. I began a trial
and error process in styling approaches. Then I
captured the webmail clients rendition. The HTML
documents reaffirm several points in StyleinEmail; yet
open additional discrepancies. Webmail clients have
better support for CSS then the StyleinEmail alludes.
Their shortcomings relate to how their scripts rewrite
HTML newsletters. Their stylesheets often over-ride
your inline stylesheet. In other scenarios, it just
strips your font-family declarations. Each webmail
client handles it in a different manner.
My question about descendant selector relates to
styles that do not become overridden by the webmail.
As mentioned StyleinEmail, you may need verbose
attributes in your html for maximum compatibility.
Gmail strips IDs and classes from HTML emails;
font-family from inline styles. However, it keeps
font-size in inline style; and tag.
Hotmail and Yahoo fair better with CSS merging inline
stylesheets with its own style sheet. So my questions
relate to descendant selectors in a vast complicated
stylesheet.
Would #myheader p suffice as original situation
described?
> #myContainer table tr td p
Or do I need verbose style declaration?
Could you simplify to #myContainer p { }; or #myheader
td { }?
Would these styles override #message p { } created
webmail?
(#message would wrap #myContainer)
This topic is not for the faint hearted. Please add
whatever insight you feel relevant.
__
Discover Yahoo!
Use Yahoo! to plan a weekend, have fun online and more. Check it out!
http://discover.yahoo.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Descendant Selectors
I have a quick question about descendant selectors. Even though the following site (http://css.maxdesign.com.au/selectutorial/) has given me considerable insight, this question relates to additional clarification when nesting selectors. Can you add descendant ID selectors to an ID selector? #container #header, #container #footer Would a better approach be the ID selector with the class selector? #container .header, #container .footer In my scenario, the header div is not a direct descendant of the container div. My HTML uses a table structure for lowest common denominator render engines. The whole project is experimental. A code snippet follows below. Let me know if you could confirm various methods for declaring descendant selectors. I am trying to avoid doing the following and get beyond the basics. #container table tr td div#header p, #container table tr td div#footer p __ Do you Yahoo!? Read only the mail you want - Yahoo! Mail SpamGuard. http://promotions.yahoo.com/new_mail __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Form Element disappear in IE
The form element presents a major challenge in IE.
Apparently, IE renders the legend element in odd way.
In IE, the legend falls in the middle of the fieldset
border; the background falls outside the border. When
one set position: relative, IE chokes and does not
always displays the legend element; or pushes it off
the page. Negative margins do not help either since
the background falls outside the border.
In addition, the behavior propagates to my
fieldset.Radio legend style. I place a purple border
around to illustrate the behavior. Again, this
occurrence does not allow me to line up the legend
labels (like FIrefox does).
After rereading the form article on the following
site, the author mentioned that this technique has
this apparent limitation. Even though he states this
point, I need to understand this behavior and
summarize it. Obviously, I could include additional
markup to get around the problem, yet this solution
become less attractive. Hopefully, somebody has found
a solution and could explain the situation.
Search for Block fieldset
http://www.aplus.co.yu/css/styling-form-fields/
I simplified my page. This page still emulates the
position fixed.
http://neville.f2o.org/Template_TEMP1.html
This page removes the OuterWrapper; and assigns
{position: relative;} to the legend element. Bam, the
legend element falls in place; yet push off the
screen.
http://neville.f2o.org/Template_TEMP2.html
The Fieldset.Radio group has unusually behavior as
well. First, the Fieldset has some phantom padding;
thus pushing the legend element 4px to the right;
Second, the legend element pushes the labels to the
next line. Third the radio labels have larger line
heights than in Firefox. Whats going on here? Can we
have more control in IE anywhere along these
scenarios?
Full page
http://neville.f2o.org/Template_noXML.html
__
Yahoo! Mail Mobile
Take Yahoo! Mail with you! Check email on your mobile phone.
http://mobile.yahoo.com/learn/mail
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Multiple Hacks and Form woes
I am still having major issues in IE. This web development exercise involves learning why certain hacks work and other don't. My web page render ok in Firefox. Again, the main problem in my web page relates to complexity. If I simplify the page, the issues subside, which does not help me learn about web development idiosyncrasies. What happen to my labels on the element? They have vanished after applying a few hacks! http://neville.f2o.org/Template_noXML.html The height %1 hack did not alleviate the situation either. Look at the CSS, simple.css, for details. Do I have to apply this height hack or dimension hack (hasLayout) to every element on the web page including elements? These hacks are growing in number and managing them scares me. Removing position: relative does bring back the labels. But this solution introduces another gotcha into the layout. The elements lines up on the border instead inside (compare the web page in Firefox). In addition, the fixed position functionality may brought these form issue into place since it contains its own hacks. I am also trying to address the three pixel jog. The information at PIE was helpful, yet did not help me resolve the situation. Again, the main inquiry refers to managing multiple hacks and pinpointing issues within IE (the page is fine in Firefox). The DOM inspector in Firefox helps, yet I have not found its equivalent in IE. http://www.positioniseverything.net...hreepxtest.html The following pages are pared down examples for those purists, who prefer a simplified page. They are also incomplete in terms of information. Summaries of various issues http://neville.f2o.org/IE_issues.html http://neville.f2o.org/BrowserHacks.html For the three pixel jog http://neville.f2o.org/Template_TEMP1.html __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
