RE: [WSG] Problem with floated divs in gallery site
John Penlington Subject: [WSG] Problem with floated divs in gallery site But I just cannot find the way to get these thumbnail-caption combinations to align at the *bottom* - rather than the top where they are now. It's all explained on the test page at: http://www.bluemountainsgardener.info/fgtest/max_miller.asp I've shown the floated divs and the tables layout on the same page for comparison. Couple of industrial strength options; both of which I've used. One is purely visual - organize the pictures by height. The pictures seem to come in roughly two heights so group them that way and they will mostly take care of themselves. You may have an odd transitional line from tall to short depending oh how many pictures you have. The alternative is to pad the pictures. You've done it for width, just do it for height. It's more complicated but the same principle. You know how tall the tallest thumbnail is going to be. Pad all the pictures to that height. You can split the height and thereby center the pictures, with text at the foot of container, or pad completely on top and push them all to the "bottom". This way you can mix and match tall and short. drew
RE: [WSG] Problem with floated divs in gallery site
Nick Gleitzman] Problem with floated divs in gallery site On Thursday, June 24, 2004, at 11:01 PM, Trusz, Andrew wrote: Couple of industrial strength options; both of which I've used. One is purely visual - organize the pictures by height. . No good if the client insists their thumbnails are presented in a specific order - which mine (photographers) invariably do. The alternative is to pad the pictures. That's what I suggested, but it's a labour-intensive solution, and doesn't help me in coding a dynamic site with 5000+ thumbnails - when the thumbs displayed are a (subset and a) result of a database query. In effect, I have to code a page that will have an unknown number of thumbs, with an unknown mix of horizontal and vertical aspect ratios, in an unknown order. That's why I'm seeking an 'elegant' (ie common and minimum css) solution... = Nick, then use a css table. Nothing wrong with that. It's a reasonable and elegant solution given the circumstances. drew
RE: [WSG]headers
>On the H1 issue, there are many people that think using an H1 around the logo or hidden text. Unfortunately, that is improper. Your H1 should be visible and should >support the title of the page. >>Yes it does... but I'm also quite confused. I thought the way I set up the page would better if you can't see the pageand have to use a screenreader. Is it better to use >>the H1, H2 and H3 tags the way you described or is the way I use them also OK? (and that would be H1=group describtion, H2=page describtion and H3 as >>describtion for the paragraphs which are short news) Kim, here's what the html4 specs say about Headings: A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically. There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones. The following example shows how to use the DIV element to associate a heading with the document section that follows it. Doing so allows you to define a style for the section (color the background, set the font, etc.) with style sheets. Forest elephants In this section, we discuss the lesser known forest elephants. ...this section continues... Habitat Forest elephants do not live in trees but among them. ...this subsection continues... This structure may be decorated with style information such as: ... document title ...DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
Numbered sections and references HTML does not itself cause section numbers to be generated from headings. This facility may be offered by user agents, however. Soon, style sheet languages such as CSS will allow authors to control the generation of section numbers (handy for forward references in printed documents, as in "See section 7.2"). Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped. You'll notice this says nothing about pages. The text discusses identifying main sections and subsections relating to the main section. The example given shows headings used in a division not a page. The discussion has to do with the logical relationship of headings to sectional topics. Logical inference based on text and example leads to several "guidelines". Firstly, all headings within a section must relate to the topic of the section of which the headings are a part. The section must a logical consistency in terms of its content. If the section discusses how to nail a fascia board it shouldn't have instructions for laying roof tiles. So if you extract all headings they would fall into logical and separate, possible related, content groupings. Secondly, the only required heading is h1. You have to start with h1 and add subheads all of which have to be related to the h1 section topic. The vague discussion of "some people" not approving of skipped levels does not say that a hierarchy of headings is required. But that stricture and the section on styling do imply that headers should not be used for font effect. Style the header but style it within its structural usage, just as the example does. It might be considered de classe to use a single h1 for an entire site but it is no more so than insisting each page have its own h1. The use of headers is an author's choice requiring only that the header be used correctly. Indeed there is no requirement that any headers be used. Good writing can obviate the need for headers, although their presence certainly makes things easier for the reader. So if your h1 is a multiple page grouping with h2 identifying the separate pages, that seems proper. If your h3 is used for font sizing and appearance, that is improper. But if the h3 is used to introduce the new shorts, that seems proper. drew
RE: [WSG]headers
>>Let's discuss some issues for a moment and perhaps some light will shine upon some comments. Drew >> [qoute]The vague discussion of "some people" not approving of skipped levels does not say that a hierarchy of headings is required.[/quote] >>The vague discussion of "some people" refers to the International Standards Organization. In their specifications they specifically state that headings must follow a logical order and not skip any heading tags. http://www.cs.tcd.ie/15445/15445.HTM<< - So you are saying the specifications are incomplete? "Some people" does not equate to "headers must be in hierarchical order". Readers of the specifications cannot be reasonably expected to know there are other documents which supersede the specs unless they are so informed. Where did I miss that in the specs? Either the specs are authoritative or they are not. If they are then what they say is what needs to be followed. Other material is then by definition extraneous. One can only go by what is written not what was "really" meant. The logic of language suggests that since the term "some people" was used and not a definitive statement that hierarchy order of headings need not be respected. The paragraph is saying there is a school of thought which endorses hierarchy but that the specs do not. Otherwise the language doesn't mean what it says. And that would make the document worthless. >>First, you can have pages without headings - that I'll agree with. However, once you start approaching any attempt to comply with WCAG you need to follow the standards correctly.<< Actually what she'd have to do is apply headers according to the specs and then apply WCAG. Can't say if she'd done so since I haven't looked at the site. Nor do I know exactly what WCAG standards you are saying she has to apply. You or I might have organized the material differently but that is immaterial to applying the standards properly. As to a two word section, it is conceivable. It probably isn't going to be great literature but there is no theoretical reason it can't be done. So let's try an h1 of "fire" followed by the single word "hot". Not really useful but proper. drew * 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]headers
You're most welcome. Good luck with it. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kim Kruse Sent: Tuesday, July 06, 2004 2:05 PM To: [EMAIL PROTECTED] Subject: Re: [WSG]headers Hi Drew, Thank you for your very detailed explanation. It was actually just what I needed because I'm almost running over with reading specs from W3 and numorus other sources. (It's now saved in my "useful folder" on my backup drive) Anyway your last paragraph did it for me because that just what my intentions was... so I'm happy :o) THANK YOU Kim > > > > > > > Kim, here's what the html4 specs say about Headings: > > > > A heading element briefly describes the topic of the section it > introduces. Heading information may be used by user agents, for > example, to construct a table of contents for a document automatically. > > > > There are six levels of headings in HTML with H1 as the most important > and H6 as the least. Visual browsers usually render more important > headings in larger fonts than less important ones. > > > > The following example shows how to use the DIV element to associate a > heading with the document section that follows it. Doing so allows you > to define a style for the section (color the background, set the font, > etc.) with style sheets. > > > > > > Forest elephants > > In this section, we discuss the lesser known forest elephants. > > ...this section continues... > > > > Habitat > > Forest elephants do not live in trees but among them. > > ...this subsection continues... > > > > > > > > This structure may be decorated with style information such as: > > > > > > ... document title ... > > > > DIV.section { text-align: justify; font-size: 12pt} > > DIV.subsection { text-indent: 2em } > > H1 { font-style: italic; color: green } > > H2 { color: green } > > > > > > > > Numbered sections and references > > HTML does not itself cause section numbers to be generated from > headings. This facility may be offered by user agents, however. Soon, > style sheet languages such as CSS will allow authors to control the > generation of section numbers (handy for forward references in printed > documents, as in "See section 7.2"). > > > > Some people consider skipping heading levels to be bad practice. They > accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading > level H2 is skipped. > > > > > > You'll notice this says nothing about pages. The text discusses > identifying main sections and subsections relating to the main > section. The example given shows headings used in a division not a > page. The discussion has to do with the logical relationship of > headings to sectional topics. > > > > Logical inference based on text and example leads to several > "guidelines". Firstly, all headings within a section must relate to > the topic of the section of which the headings are a part. The section > must a logical consistency in terms of its content. If the section > discusses how to nail a fascia board it shouldn't have instructions > for laying roof tiles. So if you extract all headings they would fall > into logical and separate, possible related, content groupings. > > > > Secondly, the only required heading is h1. You have to start with h1 > and add subheads all of which have to be related to the h1 section > topic. The vague discussion of "some people" not approving of skipped > levels does not say that a hierarchy of headings is required. But that > stricture and the section on styling do imply that headers should not > be used for font effect. Style the header but style it within its > structural usage, just as the example does. > > > > It might be considered de classe to use a single h1 for an entire site > but it is no more so than insisting each page have its own h1. The use > of headers is an author's choice requiring only that the header be > used correctly. Indeed there is no requirement that any headers be > used. Good writing can obviate the need for headers, although their > presence certainly makes things easier for the reader. So if your h1 > is a multiple page grouping with h2 identifying the separate pages, > that seems proper. If your h3 is used for font sizing and appearance, > that is improper. But if the h3 is used to introduce the new shorts, > that seems proper. > > > > drew > -- Med venlig hilsen Mouseriders.dk Kim K Jonsson Denne e-mail kan indeholde materiale der kun er beregnet for adressaten. Indeholdet må ikke udleveres eller kopieres til noget medie. Har du ved en fejltagelse modtaget denne e-mail, beder vi dig meddele os det og destruere e-mailen. This e-mail may contain material only meant for the recipient. The content may not be transferred og copied to any other media. Have you received this e-mail by mistake we kindly ask you to in
RE: [WSG]headers
Lee wrote: There are more than W3C standards. While the W3C standards are great, they leave too much to interpretation. Hence the problem that arises here. Please explain why you might think a couple of sentences qualifies to be under it's own sectional heading. I'd really be interested in learning the thought process there. Two sentences do not qualify for a sectional heading in a book; why would they in a web page?[/quote] Lee, please forgive my bundling a few responses and loading them all into a reply to your response. I couldn't agree more. The standards leave a great deal of room for interpretation as we see here. And I believe we agree substantially on the interpretations as well. But there are differences which I believe show the breadth of the standards. We come at this, I believe, from different perspectives. You are in effect an insider. Your work on the WCAG standards (and thank you for doing it) gives you a perspective I don't have. I'm just trying to figure out what the html 4.01, xhtml 1.0, and css 2.1 standards mean based on what I see in the documents (with a valuable assist from an older WestCiv document on css). So when I see "some people" it means just that and when the specs are vague I take it to mean there is latitude in their application. I don't have insider knowledge so I have to go with what the document says. Hence while to me, hierarchical ordering makes sense, I can see no reason to say it must be followed, other than starting with h1, in order to be technically correct. Put another way, if the standards body means go sequentially from 1 to 6 then they say it. And if they mean a separate h1 for each page they had better say that too because that isn't what is written in the spec documents. So if you all meant something else, clarify in the document or live with what you did say. Hence I think Mike Foskett has his headers technically correct. To him the site is the main point of it all and is an h1 on every page because (and here I admit to putting words in his mouth) each page is a section of the site. He follows that with a page level h1, again something that is the focus of that page. And further with a navigation heading and subheadings. All seem technically to meet the standard set by the w3c. Could you do it hierarchically? Yes. Make the page content h1, navigation having it's own h2 and h3 etc substructure, use h2 and more in the content as appropriate. So Mike Pepper is technically correct as well. Personally I don't like the one h1 per page technique but I do like the idea of actually getting to use an h6 (with font size styled much larger) legitimately. And both ways would make sense if you extracted the headings. Mike Foskett's table of contents would have a lot of references to the site name. But then if you open many books you'll see the book title and either the author's name or the chapter at the top of each page. Mike Pepper's version would be tidier lacking all the site references. But it might also been seen as less cohesive since there would be no obvious connection between content sections. But then book comparisons while useful are not exact when it comes to web sites. What we have then is variety. Which of course is the sine qua non of the web. TIMTOWTDI within standards. And for the intellectual fun of it, try this: h1 Fire? P Hot? Interrogative and exclamatory sentences. Each one word in length. drew * 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]headers
Drew, I endorse the single h1 per page particularly because each page is judged on its own when sought for relevancy in the search engines. That's from where the majority of fresh users hit a site, based on search criteria. Though others may argue that we shouldn't construct with a view to SEO, I might suggest they're the retrieval mechanisms of the Web therefore they must be given due consideration when discussing page constructs. Headings are enormously important (as you are aware) not simply for structure but archival and retrieval purposes. Mike Pepper *** Certainly one way to do it with a solid rationale for why. drew * 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]headers
Drew, Mike, So, if I get this right then technically speaking: Page name - Site name Site name [not visible & 2nd part of the - Placed behind an image of the same] Content (Page name) heading [visible & 1st part of the ] [repeat as required keeping all sub headings in the correct order] Navigation [not visible, is of no use to no-vision, but okay for lo-vision, users] [list of links] External links[not visible] link heading [this heading has to be a h2 because you cannot guarantee a h2 in the content] [text & link] link heading [text & link] Footer links[not visible] [list of links] Note: [not visible] means you cannot see it but neither "visibility:hidden" nor "display:none" are used. * Looks fine to me but I liked the other one as well. drew * 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]headers
Nothing wrong with a length where appropriate but double length is probably trying everyone's patience so I'll be slightly rude and top post while trying virtuously to be brief. It's an interesting argument you make that css was given to us to make pages look and perform as we want them to. This is perhaps where I go wrong. I thought css was an integral part of an attempt to create a web in which both machine and human are capable of responding to the nuances of language, Berners-Lee, Hendler and Lassila's semantic web. In this endeavor, the specs for html and xhtml define the structure of pages. Meanings are set for element like headers, lists, paragraphs, divisions, etc which instruct browsers and standards aware search engines on how that element is to be interpreted. In our example, what the levels of headers indicate about the relative importance of some content in relationship to a larger whole (the section and perhaps the site but not necessarily). As outlined in the standards these structural rules provide a sophisticated level of nuance for machine interpretation. CSS works in two dimensions. First with positioning it implements the structural elements of the specs. So using h1 solely to influence seo is simply wrong and should actually result in poor ranking since the content would be disjointed and confused, assuming a standards aware search engine. Secondly, css provides the human oriented nuances, the semantics. Font style, sizes, colors, gewgaws and whirligigs of all types are focused on human senses not machine code. WCAG provides alternatives for those for whom other semantic meanings are necessary. It seems to me that if w3c is the touchstone then other standards are either incorporated in its standards or they should be regarded as suggested codes of behavior not as mandatory. So ISO may give us a version of best practices but it isn't obligatory. What should be obligatory is that browsers which don't follow standards display pages with the dreaded "unanticipated results". Not because the browser is built to do that but because pages are properly written and won't display as intended in a browser that doesn't follow the rules. End users would quickly tire of a browser that produced gibberish, in a more perfect world. The ability of authors alone to bring about such a state of affairs is somewhat problematic as I think we'd all agree. If this isn't how it is intended to work, then we're wasting our time discussing "semantics" (which we are defining wrong, but that's a different discussion). It's every standard for itself and the devil take the hindmost. We know where that leads. Search engines are more of the same. Should search engines dictate standards or should standards dictate search engines? That's a long term educational process which may well be settled by what kind of user agents emerge either as part of browsers or as complimentary technologies. But in any case, standards should never be compromised for seo. (Is this the place for the conspiratorial wink and nod?). Since I've failed at brevity let me mention your book publishing example in closing. You claim it is rare to have chapter or book names on each page yet you cite an example in which 3 of the 4 books you pick up have just that. My survey confirms exactly what is used is publisher dependent but they all tend to use something. So by that analogy using site name as h1 on every page is acceptable but is not obligatory. drew -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lee Roberts Sent: Wednesday, July 07, 2004 2:26 PM To: [EMAIL PROTECTED] Subject: RE: [WSG]headers Dang, we certainly don't want to go to sleep these days. I wake up and am caught in a mire. Instead of writing several emails, I'm going to try and cover everyone's issues here. I hope I don't miss anything or get people confused. Drew, thank you for the kind words. I will agree the commentary about "some people" should have remained out of the standards. You will notice a major difference with the forth coming standards. There should not be any more garbage editorials except in the internal notes. Internal notes as you are probably aware are open to the public as well. Many people will use headings as a means to help elevate their pages in the search engines. Technically there is no problems with that. The only time problems will arise is when they say they are using headings to classify sections of their page when, in fact, is it more obvious that the heading is used as a font declaration. Using the book analogy is the easiest way to explain how headings should be used. Sure there are books that include the book or chapter title on some or all of the pages within a chapter. However, that is extremely rare. It does appear to be a publishers choice - not an author's choice. With four books in my immediate reach, three have the book title on the left page and the chapter title on the
RE: [WSG]headers
That's about as brief as my answers. [quote] The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries.[/quote] Here's the full quote Lee: The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries. It is a collaborative effort led by W3C with participation from a large number of researchers and industrial partners. It is based on the Resource Description Framework (RDF), which integrates a variety of applications using XML for syntax and URIs for naming. "The Semantic Web is an extension of the current web in which information is given well-defined meaning, better enabling computers and people to work in cooperation." -- Tim Berners-Lee, James Hendler, Ora Lassila, The Semantic Web, Scientific American, May 2001 I'm afraid that has nothing to do with human interaction. It is simply the sharing of information between programs and businesses. Here's the full quote Lee: The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries. It is a collaborative effort led by W3C with participation from a large number of researchers and industrial partners. It is based on the Resource Description Framework (RDF), which integrates a variety of applications using XML for syntax and URIs for naming. "The Semantic Web is an extension of the current web in which information is given well-defined meaning, better enabling computers and people to work in cooperation." -- Tim Berners-Lee, James Hendler, Ora Lassila, The Semantic Web, Scientific American, May 2001 Now to me that says it has a lot to do with people, as do the examples offered in the original article. In fact the article says the point of the exercise it to make cooperation easier and more meaningful between machines and people and thereby between people. RDF has a universal definition of data with the understanding that it is the humans who give the data final meaning. RDF makes it possible for machines to exchange data within a structured framework (ontology) that encompasses human meanings. Those meanings are both universal in ontologies and personal in the value chains used to instruct personal software agents. It's not about business, it's about life of which business is only a part. Lee wrote: [quote]Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.[/quote] Seems pretty straight forward to me. And so it is. Point taken that saying css-p implements html or xhtml was improper since both are implementions. Css adds the gewgaws. Lee wrote: If we examine the two statements as a computer would, we find a difference. Your statement clearly indicates that the book and chapter titles are on EACH page, meaning both elements. My statement clearly says the book title is on the left page and the chapter title is on the right page; both are not on each page. With boolean algebra your statement requires both to be true; mine requires only one to be true. == Failure as an editor. If I wrote "both" on each page, I intended to write "either" on each page. So we are in agreement on this phenomena but not on how it applies to headers. Oh well. drew * 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]headers
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lee Roberts Sent: Thursday, July 08, 2004 12:10 PM To: [EMAIL PROTECTED] Subject: RE: [WSG]headers Let's look at the Introduction to the Semantic Web. [quote] Facilities to put machine-understandable data on the Web are becoming a high priority for many communities. The Web can reach its full potential only if it becomes a place where data can be shared and processed by automated tools as well as by people. For the Web to scale, tomorrow's programs must be able to share and process data even when these programs have been designed totally independently. The Semantic Web is a vision: the idea of having data on the web defined and linked in a way that it can be used by machines not just for display purposes, but for automation, integration and reuse of data across various applications.[/quote] Now, let us examine the last sentence of that quote. [quote]The Semantic Web is a vision: the idea of having data on the web defined and linked in a way that it can be used by machines not just for display purposes, but for automation, integration and reuse of data across various applications.[/quote] === How about we look at the second sentence of the first paragraph "The Web can reach its full potential only if it becomes a place where data can be shared and processed by automated tools as well as by people." You insist on making this about machines when even the w3c which is primarily concerned with how to make the machine end of it works keeps inserting people. Yes the machines and applications will process data, writ large, but it will be done as a result of the value-chains and proofs requested by the humans. More Lee: Prior to RDF, XML and the like it was virtually impossible to share information across platforms and applications. Well, it was not exactly impossible; it was more a security risk. So, now we have the Semantic web that allows a shopping cart owner to send an XML feed to Froogle. Or, we have RSS which allows us to share news feeds between news sources. Even weblogs allow RSS feeds to occur now. All that joined together allows computers to use the same information for various applications. Even business data can be shared without the concern that the database would be hacked and confidential information released. = We'll have a semantic web which allows the shopping cart user to check the bona fides of the merchant and to check the reliability of the product using rdf and xml perhaps rendered in xml, html, or xhtml. And we can check other "proofs" from self selected "trusted sources" to evaluate the content of the RSS news feed. It isn't about just shuffling data it's about evaluating the data, giving it human related meaning. It is about humans using an effective, efficient tool which employs common taxonomies and inference rules to make an effective ontology. Data has no meaning with interpretation. Make a pile of data. It does nothing. It says nothing. It's inert until it's interpreted. The semantic web both gets the data based on shared rules and then possibly applies additional human chosen interpretive filters. It is, to use an overworked and usually misapplied word, a synergistic process. But then many things involving people have unanticipated results. drew * 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]headers
Lee Wrote: The Semantic web has changed that. Any computer connected to the WWW can share information with another computer through Resource Description Framework which uses XML to share information. So, no longer to we have to keep our information to ourselves. We can share that information by dynamically creating an XML file from a database and granting access to that file using the Universal Resource Identifier. === Lee, for you this is clearly what the semantic web is -- a purely technical matter of data exchange. For me it goes beyond the technical, about which we are in agreement, to include the motivating human and social dimensions found in the original article. Which I think gets the horse to the point where it has been beaten enough. Mike Pepper has it nailed: the W3C has done an outstanding job in bringing some coherence to a nearly impossible task. We owe a great deal to Lee and others here who have put in the time. drew * 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] how do I add a navigation type menu in CSS
-Original Message- From: neen Sent: Tuesday, July 20, 2004 7:50 AM To: [EMAIL PROTECTED] Subject: [WSG] how do I add a navigation type menu in CSS Hi, I've been trying to do a left hand navigation menu in CSS and have been having trouble getting the main content area to align next to the menu instead of below the menu. Can anyone share some tips or tutorials that can help me complete this task. thanks neen * If you are trying for a 2 column effect, float the navigation and the main content left (you can do it right but then be sure to reverse the order). If you want the main content to flow around the navigation, float the navigation left or right inside and at the beginning of the containing element of the main content. Tutorials at: http://www.positioniseverything.net/articles/float-theory.html drew * 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] list item markers disappear behind floated image
Title: list item markers disappear behind floated image Try giving the ul list-style-position:inside. No need for additional p or div. drew From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Peter Ottery Sent: Tuesday, August 17, 2004 2:52 AM To: Web Standards Group (E-mail) Subject: [WSG] list item markers disappear behind floated image Hi, I have a problem with images that are floated left and then when a list wraps around that image the list bullet points themselves dont get pushed out by the floated image and instead remain behind (or on top of) the image. to help explain i've put a simple demo page together to show the problem in its most basic form & explain in a bit more detail: http://c41.com.au/test/ul_test.html the css is all inline & very basic. the img tag has an empty src on purpose. this is just an *example* of the prob. dont fear, the execution looks better than the example :) basically what I'm looking for is if there is a way to make the list item markers always "obey" the floated image, but just behave as normal when the image doesnt appear. any help greatly appreciated. hope i've explained this well enough... pete ps: apologies if my emails arrive in your inbox as html or rich text. I send them as plain text and i think the mail server here forces them to be plain/rtf on the way out. please dont reply to this list about this problem.
RE: [WSG] PHP is stopping my page validating as xhtml 1.0 Strict
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Natalie Buxton Sent: Wednesday, August 25, 2004 6:07 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] PHP is stopping my page validating as xhtml 1.0 Strict The exact error is: Line 76, column 146: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag ...="feed55d0090f3055f4e5c6f7553ff5eb" /> And this is line 76 and your Form: 76: 77: Username 78: 79: Password 80: 81: 82: But, I cannot work out why you are getting that result. Hopefully this bit of information Ive added for you will help. == It wants after and before . drew ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] CSS block display model horizontal arrangement in conta iner block
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Carlyle Sutphen Sent: Friday, August 27, 2004 11:35 AM To: [EMAIL PROTECTED] Subject: [WSG] CSS block display model horizontal arrangement in container block Hello. I haven't gotten the hang of getting the CSS block model to work for me. I think the problem is that I haven't yet come to understand when a block is contained by another block and how to get blocks to allign horizontally in a container block. The closest I have come is by using float: left which works fine in IE but not in Mozilla. == A bit difficult to offer suggestions without the code to examine. Many float problems have to do with width issues and/or improper clearing. So here's a simple scheme which works: css: .left{float:left; width:20%;} .central{float:left; width:54%;} .right{float:left; width:22%;} .next{clear:both;} html: top bottom If you need to have the columns the same length, or for other tutorials on floats and 3 column layouts, check out: http://www.positioniseverything.net/ drew ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Interview markup?
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lea de Groot Sent: Sunday, September 05, 2004 2:12 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Interview markup? On Sun, 05 Sep 2004 14:53:46 +1000, Michael Nelson wrote: > I mean, a definition list is really for definitions No, I don't agree. The W3C docs site two example uses: - a standard term and definition usage, and - marking up dialogues. see http://www.w3.org/TR/html4/struct/lists.html#h-10.3 Clearly, the second of these is *not* a definition, and is somewhat close to an interview. I think its perfect for an interview type layout Lea ** A dialogue is not a Q&A session. Dialogues involve an interactive, protracted process in which the speakers react to and interact with each other. This is the case whether it is a conversation between people or a contrived situation as in a script or book. In either case the dt would, as the specs say, name the speaker, and the dd would contain her words. The next dt would be the next speaker and the accompanying dd his words. The structure is speaker | speaker's words. The speaker and the speakers words are structurally linked together. This is not the model of a Q&A. A Q&A is more like a press conference. The questions are not necessarily related. One question could deal with the color of socks and the next with the national debt. In a dialogue identifying who is speaking is important -- it provides a means for following an individuals line of reasoning throughout what can be a protracted interchange. Whereas in a Q&A the identity of the questioner is unimportant, it is the answer which matters. Yet there is some sense and structure to a Q&A. The person being interviewed has information which the interviewer(s) is(are) trying to elicit. There is an overall point even if the exchange itself is meandering and disjointed. There is only one linguistic element which has the flexibility to accommodate such a rambling exchange and that is the paragraph. A paragraph is both complete in and of itself and when grouped with other paragraphs in some sectioning scheme, requires at least a tenuous connection between paragraphs. That's what a Q&A is: a grouped series of responses focused on the of responses of the interviewee regardless of many interviewers participate or how disjointed the questions. It's the voice of the interviewee that matters making a dialogue format inappropriate. Only paragraphing can create a cohesive whole from potentially disjointed parts. drew ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] commonly used order of styles within a css class
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Sean Sent: Thursday, September 02, 2004 11:19 PM To: [EMAIL PROTECTED] Subject: [WSG] commonly used order of styles within a css class Does anyone know if there is a common way of listing styles in CSS? I don't mean the order of a:hover a: visited, or the order of specification. I am thinking more of some logical order that would be helpful to anyone else working on stylesheets I have created. ** The primary factor in ordering styles is the cascade. Do whatever else you want, but respect the cascade or your style sheet will produce "unanticipated results". drew ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Interview markup?
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of russ - maxdesign Sent: Tuesday, September 07, 2004 9:36 AM To: Web Standards Group Subject: Re: [WSG] Interview markup? Drew, I disagree with your argument (below) for three reasons. 1. Dialogs and Q&A's have the same fundamental need. The speaker and speakers text, or questions and answers should ideally be tied together - as they have a direct relationship with each other (name/value sets). The questions do not need to be related at all. For example Interview: Question 1 - socks Answer to question 1 Question 2 - national dept Answer to question 2 2. The definition list allows for as much rambling as is needed. You can use block level elements in the definition description, such as the and elements. This means you can have something like the following: Interview: Question Answer - paragraph 1 Answer - paragraph 2 Answer - paragraph 3 All these paragraphs, which can ramble as needed, are still completely tied to the question, via the DT and DD elements. 3. To take this one step further - using your example of one question and multiple answers (different people answering the same question), the definition list is still the best method for linking questions and answers. For example: Interview: Question Person 1 answer Person 2 answer Or given an even more complex option: Question Person 1 - paragraph 1 Person 1 - paragraph 2 Person 1 - paragraph 3 Person 2 - paragraph 1 Person 2 - paragraph 2 Person 2 - paragraph 3 Given the example directly above, how would you differentiate person 1 from person 2 but still tie them both to the same question using paragraphs? This linking is much harder to achieve using paragraphs, but simple, and semantically correct using a definition list. As always, just personal opinion. Russ * I'll stand corrected. It could be done as a dialogue but it would have to be done in accordance with the definition of a dialogue. A dialogue consists of a dt | dd pair with "each DT naming a speaker, and each DD containing his or her words". So to work as a dialogue the Q&A, combining your first two examples, would have to have this structure: mr. johnson what color are you socks> ms oneil I'm not wearing any socks mrs. mcgee how can we pay off the national debt ms oneil with rational fiscal policies and a nice creative accounting wouldn't hurt Your third example would consist of: mr. johnson what color are you socks> ms oneil I'm not wearing any socks major tom ah yeah socks mr smith socks are a very over done topic we need to consider other footwear beyond the simple sock The examples you gave wouldn't work as a dialogue by definition. Nor could the examples be regarded as a standard definition list since a question(s) and answer(s) are not "a term and a description". You'd be better off with a heading and paragraph combination. Questions: what color are your socks? Ms Oneil: I'm not wearing any socks Maj Tom: ah yeah socks Mr. Smith: socks are a very over done topic we need to consider other footwear beyond the simple sock how can we pay off the national debt? Ms Oneil: with rational fiscal policies and a nice creative accounting wouldn't hurt Of course Justin's point may trump everything. drew ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Box floating, footer placement, completion of column
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Monday, September 27, 2004 5:17 PM To: [EMAIL PROTECTED] Subject: [WSG] Box floating, footer placement, completion of column Hi, I normally just lurk and listen in on everyone here and enjoy it a great deal. I have a small site design that is causing me problems, and I can't seem to find the problem. http://64.219.167.253/test/testpage.php Three issues going on here: 1) The page footer is floating in the middle of the page, not at the bottom 2) The left navigation bar (black background) stops short, does not continue length of page as i want. 3) The line "Here is content after the boxes" -- what I *want* is to have two floating boxes, side by side, each with its list in it, and the "here is content after the boxes" should fall AFTER those two boxes. Any insight would be greatly appreciated. Kathy Lessa ** Kathy, start by adding a doctype so the browser knows what set of rules to use for interpreting your tags. And add a character set meta tag. Take the guess work out of it for the browser. It will help you and the end user. For ease of use, you might consider html4 strict as your doctype. Second, get into the habit of writing tags in lower case. While not required with some doctypes, lower case is required in xhtml strict which is the doctype towards which page composition is moving. Third you need to study a bit about floats. You are clearing improperly. That's why you have the positioning issues. You need to not clear the first float and do the clear:both after the second float. For a quick tutorial see: http://www.positioniseverything.net/articles/float-theory.html Fourth, your footer should be a list. For that see: http://www.alistapart.com/articles/taminglists/ Fifth, validate your code, both css and html. drew ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Images without float
Sent: Thursday, September 30, 2004 11:55 AM To: [EMAIL PROTECTED] Subject: [WSG] Images without float How can one have an image on the left with a caption below the image, and text on the right. I don't want to text to float around the image and I don't want to use a table. Thanks, Nancy Johnson - You have to float something. If you don't want to float the text, then float the image in a div with the caption under it. Add padding, margin, or border to taste. Start the text after the float and you are good to go. drew
RE: [WSG] Why wont this validate
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kim Kruse Sent: Monday, October 04, 2004 11:54 AM To: [EMAIL PROTECTED] Subject: [WSG] Why wont this validate Hi, I'm doing server side validating on a form and I get some errors I'm not able to decrypt. So if someone have the time to take a look here http://validator.w3.org/check?verbose=1&uri=http%3A//www.mouseriders.dk/kont akt.php%3Fsubmitted%3D1%26afsnavn%3D%26afsemail%3D%26afstelefon%3D%26afskomm entar%3D and please tell me what the errors means. I don t understand why a hidden field should be wrapped in tags for instance? Please be patient... I'm learning :o) Kim This almost certainly isn't the actual error. This is just the point at which the validator was unable to manage any longer. It would help to have the code and the css. drew ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Recall: [WSG] Why wont this validate
Trusz, Andrew would like to recall the message, "[WSG] Why wont this validate". ** 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] Semantically creating 'pipes' for footer links
From: i] On Behalf Of Richard Czeiger Subject: [WSG] Semantically creating 'pipes' for footer links Hi guys, I'm putting together a semantically correct UL of links for my footer. I'd like to have them separated by 'pipes' as this is a common and easily recognised technique. But the pipes themselves are irrelevant (semantically). So here's what I've come up with... Why not save yourself all the trouble and just use the ascii vertical bar "|" for the pipe? drew
RE: [WSG] Left and right: inline content...
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Joshua Street Sent: Tuesday, October 05, 2004 3:06 AM To: Web Standards Group mailing list Subject: Re: [WSG] Left and right: inline content... Thanks Hugh, Joseph. I'd tried wrapping the ABN in a , but that wasn't working too well -- putting it in a paragraph worked miracles, though. I managed to get away without assigning widths to either the or the elements, so that was good. Yet to throw it at Internet Explorer, but we'll see... Joshua Street base10solutions * If it floats, it has to have a width. What you need is a double float left with the rightmost float text aligned right. Try this (using your code): #footer {clear:both;text-align:left;} #standardsline {float:left;display:inline; text-align:right; width:70%;} #standardsline li {display:inline;list-style-type:none;} p{float:left; width:25%} ABN 72797798055 http://validator.w3c.org/check/referer";>XHTML http://jigsaw.w3.org/css-validator/check/referer";>CSS Accessibility Top ** 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] Is sending abusive spam doing standards good or harm?
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mark Stanton Sent: Tuesday, January 04, 2005 9:20 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Is sending abusive spam doing standards good or harm? Hi All The WSG "Core" group are with you guys 100% here. No foul language, abuse, negativity or other offensive behaviour will be tolerated on the list. We do our best to keep an eye on things and deal with in appropriate behaviour by contacting those concerned directly. If you have any specific concerns please forward them to info@webboy.net or [EMAIL PROTECTED] Just one other thing I like to point out - the page in question has been online for a lot longer than the WSG list and, to the best of my knowledge, it was not written by a list member. However posting the link to the list was probably not the best idea. -- Mark Stanton Gruden Pty Ltd http://www.gruden.com ** If you look at night owl's home page, you'll find that this is intended as a "vent my spleen" page. If you take it in that spirit (and who amongst us hasn't caste this particular stone?), it remains a precise, accurate dissection of the problems with page design and construction. And, as she says she's never identified any particular page as moronic. Rather, she's describing an obtuse mind set which fails to understand the potential of the web. Personally, I hope she finds time to write the Windows rant. drew ** 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] PC IE problem
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Graham Sent: Thursday, January 06, 2005 7:12 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] PC IE problem >From a very brief look I guess it may be a margin problem because of the wide image. You may have to include this hack to adjust margins for different browsers. .item { margin-left: 10%; } html>body .item {margin-left: 20%; } /*** IE doubles the margin on the float. This sets the margin to the correct width for others ***/ Graham The banner isn't floated. It is in a table -- tsk, tsk. And the cell for the catalogue gif contains an id called "introduction". Your css contain a class "intro" but I don't see an "introduction". Does that matter? Depends on what you thought "introduction" was supposed to do. Code validates. drew ** 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] Two CSS Question
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lea de Groot Sent: Sunday, January 16, 2005 5:24 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Two CSS Question On Mon, 17 Jan 2005 08:00:30 +1000, Lea de Groot wrote: > Well, GMail works on the various browsers (ok, I havent tested *all* > of them), so I can report it works there too :) I'm sorry - I'll try that again. "Well, GMail works on the various browsers available under OSX (ok, I havent tested *all* of them), so I can report it works there too :)" If you want a list of the "best viewed with", officially approved gmail browsers, just try viewing with Konquerer. drew ** 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] stretch them columns
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ted Drake Sent: Tuesday, January 18, 2005 10:56 AM To: wsg@webstandardsgroup.org Subject: [WSG] stretch them columns Hi All I know this has been covered, but I can't remember where to look. I just put together a quick, and I do mean quick, sample site, http://www.tdrake.net/greens to test a design concept. I want the two content bars to stick to the outside edges and the empty space between to expand and contract with the page size. It's a pretty simple concept. Think of it as two pieces of paper on a desk and you can move them back and forth, but you still see the desk behind them. So, here's my question. I need the columns to stretch to the bottom of the screen so that they are always equal length. I've used faux columns before, but this is a fluid layout. What is the method for making columns extend to the bottom of the screen? Thank you for your help. I know I could have googled this to my hearts content, but I also figured other people might be interested in the answer. Ted www.tdrake.net ** You might try a variant on the 3 column stretch: http://www.positioniseverything.net/thr.col.stretch.htmlc drew ** 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] Brazilian Portal site Review. Opinions Welcomes
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Genau Junior Sent: Wednesday, January 19, 2005 4:17 PM To: wsg@webstandardsgroup.org Subject: [WSG] Brazilian Portal site Review. Opinions Welcomes Hi. We are releasing next saturday, the new interface based in webstandards to biggest car seller website of brazil south region and the second of country. I would appreciate all comments and suggestions about interface, design and usability standards. The temporary address is: http://meucarronovo.locaweb.com.br ** You've got two closing body tags. Any fixed width page will fracture quickly when font sizes are increased. Its math. If you are stuck with a fixed page width and fixed fonts as design parameters, not much you can do about it. A liquid design would allow more flexibility but would also eventually break. Frankly it looks a whole lot better than the clutter you typically find on an auto dealership page in the usa. drew ** 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] IE mystery whitespace
James wrote: Miles, Replace your existing #content selector with the following: #content { margin-left: 0; float : left; padding: 0; border: 1px dashed #090; } Slightly different way of achieving the result you're after. If it floats it needs a width. So add your width back to the declaration. drew * 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] positioning 101
-Original Message- Barbara wrote: www.pcc.com/benchmark/ The challenge (s): 1) keep the page as 'liquid' as possible 2) make the #navcontainer and #rh-col line up at the top edges, regardless of how deep the #hdr div gets when someone decides to increase font-size. 3) maintain a minimum width on the #rh-col so images that appear in some of the other pages using the same layout don't get messed up. (I think the min-width should be about 450px) I'm getting the feeling that there's something very basic about absolute vs relative positioning that I am just missing. Thanks in advance for all advice. Barb -- Min-width is not a property that IE recognizes so the vast majority of your users will not have a browser that responds to this attribute. If you want columns, make columns. For now that is best done with floats. Use percentages for the width of the floats. The page will flow as the viewport is shrunk. When it hits the width of the pics or any element it cannot breakdown you'll get scroll. You can leave the min-width attribute and it will cause scroll in browsers that recognize it. Either way, the page will look peculiar but it is likely to still be readable. Try this kind of css: .nav{width:24%; float:left;} .main{width:75%;float:left;} //keep your other attributes including min-width. Keep the floats in your body container. Keep the total width of the combined just below 100% since width calculations get problematic. Be sure to give both containers a percentage width (as above). Remember to adjust widths to accommodate margins and padding and borders (they all add to the content width). Keep both floats in the body container. You'll need to clear the floats before you close the body container. If you don't the body container will contain nothing and you won't see your background. Leave the clear out once when you test and watch the background disappear. If you get problems with the floats in IE feel free to liberally sprinkle clears. It may be unattractive but it's easier to cope with IE's mess that way. Purist will nitpick over containeritis but it will validate and more importantly it clears up problems without hacks which may later cause even more problems. And besides nitpickers do need nits to pick. Keeps them happy. The double floats will also keep your columns even at the top. Why not float the main right? Sometimes IE does strange things with the placement of the top of the right floated container. Try one left and one right to see what happens in IE. It might work. If it does your background will show between the containers. At some point, IE, Mozilla, Firebird and Opera will look reasonably the same. At that point you can worry about hacks for Safari and Netscape -- browsers which have miniscule user bases or are in fact developmentally dead and have decreasing user bases. Or you can decide enough is enough and not worry about them. You are very close to what you want. A few tweaks will get it. Sources: http://www.positioniseverything.net/ http://css-discuss.incutio.com/ drew * 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] Some links for light reading...
Bert wrote: Very interesting I do find it ironic that a page talking about Microsoft's lack of standards support does not validate. Close, but no cigar. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites ___ Something of a nit don't you think? One error consisting of a book title used as an id attribute wherein the title is not underscored resulting in an error that an id needs to be a single token. But if you like to nitpick, try this one. For a good example of the difference between validation and rendering, have a look at you own site in Opera 7.11 on Win2k server. You're squirting out of container at the bottom. drew * 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] Some links for light reading...
<> Compared to IE -- no. Compared to anything else -- yes. <> I believe your Opera problem results from the use of the height attribute. Your "Main" div, set to overflow, actually runs passed the 100% height of the viewport and in Opera7.11 that means the left and right floats end, so the content flows the full width of the viewport. Changing your design to an equal length 3 column design would solve the problem. For an example see: http://www.positioniseverything.net/thr.col.stretch.html Also you have the ironic situation of having xhtml1.1 which requires an xml prolog but since your page is served as text/html the prolog cause IE to pop into quirks modes rather niftily undermining the strictness of xhtml1.1. drew * 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] my second simple css question
-Original Message- From: [EMAIL PROTECTED] On Behalf Of Paul Ingraham http://www.vancouvermassage.ca/screenshot2.jpg How the devil can I push the top edge downwards AND have the document content flow above as well as beside it...? It's so easy with an img! Paul *** Start the sidebar inside the left text: Opening left side text. Interior text. Returning to the exterior text drew * 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] Help with making DIVs behave
Subject: Re: [WSG] Help with making DIVs behave Hi Rosie, The div's not misbehaving, it's the floated image ... but that's how floats are meant to work. Clearing the float by adding dl { clear:both; } to your stylesheet will give you what you want. Cheers, Mike On Tuesday, June 8, 2004, at 11:46 PM, Rosie Norwood wrote: > The page troubling me is: http://www.blackwork.com/test/sample.html > The CSS is at: http://www.blackwork.com/test/stitches.css - the rules > relating to the div class site is right at the bottom. > > I want the image to fill the div so that the div completely contains it > and the bottom border appears after the image. That will clear the lower image but you'll need to do the same for the Archbishop Wood dl as well otherwise "Techniques" is next to the image and the techniques themselves are below the image at1024 resolution, awkward looking. If you want the Techniques next to the images you need to rework the design with multiple floats. In either case, a look at float theory would be helpful: http://www.positioniseverything.net/articles/flow-pos.html drew * 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] Floats changing when mouseover How to fix?
where now.. On my page at http://bluegrass.org.au/Magazine/newreleases/index.cfm. Using IE6, when you put the mouse over the link "more ." the float containing the image reduces in size to match the 'more' link. Then when you mouseover the image, which is also a link, you see the whole image again. (the CSS is at http://bluegrass.org.au/styles/Bluegrass_Australia.css ) Can anyone tell me what to do about it please? Or point me to the article about this that I can't find now? Cheers Mike Kear Peekaboo: http://www.positioniseverything.net/explorer/peekaboo.html drew * 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] Right aligned lists...
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of russ - maxdesign Sent: Tuesday, January 25, 2005 5:41 PM To: Web Standards Group Subject: Re: [WSG] Right aligned lists... One method is here http://css.maxdesign.com.au/listutorial/08.htm Should have looked a little longer. The code for a bullet is • And a better source is: http://www.ascii.cl/htmlcodes.htm And yes technically they are html numbers not ascii. I just remember them in connection with ascii in the url -- although apparently I don't remember them well. drew > I searched the archives and could not find an answer to my question... > > Is it possible to generate right-aligned lists with CSS and have the > bullet on the right instead of the left? > > TIA! > > EUR devendra EUR > > ** > The discussion list for http://webstandardsgroup.org/ > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** 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] Right aligned lists...
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of russ - maxdesign Sent: Tuesday, January 25, 2005 5:41 PM To: Web Standards Group Subject: Re: [WSG] Right aligned lists... One method is here http://css.maxdesign.com.au/listutorial/08.htm === Another method would be to replace the arrow with the ascii code for the double angle bracket (>>) or use some other ascii symbol. The ascii for the >> is » A list of the codes can be found at: http://www.bbsinc.com/symbol.html drew > I searched the archives and could not find an answer to my question... > > Is it possible to generate right-aligned lists with CSS and have the > bullet on the right instead of the left? > > TIA! > > EUR devendra EUR > > ** > The discussion list for http://webstandardsgroup.org/ > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** 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] Quick h1,h2 etc question
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lea de Groot Sent: Tuesday, February 01, 2005 7:18 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Quick h1,h2 etc question On Tue, 1 Feb 2005 12:11:57 -, Jamie Mason wrote: > 2) With the exception of h1 used once, can you set the headers out > loosely in the same tree structure lists are set out in? This is the way I use it. I think option 1) would be very inefficient - documents just aren't structured like that. warmly, Lea -- ** Or you could refer to the specs (mostly to restate the issue not resolve it): "A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically." And just to interject an element of contention there is this as well: "Numbered sections and references HTML does not itself cause section numbers to be generated from headings. This facility may be offered by user agents, however. Soon, style sheet languages such as CSS will allow authors to control the generation of section numbers (handy for forward references in printed documents, as in "See section 7.2"). Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." The discussion centers around whether or not each page should have an h1, can there be more than one h1 per page, and should skipping be tolerated? It's a fun Gordian knot. drew ** 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] Gap between content and nav on events page in Firefox, looks fine in IE6
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Leslie Riggs Sent: Thursday, February 03, 2005 7:41 PM To: wsg@webstandardsgroup.org Subject: [WSG] Gap between content and nav on events page in Firefox, looks fine in IE6 What gives? I have this small two-page site up for testing right now: http://www.theonlineworks.com/test/wiscrad/index.html The index page is fine but the events page shows a gap between the nav and the content area. This is in windows, FF1.0. IE6 shows both pages just fine. The CSS is here: http://www.theonlineworks.com/test/wiscrad/css/mainstyles.css Validated XHTML 1.1, CSS validated too. I probably have been deep into this so long I can't see the problem.. Any suggestions will be deeply appreciated. Leslie Riggs ** Haven't seen a reply so I'll contribute this: you are using two different images for the logo. On the home page it's logo.gif and on events it is logo_wiscard.jpg. One is transparent, the other is not. Could that be the difference? drew ** 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] 2 Column Symetrical Stretching Layout?
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of JoeySent: Friday, February 04, 2005 12:53 PMTo: wsg@webstandardsgroup.orgSubject: Re: [WSG] 2 Column Symetrical Stretching Layout? Hi Tom,Thanks for that solution, but unfortunately it doesnt work, because i get a horizontal scrollbar at the bottom of the page, in both Firefox and IE. Does anyone else have any solutions for this?ThanksJosefTom Livingston wrote: This worked for me: "http://www.w3.org/TR/html4/loose.dtd"> Untitled Document
#main{width:100%; padding:0 50px 0 50px; margin:0;}
#left{width:45%; background-color:#FF; padding:0; margin:0; float:left;}
#right{width:45%; background-color:#00FF00; padding:0; margin:0 0 0 45%;}
== Remove the 45% margin #right and it will work fine. drew
RE: [WSG] 2 Column Symetrical Stretching Layout?
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Joey Sent: Saturday, February 05, 2005 8:11 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] 2 Column Symetrical Stretching Layout? Hi Drew, I removed the 45% margin from #right but this still never worked: This is what i did: * Before:* #right{width:45%; background-color:#00FF00; padding:0; margin:0 0 0 45%;} *After:* #right{width:45%; background-color:#00FF00; padding:0; margin:0;} Does anyone have any ideas on how to solve this? I dont want to resort to tables to get a 50% 50% 2 column stretching layout. Im a novice with CSS/XHTML, but i feel im picking it up fast, but this simple layout i cant seem to do. Cheers, Josef -- That's what happens when you rush an answer on Friday as you head out the door and don't read the list on weekends. This code produces a red and a green box which are side by each and have your 50px margin. What I did is eliminate the width on main and make both boxes float. Rule of thumb: if you have a width you need a float. http://www.w3.org/TR/html4/transitional.dtd";> Untitled Document #main{padding:0 50px 0 50px; margin:0;} #left{width:50%; background-color:#FF; padding:0; margin:0; float:left;} #right{width:50%;float:left; background-color:#00FF00; padding:0; margin:0 0 0 0;} .next{clear:both;} Text in the first element outside the boxes and their container. drew ** 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] Aligning bullets
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of russ - maxdesign Sent: Monday, February 07, 2005 6:27 PM To: Web Standards Group Subject: Re: [WSG] Aligning bullets Trying to align bullets and get some sort of consistency across the various browsers is hard, as each browser positions them in slightly different ways. One option is to use background images. This gives you two advantages over standard html bullets: 1. you can use any sort of bullet you like - as you control the image. 2. you can place it exactly where you want and it will be much more consistent across all css supporting browsers. Most importantly, you can do this without polluting the content with presentation items (like inline images). More here in a step by step tutorial: http://css.maxdesign.com.au/listutorial/introduction.htm Or all steps combined: http://css.maxdesign.com.au/listutorial/master.htm HTH Russ ** The alternative is to use the html number and avoid images completely: Double arrow left: « Double arrow right: » Bullet: • You place it where you want it and no markup is necessary and it will be there without style sheets. drew ** 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] Not and IE bug?...follow up difference why a difference between IDs and classes?
newbie questions... What is the advantage of the fact that IDs must be unique on a page? I am aware of the circumstance that if you need to "repeat" an ID, set is as a class, but have still not figured out the advantage of an ID. ¤ devendra ¤ In addition to everything else, as id replaces "name", id becomes a means to navigate to parts of a document using the anchor element: . drew ** 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] Not and IE bug?...follow up difference why a difference between IDs and classes?
-Original Message- From: [EMAIL PROTECTED] On Behalf Of Kornel Lesinski Sent: Thursday, February 10, 2005 7:09 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Not and IE bug?...follow up difference why a difference between IDs and classes? > newbie questions... What is the advantage of the fact that IDs must be > unique on a page? 1. getElementById() works. 2. Validation. If you use , validator will complain when you have two or more such divs (typical copy&paste accident :) Additionally IDs have higher priority than class in CSS, so it's easier to make "local" styles for element with an ID than with a class. -- regards, Kornel Lesiński * While true all those points had already been mentioned and weren't the point in any case. The point was that you can create links to parts of documents using id: www.mysite.com/mypage.html?id=#myidea drew ** 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] z-index problem
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gallagher, Robin Sent: Thursday, February 24, 2005 12:49 AM To: 'wsg@webstandardsgroup.org' Subject: [WSG] z-index problem Hi I've got a 3-column page with footer: #leftcol { clear: both; float: left; width: 30%; margin-left: 0px; margin-top: 0px; margin-right: 10px; ... } #rightcol { position: absolute; left: 68%; top: 130px; width: 30%; padding-left: 10px; padding-right: -10px; margin-top: -2px; margin-left: 10px; } ** Floats and absolute positioned elements are out of the normal flow. As such they need to be cleared. For a basic understanding of positioning see the specs: http://www.w3.org/TR/CSS21/visuren.html http://www.w3.org/TR/CSS21/visudet.html And also (a little easier to wade through until the specs become familiar): http://www.positioniseverything.net/articles/float-theory.html http://www.brainjar.com/css/positioning/default.asp drew ** 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] problem with div height
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christoph Mandl Sent: Thursday, February 24, 2005 8:08 AM To: wsg@webstandardsgroup.org Subject: [WSG] problem with div height Hello, i'm trying for hours to get the left column (where the menu is) of a webpage to extend to the same height as the content on it's right. I would be very grateful if anybody could give me some hint on how to accomplish this? site: http://mandolito.brotkastingsystem.de/mw2/impressum.html css: http://mandolito.brotkastingsystem.de/mw2/css/mw.css Thank you! Christoph ** Try these: Column examples: http://www.positioniseverything.net/piefecta-rigid.html http://www.positioniseverything.net/thr.col.stretch.htm For a bit of theory: http://www.positioniseverything.net/articles/float-theory.html http://www.brainjar.com/css/positioning/default.asp drew ** 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] Simple 2 column layout?
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stevio Sent: Thursday, March 17, 2005 6:08 PM To: Web Standards Group Subject: Re: [WSG] Simple 2 column layout? Thanks for that, getting those widths right always annoys me cause the box model doesn't work right! To expand on the simple 2 column layout, how can I have a fixed width left column (for navigation) and a right column that fills the rest of the space. This is achieved in tables by setting the left cell to, for example, 150 width, and the right column to 100%. Thanks, Stephen =** There's a conceptual issue here. The point of styling with css is to get out of the box of one's own monitor and to style for the range of devices available to users. That's users not authors. The only way to do this is to maximize flexibility. This is where the "ease" of tables fails. Set a pixel fixed width for a left cell, let the right cell fill the screen. Now increase the screen resolution. The amount of real estate to fill in the right cell just increased dramatically. Go the other way, keep decreasing the screen width to a cell phone or pda. The screen real estate is gobbled up by the fixed with left cell and the right cell an undecipherable sliver. Start to change font size and it just gets worse. The fixed width left cell disintegrates. The right cell holds coherency longer. Overall, it just doesn't work well. Percentages offer a partial solution. At lower resolutions a percentage based column setup holds up pretty much down to the single word width, a bit longer than may actually be useful. For higher resolutions, the single line column problem doubles with both cells being single lines with the added possibility of a lot of real estate separating the end of one text grouping and the beginning of the other. Font size, however, starts to cause the same kinds of problems. Huge, gigantic letters breaking out all over. Fixing the right cell size only compounds the problem. That leaves em's for sizing. One can set a width for either or both columns which will better withstand resolution and font changes in both directions. The problem is how big is an em? It's really such a flexible measure that it makes people uncomfortable. How many em to a line? What looks good on changes of screen resolution can frankly look a little flakey and shabby on different monitors with the same resolution. It does look slightly odd when the header graphic is off center a tiny bit. This leads to discussions of being a pixel or two off on header positions etc. Although designing for slightly less than viewport maximum will fix most all of that by compacting the design. So you want 2 simple columns? Then make 2 columns. Float both of them. Left or right, determined by whichever content you want to come first in the code. Float them because then they are columns not a float sitting on a wide margined normal flowed element. Fix their width with em to maximize durability and usability. And this is where the box model shines. It's just the sum of seven components: 1 content, 2 paddings, 2 borders, and 2 margins, side to side and up and down, all constrained by the width of the container, if any. Change those factors and one changes the appearance of the columns without compromising the content or the accessibility of the content. And that's the beauty of css for styling. Allows both users and authors to separately control how pretty the picture is; once the authors learn to let trust users. Brilliant design actually. drew ** 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] Standards compliant site, clients wants to make updates themselves
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bert Doorn Sent: Sunday, March 20, 2005 10:22 PM To: Web Standards Group Subject: [WSG] Standards compliant site, clients wants to make updates themselves I design sites to be standards compliant (usually XHTML1.0 Strict). This is ~supposed~ to make maintenance easier, and it is for me since I know what I'm doing (or at least, I think I do) However, I get many prospects who want to update sites themselves. In many cases, these are very small businesses with just one or two people, none of which have any idea about (x)HTML. Most of them have very small budgets, so they can't afford a complete "CMS" type setup (and it's not the kind of thing I can supply) and they tend to only want a small site (a few pages) for next to nothing. Is it just me, or is this a common dilemma? Apart from abandoning standards compliance (not an option as far as I'm concerned), setting the site up in HTML4.01 Transitional and letting amateurs wreak havoc with Micro$oft Plague, what options are there to design standards compliant sites, letting clients maintain them and still stay within web standards? ** Why not just offer to do it either on a contractual basis (x dollars for y time per month) or a per item basis? The work is generally trivial. drew ** 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] Semi-newbie: advice needed
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mark B Sent: Wednesday, March 23, 2005 5:41 PM To: wsg@webstandardsgroup.org Subject: [WSG] Semi-newbie: advice needed Hiya. I'm an experienced HTML & CSS coder who has dabbled a little with the XHTML/CSS way of doing things, but frankly, am a little lost. All the tutorials I've found on the web assume that you are either experienced and trying to do some advanced stuff, or are completely new and don't know CSS. I'm looking for an online tutorial or book that will help me go from the old ways to the new ways - help wean me off tables! :) Can anyone offer suggestions? I'm sure many others on this list have been down this path. Cheers, Mark ** You've had a lot of good suggestions about the mechanics of non-tabular design. You might also want to look at the philosophy of it. There is a "why" to it. Understanding that "why" helps with authoring which in turn addresses accessibility, ease of maintenance, neatness of code, download times ,etc. One place to start is with the w3c discussion of the semantic web: http://www.w3.org/2001/sw/ That will give you the citation/link to the original Berners-Lee etal "Scientific American" article. Additional statements by or about the Berners-Lee concept can be found at: http://www.mindswap.org/Science/ http://www.ercim.org/publication/Ercim_News/enw51/berners-lee.html And if you want a simple introduction to RDF and N-Triples have a look at: http://logicerror.com/semanticWeb-webdev.html And for the over-the-top, insulting, aggravating but entertaining rant: http://evpc.biz/personal/soapbox/morons_in_webspace drew ** 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] XHTML 1.1 Presentation Module
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Patrick H. Lauke Sent: Thursday, March 24, 2005 1:06 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] XHTML 1.1 Presentation Module > Examples: > E = mc2 > Mlle Dupont [/quote] That still doesn't make it semantic, sorry. If nothing else, the emphasis on "rendered/rendering" reinforces the idea it's a presentational aspect. It doesn't define WHAT it is (semantics), only HOW it's presented. -- Patrick H. Lauke _ *** Here's how xhtml2.0 defines the text module which includes [sup] "9. XHTML Text Module This section is normative. This module defines all of the basic text container elements, attributes, and their content models that are "inline level". Note that while the concept of "inline level" can be construed as a presentation aspect, in this case it is intended to only have a semantic meaning." Note in particular the phrase "in this case it is intended to only have a semantic meaning." That seems pretty clear. While that may or may not be the current definition of [sup], it certainly seems to be headed for a structural/semantic definition since it is defined in this module. drew ** 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] XHTML 1.1 Presentation Module
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Patrick H. Lauke Sent: Thursday, March 24, 2005 2:57 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] XHTML 1.1 Presentation Module Trusz, Andrew wrote: > Here's how xhtml2.0 defines the text module which includes [sup] [...] > Note in particular the phrase "in this case it is intended to only > have a semantic meaning." That seems pretty clear. While that may or > may not be the current definition of [sup], it certainly seems to be > headed for a structural/semantic definition since it is defined in this module. So split hairs, "in this case *IT* is intended to only have a semantic meaning". The "semantic meaning" bit only refers to the use of the phrase 'inline level', not to the elements themselves... However, I'm waiting with baited breath to see how they're going to define the semantics of elements which are presentational already in their name, and can contain such disparate types of content as mathematic exponents and french abbreviations. I'll be the 1st one to cheer when it happens... -- Patrick H. Lauke _ You can let out your breath. The semantic meaning for the inline use is defined for the elements, attributes and content models defined in the module. That's the meaning of the entire paragraph: these are inline elements which have a structural meaning and those meanings are defined in this module. That's what the paragraph says; that's what the rule says. The [sup] element means superscript. The user agent is indicating that some element is a superscript. The content will provide the ontological framework for recognizing which meaning the user should attach to the superscript. So, an aural browser would provide very different renderings of "e=mc2" and "e=mc[sup]2". When that rendering is seen or heard, the context can be understood: a math expression, a date, a french abbreviation, etc. Language is sloppy, sloppy, sloppy. It's worth remembering that the point of providing structural/semantic meaning to elements is to make it possible for machines to catch some of the sophistication hidden in that sloppiness. Inevitably, there will be friction between machine precision and human flexibility. Developing rules for every situation would result in a system so cumbersome that it would simply not be used -- which we almost have with sgml. Who knows, different definitions of [sup] may be broken out just as nl is extracted in xhtml2.0 from ul. Practice at times begets theory. drew ** 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] Multiple classes applied to one element
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kornel Lesinski Sent: Friday, April 01, 2005 8:56 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Multiple classes applied to one element On Fri, 01 Apr 2005 14:27:35 +0100, Alan Trick <[EMAIL PROTECTED]> wrote: > This is certainly valid code and as far as I know, it is accepted > across modern browsers. I've used it quite a lot and have never had > any trouble with it. I find it quite useful. Except that multiple classes selector doesn't really work in Internet Explorer, ofcourse. http://www.quirksmode.org/css/multipleclasses.html -- regards, Kornel Lesiński ** Actually the example works just fine in IE6. drew ** 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] Multiple classes applied to one element
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of pixeldiva Sent: Friday, April 01, 2005 10:16 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Multiple classes applied to one element On Apr 1, 2005 4:04 PM, Trusz, Andrew <[EMAIL PROTECTED]> wrote: > Actually the example works just fine in IE6. Not strictly. If you look, you'll notice that the third sentence is in smallcaps in IE6 and ordinary in FF. Not much of an issue, but an issue nonetheless. [/pedant] pix http://www.pixeldiva.co.uk ** I see what you mean. But the error in line 3 isn't due to the use of multiple classes in IE. Its the result of the dotted notation used in the attribute selector p.underline.small. According to the specs, any list of space separated attributes containing the attributes in the dotted list will result in the rule associated with the dotted notation being applied . What IE does wrong is to treat small in example three as if it were inherited. Its not. Its an attribute selector and shouldn't be applied. It should and is applied in line 4. While this is a perfectly legal and correct means to do attribute selection, it seems to me, at least, unlikely to be used extensively. So having a little care will avoid the problem created by IE's mistake without having to give up the advantages of using multiple classes. Here's the relevant example from the specs: For example, we can assign style information to all elements with class~="pastoral" as follows: *.pastoral { color: green } /* all elements with class~=pastoral */ or just .pastoral { color: green } /* all elements with class~=pastoral */ The following assigns style only to H1 elements with class~="pastoral": H1.pastoral { color: green } /* H1 elements with class~=pastoral */ Given these rules, the first H1 instance below would not have green text, while the second would: Not green Very green To match a subset of "class" values, each value must be preceded by a ".", in any order. Example(s): For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine": p.pastoral.marine { color: green } This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue". /*Note.* CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not./ http://www.w3.org/TR/CSS21/selector.html#attribute-selectors) The cautionary note is particularly interesting. drew. ** 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] Styling Forms
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lachlan Hardy Sent: Tuesday, April 05, 2005 1:52 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling Forms [EMAIL PROTECTED] wrote: > Well, it seems that styling the actual form elements is the way to go, and > certainly appears to be ideal for simple forms. I use FIELDSET, FORM etc as per other people's suggestions above, but my personal favourite is wrapping the relevant form field inside the LABEL element. Makes styling seriously easy An invaluable reference is Cameron Adams's Accessible, Stylish Form Layout: http://www.themaninblue.com/writing/perspective/2004/03/24/ * It may make styling easier but incorporating form controls in labels has a different meaning than associating a label and a form control. For one thing, it isn't usable for those choosing a table layout for forms. Nor is it possible to use an incorporated form control with multiple labels. This is what the html 4.01 specs have to say about the meaning of labels and their relationship to form controls: The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control. The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute. This example creates a table that is used to align two text input controls and their associated labels. Each label is associated explicitly with one text input: First Name Last Name This example extends a previous example form to include LABEL elements. http://somesite.com/prog/adduser"; method="post"> First name: Last name: email: Male Female To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control. In this example, we implicitly associate two labels with two text input controls: First Name Last Name Note that this technique cannot be used when a table is being used for layout, with the label in one cell and its associated control in another cell. When a LABEL element receives focus, it passes the focus on to its associated control. See the section below on access keys for examples. Labels may be rendered by user agents in a number of ways (e.g., visually, read by speech synthesizers, etc.) http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL Use what you want, but use it correctly. drew ** 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] Styling Forms
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Anthony TimberlakeSent: Tuesday, April 05, 2005 8:59 AMTo: wsg@webstandardsgroup.orgSubject: Re: [WSG] Styling Forms I think that styling forms is very nice addon to any site. Who wants to look at a dull white area on a black site? Not me... == Great, style away; keeping in mind Jan's caution about non-major browser renderings. Styling has nothing to do with the specs cited. Incorporating the control or just associating it with a label has meaningful/semantic consequences which are completely unrelated to style. The point was to use label correctly. drew
RE: [WSG] IE problem
-Original Message- Javier Sent: Monday, April 11, 2005 1:22 PM To: List WSG Subject: [WSG] IE problem Hi I used the classic two columns inside a container. Left column float to left and the other to right side. IE 6, ignores the width size of left side and show it bigger than expected then right side goes down. Also, right side right margin is bigger than in Firefox. You can see a page test in: http://home.leyba.com.ar/test/ I've defined borders in left and right columns to allow to see the problem... * The problem is in your markup.css page. If you define your containers in the style sections, redo the links as a ul in the page, and float both left (done for visual reasons but it works with a right float as well) it works well. #contizq{float:left; width:170px;} #contder{float:left; width:365px;} Remove the the @import statement. The page then displays as two floated boxes. Somewhere in the markup is the problem. I'll leave it to you to identify exactly which rule it is. Oh you also have nav with a width of 700px in your layout.css. drew ** 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] Need some CSS help
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lori Leach Sent: Thursday, April 14, 2005 10:10 AM To: wsg@webstandardsgroup.org Subject: [WSG] Need some CSS help Hello WSG, http://www.zenfulcreations.com/client-files/do/pa/guiR3.jpg : http://www.zenfulcreations.com/client-files/do/pa/ The CSS validates: http://www.zenfulcreations.com/client-files/do/pa/pa.css PROBLEMS: 1. I need the design to look like the mockup, except it must be fluid, not fixed (as the mockup looks). I think I have gotten that, but when sized down the right mid content drops. 2. I have clear: both used many times in the right content area to make the footer rest at the bottom. I can't figure out why I just can't get it down there without that. 3. IE is munching the "headings" for the boxes (especially the news box and it is fried in FF too - however it is coded the same as all the others that DO work) and I have changed, tweaked and tested new things to make them work right, and am at a loss. 4. The Top Rated Games box, I have had to put a absolute height in - I did not have that there earlier on in the coding process and it worked -- I changed something and now it does not, so when the window is resized, the buttons fall out of the div. ** First look: 1. 3 column setup with header and footer. Two outside columns position:absolute, fixed width. Center column has a flexible banner and top text with two columns under. The left sub column is fixed width. The right flexible. In other words, most of the central column stretches. The right sub column drops because something has to give. That is, the fixed width columns can't compress only that right column can. That's why at higher resolutions only the middle column header and right sub column stretch. Semi-flexible design. 2. Cleared out all the extra clear:both before the footer. No problem in either FF or IE6. 3. Don't see any munching. The images look the same on the page and in the file. 4. Took out the height on top rated and nothing happened up to 1600 on the resolution. Things only looked bad when the screen couldn't handle the fixed widhs. So, it looks ok in terms of what you've done. And as you say it validates. drew ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **