Re: [css-d] worthwhile article: Thoughtful CSS Architecture
On 10/21/16 11:52 AM, Angela French wrote:
Passing along a recent article worth reading:
https://seesparkbox.com/foundry/thoughtful_css_architecture
This is good, on the whole, though it misses what constitute (IMO) the
most important approach to simplification: markup patterns.
(First corollary: a good stylist has a finger on the pulse of both
markup and CSS. Second corollary: the ever-popular approach of putting
front-end engineers - too many of whom are refugees from older
disciplines in which the conventional wisdom remains that HTML and CSS
are toys - in a different silo entirely is perhaps the single most
important reason why I'm ordered to take beta blockers twice a day.)
In practice, yes, you're going to use classes to tell objects/components
apart, and if you're doing a good job of simplifying your markup, then
you'll need to distinguish e.g. a list intended for case {x} from one
intended for case {y}. With that established, do try to avoid relying
on namespace-y things to accomplish what you can manage with a vanilla
DOM. Comments in working files impose negligible overhead,
classes-all-over-the-place not so much.
Everything that follows from this turns into a further litany about
project mismanagement; a lot of stylesheets-gone-topsy that I see are
overgrown because of ill-advised platform choices, just-get-it-done
management style, and/or a high-level refusal to acknowledge Brooks' Law.
...Done now. I'm gonna go into the kitchen and studiously ignore what's
happening on my lawn.
--
Ben Henick lurker...@henick.net
Sitebuilder At-Larget:@bhenick
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Element style not allowed as child of element div in this context.
tl;dr: Probably best to rely on the advice already given, but here are some soon-to-be-historical details. On 1/19/15, 11:47 PM, Jukka K. Korpela wrote: http://pastebin.com/B9zSx0ew http://pastebin.com/B9zSx0ew When I submit a copy of the code to http://validator.w3.org I get the error message as relating to line 234. That line contains the start tag of a style element: style type=text/css. Which might actually be able to live there, depending upon your attitude toward the standard and other details. By HTML rules, a style element may appear only in the head part. In practice, browsers appear it inside the body element as well, with no difference in effect. This explains why the page works. In the dialects of HTML4, this is exactly right, as is the (snipped) succeeding advice to put your most important styles last to guard against conflicts resolved in undesirable ways. If you rely entirely on the W3C's definitions with respect to HTML5, as does its validator, then this advice is also correct. HOWEVER... There are such things as scoped styles, though I get the sense that they appear to be on the way out as Official Things: https://html.spec.whatwg.org/multipage/semantics.html#the-style-element http://caniuse.com/#feat=style-scoped They were also included in earlier iterations of the W3C's HTML5 standard. Details go on from there, but suffice to say that scoped styles lend themselves to the same sort of abuse as style attributes, and incur great resource expense. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] History and other points of interest Re: OT : links not working smartphone - tablet
(and you know how to do it). A few years ago web development studios started finding the willpower to tell clients they wouldn't commit to like-for-like experiences in legacy Internet Explorer versions, and for a while standards-compliance seemed to be that bit more tenable – but recently I've come across numerous situations where people will say they only care about Chrome iOS support. Well, isn't that special? The trick is to bury the support matrix in the finer print, and deliver cross-browser assets as a matter of course. We too often look at this in terms of which browser will get the best experience; foresight and a firm hand with stakeholders can guarantee that each browser will get the best experience that the budget will allow. This is accomplished by: * Sticking to the features common to the various API implementations, ESPECIALLY those related to CSS; * Relying on native code to the greatest extent practicable, with particular emphasis on try() and catch() in JavaScript functions known to be fragile; * Using frameworks and polyfills to fill the gaps; * Throwing down for server-side processing in those cases that will be simplified accordingly; * Framing only the small shiny bits as platform- specific, if the need to discuss those particulars even arises; and * Testing. Test, test, test. What we have instead are professional managers managing teams of silo'd engineers and designers, with an emphasis on quicker shipping and lean processes. This looks terrific on somebody's bottom line, but it wrings more potential out of the medium than I care to contemplate in any detail. The goal is NOT to ask how high? when the stakeholders say jump, but instead to put the stakeholders at ease and SOLVE THE PROBLEMS THE SITE IS MEANT TO SOLVE. Ahem. Sorry about that. As regards the 'reasonableness' of these various expectations, I think W3C compliant validity is at its most applicable when it comes to web sites consisting of many documents: you want these documents to be consistent with each-other and marked up to universal standards for reasons of posterity universal access. For my part, ...That's actually what a CMS is for, something that just came up at alistapart.com today, in fact. It's folly to insist on adherence to technical standards - which the Web platform suite is only in name, since there is no ENFORCEMENT mechanism - if you have not first set expectations of implementer knowledge and product quality that leave no PRACTICAL alternative to following those standards in spirit as well as name. As afflicted as we are by the race to the bottom, and as unlikely as we are to enter into a ubiquitous and effective professional organization, the opportunity to do that is restricted to a small elite of shops. what I've been working on for the better part of the last year would be more accurately described as web apps: there's a single HTML document and it acts more as a wrapper for dynamic functionality. The term 'document' barely applies, and the use-cases are so esoteric and business-critical that the client will happily use a specific browser version in order to guarantee expected behaviour. ...Then you, sir, are a lucky man. May all your prospects be so accommodating. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Good HTML / CSS3 books
On 10/28/13 11:10 AM, Chris Rockwell wrote: Don't forget about http://www.webplatform.org/ . I'm trying to use it more often but it's hard to break the habit of typing mdn whatever I'm searching for. +1 re MDN. I do the exact same. Actually... for all but the most basic bits, webplatform.org is not quite yet ready for primetime. ...Much to my dismay. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] flexible font sizes?
I forgot Reply to List. Oops. Original Message Subject: Re: [css-d] flexible font sizes? Date: Tue, 13 Aug 2013 14:32:24 -0500 From: Ben Henick lurker...@henick.net To: John A. Johnson j...@coffeeonmars.com On 8/13/13 2:05 PM, John A. Johnson wrote: Is there a way to impose flexibility in font sizes, such as when viewport shrinks, designated type sizes also decrease by a controllable amount? what I have for my font-size right now is a %, shown below, but that is % of the parent type not of the parent tag. Images scale down, yet my headings stay just as large… maybe I just need to handle it with media queries? In your position I would go for the MQs. Meanwhile: http://www.w3.org/TR/2013/CR-css3-values-20130730/#calc-notation -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] what should go in html{ } ?
On 6/26/13 4:29 PM, COM wrote:
my css all begin like what's pasted below. I have no idea what things
ought to be inside the html selector. Any thoughts on what the best
practices are?
IIRC...
html { padding: 0; }
exclusively yields the same result in Presto (Opera, for now) that
body { margin: 0; }
does in other browsers.
I engage in overkill and set
html,body { margin: 0; padding 0; }
when I need that result.
I agree with the other posters that you should take a gander at the
popular resets and decide if there's anything in them that works for you.
--
Ben Henick lurker...@henick.net
Sitebuilder At-Larget:@bhenick
+1 785 856 1863
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] linear-gradient
On 6/5/13 4:57 PM, Angela French wrote:
background-image: linear-gradient(to bottom, red, yellow);
...What Barney C. said. But if you're a glutton for punishment, the
value syntax is as follows:
linear-gradient(angle|keyword, color1 stop1, color2 stop2, ...);
Angles are provided in the form {int}deg and 0deg = 12 o'clock (top to
bottom) unless it's part of -webkit-linear-gradient, in which case 0deg
= 3 o'clock.
Only one keyword is needed; the gradient will travel across the affected
element from there. If two (space-separated) keywords are provided,
they should be on different axes by way of indicating a corner.
Any valid color value will do, as will any valid length value for the
locations of the stops. If stop lengths are omitted, the first color
will be on the left edge, the last on the right, and the other colors
will be evenly spaced along the gradient.
If a CSS property with more verbose values (that aren't data URIs)
exists, I haven't found it yet.
--
Ben Henick lurker...@henick.net
Sitebuilder At-Larget:@bhenick
+1 785 856 1863
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Meta Re: ADMIN: New Thread: The REM unit vs. EM's vs. PX's...
On 1/25/13 10:02 AM, Eric A. Meyer wrote: (P.S. Last night/this morning happens to be the eleventh anniversary of css-discuss. Party hats all 'round!) ...And that would be my cue to feel old. Again. The good news is that eleven years constitutes a positive testimony to effective community management and - in our case - the labyrinthine ways of CSS. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] way to style list item number?
On 10/30/12 11:36 AM, Angela French wrote: Is there a way (excluding using images for bullets) to style the bullet when it is a number or a letter? I'm trying to apply css to some footnotes I'm building. The notes themselves appear in a list at the bottom of my page where each list number (an ol) corresponds to the footnote number. I'd like to try to make the number stand out and actually even wrap it in an a tag if possible to link it back to the footnote reference in the above text. ...An ol, or an li? Only Firefox and Opera support http://www.w3.org/TR/css3-content/#counters well enough to accomplish purely what you contemplate, according to the requirements you just posted. To get broad support for your desired results, you'll need to engage in anonymous span abuse - set the item to the larger size, and set the child (abusive) element to the smaller one. The good news (as such) is that when the improved counter support finally takes shape and enjoys market penetration, the junk markup won't pose too much harm. Your idea to create return links is more easily - and in my opinion, more intuitively - by trailing each footnote with crarr; and wrapping *that* in a link like so: li id=footnote1This is my footnote text. a href=#footnote-1-origin title=Return to Textcrarr;/a/li Still better than that would be to use the :target pseudoclass (for the browsers that support it) and a Suckerfish derivative (for the others) to present the note in context. Wikipedia's been doing something along those lines for a while. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] way to style list item number?
On 10/30/12 12:18 PM, Philip TAYLOR wrote: For me, carriage return and return are as different as chalk and cheese; is there no more appropriate and intuitive symbol generally available ? ...In Unicode, probably so, and likely in the 8193-8448 (U+2001 to U+2200) code position range. In the HTML entity domain, not so much. the next best choice would be rarr; or uarr;. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Standards in general Re: CSS content attribute.
On 10/22/12 4:10 AM, Philip TAYLOR wrote: We, and the stakeholders for whom we work, have expectations founded on solving real-world problems. Some of those problems are more imagined than others, depending upon the actor who presents them. The standing and immediate requirements faced by browser product teams and W3C Group participants are rarely so tangible, or so relevant to the problems that we solve day-in-day-out. If an implementation chooses to ignore the wording of the current specification, which according to : http://www.w3.org/Style/CSS/Overview.en.html is CSS 2.1 as amended by CSS Color Level 3, CSS Namespaces and Selectors Level 3, and implements a behaviour that directly contradicts that specification, how can that be classified as anything other than a bug ? ...On account of three points of logic: 1. Reccos are not binding, no matter how passionately we might wish otherwise. 2. Bugs lead to completely unintended behavior or, in a specification, unintended consequences. 3. CSS 2.1 and especially CSS 3 are in a number of areas well ahead of the state of the art. In most test results I see many given features labelled Partial or Experimental - and unless someone claims to have built a reference implementation, it's hard to call the contradictory behavior a bug. ...Better to call it a misimplementation. So goes the rationale for duplicative -vendor property prefixes; the implication is until we meet the spec and/or the typical behavior, we're keeping this in our own little sandbox. In my view (which I do not think is heretical), an author should be able to /rely/ on a W3C specification, not have to test his/her work against every extant browser -- would you not agree ? I do agree in principle, starting from the premise that the Reccos etc. define the not-broken behavior, and then researching real-world deviation from that expected result. I would even carry my sentiment to the point of stating that if it's contradicting the spec, then it needs to live in a -vendor prefix, preferably one that includes consistent (or at least well-documented) major version information. So many times over the years I've wished that a vendor would relegate to nightlies, or omit entirely, property and selector support that's off-the-rez. However, product team dynamics, release schedules, and vendors' grasp of our priorities rarely have very little to do with the standards-adoption process. That's why the Acid tests were so important: they provided batteries of sub-tests that provided concrete support goals and illuminated implementation challenges that once met would lead to better browsing software. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Does anyone recognize this ?
On 10/17/12 7:27 AM, Philippe Wittenbergh wrote:
E {
display: inline-block;
float: left;
/* .. more .. */
}
[1] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
I'm a bit at sea too... I smell a poor understanding of document flow.
Assuming that those rules have width values set, I reckon it's down to a
failure to refactor, like so:
1. Attempt during prototyping to get some crop of
inline elements to behave like replaced elements.
2. Fail and fiddle, eventually settling on a width/
float/clear solution. If at first you don't
succeed...
3. Exult in triumph and put the site into
production in due course.
4. Neglect stylesheet refactoring thenceforth.
For a heap of reasons, I reckon none of us are complete strangers to #4.
At least half - and probably more like 70% - of my clients would ream me
if I broke out refactoring as an invoice line item. The second sigma
would listen to my explanation then ultimately take the confident
gibberish as evidence that I know what I'm doing what I was paid to do,
and the third would make a point of bringing it up during the
requirements gathering phase.
--
Ben Henick lurker...@henick.net
Sitebuilder At-Larget:@bhenick
+1 785 856 1863
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Minimal CSS Design: searching for inspiration
Strongish opinions follow; consider accordingly. ...Or disregard if you have a good art history education. Gabriele, a look at your site makes it clear that you already understand at least SOME of what follows. It seems like what you're really trying to do is strip away all the parts that aren't essential to the user experience. On 9/16/12 1:04 PM, Gabriele Romanato wrote: I'm actually kinda bored of all these resource websites who present pseudo-minimal CSS designs which feature a lot of graphics and decorations instead. I'm searching for a true minimal CSS design, much like one of the past designs of David Laakso site. I need a strong focus on my contents, just as Nicolas Gallagher shows on his blog. By minimal do you mean lacking accents or conveying an emphasis on simplicity ...? In the first case, start with hierarchy, minimze (but don't eliminate) your use of color, don't be afraid to let negative space lie, and set limits on additive iteration. Cf. http://www.quotationspage.com/quote/26979.html . In both cases, you won't gain much from looking at the trend for inspiration - these days it's rather about custom brushes and distressed whatsits. Instead, start plumbing art, design, and architecture from the late Twenties through the early Sixties, when emphasis on simplicity was something of a fetish. That may require a trip to the bookstore or the library in the end, but there are searches you can do - Gropius, van der Rohe, Paul Rand, and Saul Bass are gimmees. I'm tempted to add Eero Saarinen to the list, but that's a bit more of a challenge. (...And I apologize for the U.S.-centricity of these names, but you write what you know, right?) You'll likely discover once you've sketched something out that the styles will be easy to write. Related: with respect to composition the Fibonacci squares and the Golden Ratio (approx. 1.618:1) will be your best friends. If you really want to get down to brass tacks: 1. Decide on the relationship between IA and hierarchy 2. Choose three colors - foreground, background, and accent 3. Create a single column layout while avoiding any and all shades and tints of your palette colors -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Minimal CSS Design: searching for inspiration
On 9/16/12 2:03 PM, Philip TAYLOR wrote: don't be afraid to let negative space lie Don't be afraid to leave parts of the canvas completely blank/empty. set limits on additive iteration. Keep under control the impulse to add accents or tweak the design. Gropius, van der Rohe, Paul Rand, and Saul Bass are gimmees. These are the names of well known artists, architects, and in the latter two cases designers who might inspire good work. Decide on the relationship between IA and hierarchy Every site has an architecture and flow - establish those first, freeze your decisions, and then sketch/compose ideas that focus on absolutely nothing more than conveying the desired priority and wayfinding cues to the various parts of the site's content. And here's what a classic says about hierarchy in particular: http://webstyleguide.com/wsg2/page/hierarchy.html -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Minimal CSS Design: searching for inspiration
On 9/16/12 2:22 PM, Philip TAYLOR wrote: Many thanks, Ben : much clearer, and just one question remains -- what are gimmees, as in Gropius et al are gimmees ? http://www.urbandictionary.com/define.php?term=gimme - fourth definition, second sense. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] two-column layout question
On 9/10/12 2:50 PM, Chris Kavinsky wrote:
The right column has a 3rd-party plugin that uses a set width. I want
the main column (left side) to fill the screen as the screen resizes
until it hits about 600px wide. At that point the right side column
should drop below the left main content. Normally, to solve the first
situation (flex main column next to set width column), I would float
the right column that has a fixed width. The problem with that is in
the HTML, the side column would need to come first. But that then
would place the side column above the main column when the screen
size is below 600px.
The challenge you face is that in order to make the tops of the two
bounding boxes flush, the first column needs to have float: left set,
which means that it needs a discrete width of some kind.
Assuming that #main-col is first/left, #supporting-col is second/right,
and media queries are out of the question:
#main-col {
float: left;
width: 75%;
min-width: 600px;
}
#supporting-col {
float: right;
max-width: 24%;
}
Unpleasant though the notion might be, you might find that the desired
results are best accomplished by setting an overflow value on
#supporting-col and placing your 3d-party stuff inside of yet another
container within it.
Enclosing all of these in a container with at least { overflow: auto;
height: 1%; } should give you still more layout flexibility.
--
Ben Henick lurker...@henick.net
Sitebuilder At-Larget:@bhenick
+1 785 856 1863
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Inline list item background image positioning problem in IE6
Given the following in IE6: 1. A link list with its items set to display: inline and text alignment centered 2. A bullet background image on each item without any position applied List items that wrap present the background image at the left margin of the text on the lower (leftmost) line, rather than putting it at the *beginning* of the list item. Oppose that with what Firefox does (the rather than behavior). Has anyone here worked around this problem, and if so, how? TIA -- Ben HenickIn the long run, men hit only what they aim Sitebuilder At-Large at. Therefore, though they should fail http://www.henick.net/ immediately, they had better aim high. [EMAIL PROTECTED] -- Henry David Thoreau __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] float an IMG inside of a DIV
On Mon, 27 Feb 2006, James Conley wrote: I am specifying float:left on the IMG along with position:relative. The image does indeed float left but yields 3-4 pixels of padding to the left of the image. Any ideas as to how I can fix? http://www.positioniseverything.net/explorer/threepxtest.html -- Ben HenickIn the long run, men hit only what they aim Sitebuilder At-Large at. Therefore, though they should fail http://www.henick.net/ immediately, they had better aim high. [EMAIL PROTECTED] -- Henry David Thoreau __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] my divs refuse to nest!
On Wed, 12 Oct 2005, Alvin A ONeal Jr wrote:
I'm trying to create a page [http://tinyurl.com/7k3xx] with a header, 3
columns nested in a container, and footer -- all using divs.
When I'm accesing the page with Firefox I can't get the 3 columns to
stay in container. I have no idea what it looks like in commercial browsers.
Regarding your assertion that the container's not being obeyed, I beg to
differ
The site in question suggests that you belong to a LUG - suck it up and
install WINE. Problem solved. Sorry to be so blunt, but if you want a
consistent cross-browser appearance for a site, that's the most effective
way to do it without setting up a rig for dual-boot into Windows and
another OS. (Substantive evidence that I'm wrong/misguided is welcome).
Konqueror, meanwhile, can be considered a reasonable analogue to Safari
(their source trees are on completely different branches, obviously, but
the KHTML and Safari teams *do* cross-pollinate their ideas). One
imagines you'll run into quirks, but I've yet to be informed that sites
that work in one break horribly in the other.
When the window is resized too small the footer goes under the colums
instead of creating a scroll effect.
1. There's no need to absolutely position the fortune. Experiment; right
now the consequences of its current positioning tempt me to indulge in
words of one syllable.
2. Given your overall four-div setup, you may also want to experiment
with floats. More on this in [a] below.
3. Put especially large bottom-margins on your three columns (greater
than the intended height of your footer), and use the bottom attribute
to absolutely position the footer with the whitespace created as a
result. Use the overflow attribute where necessary. More on this in
[b] below. On closer examination of your styles it appears that
you're most of the way there, except that you've not manipulating
margins or changing your positioning context.
I think a table would easily solve this issue, but I'm trying to go for
a true css design.
Undoubtedly it would. But you're getting there; keep working at it.
Start going through the layout examples at
http://positioniseverything.net/ - they cover a lot of very useful
territory, as does the wiki at css-discuss.incutio.com.
Notes...
a. re: floats
So you've got three columns and a footer. Thus:
#columnA {
float: left;
width: something;
}
#columnB {
float: right;
width: somethingElse;
}
#columnC {
margin-left: something+gutter;
margin-right: somethingElse+gutter;
}
#footer {
clear: both;
}
Ta-da! Provided the source order of the markup is identical to the source
order of my example rules, you've just assembled a basic three-column
layout that doesn't bleed around the marginal columns, and a proper footer
to boot. Wise money goes thence on setting up a different stylesheet for
printing, but that's not very difficult at all (and allows you to clobber,
with display: none; everything that is pointless on a print copy, such as
nav bits and advertising).
While vertical borders are not accounted for, they can be easily enough.
Creative use of descendant selectors and nesting will allow you to put the
three columns in whatever source order you want.
b. re: positioning
On every browser *except* Internet Explorer, you can use *all four*
positioning attributes to set the overall dimensions of an absolutely
positioned element's bounding box. Meanwhile, bottom is still an entirely
valid attribute that will work as intended, even in IE.
Suppose I place my body content inside of a container (for years a common
practice of mine); suppose further that I've positioned this element
(relatively or absolutely, doesn't matter).
This changes the positioning context for all children of that container
element, which allows me to absolutely position elements in relation to
the dimensions of that container.
For a direct example, visit:
http://www.henick.net/bucket/bottom-positioning.php
HTH
--
Ben HenickIn the long run, men hit only what they aim
Sitebuilder At-Large at. Therefore, though they should fail
http://www.henick.net/ immediately, they had better aim high.
[EMAIL PROTECTED] -- Henry David Thoreau
__
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/
OT Event bubbling Re: [css-d] CSS / Javascript Hierarchy
On Wed, 21 Sep 2005, jleonard wrote: Right now, when you click the text link in the box, both onClicks are triggered. Any help, advice, etc would be greatly appreciated. This is actually more of an event model question than anything to do with CSS; both the Web Developer docs at Mozilla and the MSDN Library contain extensive explanations of event bubbling (which is what's causing your problem). HTH -- Ben HenickIn the long run, men hit only what they aim Sitebuilder At-Large at. Therefore, though they should fail http://www.henick.net/ immediately, they had better aim high. [EMAIL PROTECTED] -- Henry David Thoreau __ 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/
OT Re: [css-d] How big is too big?
On Wed, 21 Sep 2005, Tim Zappe wrote: How big is too big? - What is a good rule of thumb for a CSS file size? snip Can anyone point me to some literature on these topics? Thanks. Apart from the bits about the volume of CSS (which is more about personal style and what browsers are equipped to handle, though I cannot say I've ever watched a browser crap out on a too-large stylesheet) most of your questions relate to best practices; recommend http://www.webstyleguide.com/ for discussion of how to set your guidelines (which are going to change from one site to the next, anyhow). -- Ben HenickIn the long run, men hit only what they aim Sitebuilder At-Large at. Therefore, though they should fail http://www.henick.net/ immediately, they had better aim high. [EMAIL PROTECTED] -- Henry David Thoreau __ 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] I need a miracle...
On Wed, 24 Aug 2005, Jason Meredith wrote:
I cannot use frames, and business will not allow me to change the
structure in any way (so content must scroll in the middle, and must
remain visible because it contains a news ticker tape)
.ticker {
height: something;
width: something;
margin: something; /* maybe */
overflow: scroll;
}
The overflow attribute may need some tweaking, but that should get you the
desired results.
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
An examination of the same property as described over at MSDN might also
be useful.
As for placing it on the canvas where needed, that's more a question of
your needs; could be use of floats, or absolute positioning, or relative
positioning, but you're the better judge of which approach to take. If,
for example, you're irrevocably stuck with describing the entire layout in
a table, then you'll want to use absolute positioning for the widget at
issue.
--
Ben HenickIn the long run, men hit only what they aim
Sitebuilder At-Large at. Therefore, though they should fail
http://www.henick.net/ immediately, they had better aim high.
[EMAIL PROTECTED] -- Henry David Thoreau
__
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/
[practices] Re: [css-d] unreadable source
Embellishing Joel's answer: On Tue, 17 May 2005, Linda H wrote: ... unreadably small font size. I saved the source and tried to open it in Notepad (to add line wrapping), but it just comes up as gobbledygook. Same in Homesite. I realize I have run across this other times as well. What causes it, and how do I fix it so I can read the pages? If the source was properly formatted to begin with, the linebreaks have probably been gobbled up by linebreak translation problems. Unix-flavor operating systems (including OS X) use a carriage return character (ASCII 13/0D, RE \r) to designate a linebreak; previous MacOS versions use a linefeed character (ASCII 12/0C, RE \n) likewise; Windows uses both in the order CR - LF. As a rule, viewing source and copying THAT (as opposed to saving the markup to a file and opening it in a text editor) will avoid the problem you describe on Windows. Otherwise, you should be able to find source formatting functionality in the tools you're using. Textpad, which is powerful even in the shareware version, provides preferences to sidestep this issue by default. HTH -- Ben HenickIn the long run, men hit only what they aim Sitebuilder At-Large at. Therefore, though they should fail http://www.henick.net/ immediately, they had better aim high. [EMAIL PROTECTED] -- Henry David Thoreau __ 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] newbie confusion
On Sat, 7 May 2005, Kathy wrote: Some use pixel size for text, others use em's, others use words like small. Is there a best way or does it depend? You might want to look at the specs and the wiki: http://www.w3.org/TR/CSS21/syndata.html#values http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size http://css-discuss.incutio.com/?page=FontSize Similar question for colors, some use hex codes, some use words like navy, is there a best way? The named colors are SUPPOSED to correspond to predefined RGB triplets, but I avoid using them because I'm old-skool and remember when the only colors you could count on across browsers and platforms were primaries, secondaries, and three grayscales. Again, look at the spec, and do Google lookups on 'subtractive color' and 'color theory'. Some people use linking to the stylesheet, some use importing. Then there's putting the CSS in the header. I see the advantage of using a separate stylesheet as opposed to in the header, but if you have a small site, say 5 or 10 pages, is there ever an advantage to not using a linked stylesheet? What about linking or importing? The wiki (referenced above) has a few things to say in response to your questions. In brief, a valid @import-ed stylesheet contains rules which will always be of lower precedence than equally weighted rules in an inline or linked stylesheet. Additionally, Netscape 4 ignores @import, and many old-timers continue to use it out of habit. The main reason to use inline (doc-head) styles is to improve their weighting, or if you can be certain that the rules at issue will ALWAYS be applicable SOLELY to the page on which they're used. Also, when producing a template some folks (such as myself) find it easier to implement changes if the stylesheet is in the same document with the markup, but will move that stylesheet to a linked file prior to push. I see most people are doing their best to completely avoid using tables, but then I've seen a tutorial recommending a simple table layout as a foundation, then using CSS to define everything. Is there a reason to avoid tables altogether other than I want to? ...Mainly, the fact that tables only rarely convey contextual meaning to content that itself was not produced for display within actual (data) tables. The effects that result (mostly to do with source order) can have unintended consequences that are odious for certain classes of users (especially mobile-device and functionally-impaired users). I ditched tables three years ago; I've worked on prettier source formatting since, and I find that my source markup is MUCH easier to read at those times when I need to look at it. YMMV on the last point, though. HTH -- Ben HenickIn the long run, men hit only what they aim Sitebuilder At-Large at. Therefore, though they should fail http://www.henick.net/ immediately, they had better aim high. [EMAIL PROTECTED] -- Henry David Thoreau __ 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/
