Re: [WSG] XHTML5 polyglot markup and WAI-ARIA, is there a valid way?
Hi Rob, thank you, and sorry for the delayed answer. The need for xml comes from the site being a web application for an academic work. The idea is to generate xml both to the site and for exchange purposes. I could generate both xml and html but that isn't very elegant, and would not optimise the resources. In fact, accessibility, validity, design and usability are my own concerns, they aren't part of the work, won't be evaluated, and are taking more time then they should. Anyway, as long as it is possible to do, the more difficult a work, the more one learns. I gess I've lost a good part of the WAI-ARIA development history, it's kind of hard to understand the excessive and aparently arbitrary strictness of xhtml in regards to ARIA. regards, isabel On Mon, Jul 30, 2012 at 10:56 AM, Rob Crowther robe...@boogdesign.comwrote: What XML content do you need to include? If you just stick to regular HTML5 then all the ARIA stuff is valid (with some sanity restrictions) and you won't have to work around the strict parsing: http://www.whatwg.org/specs/**web-apps/current-work/** multipage/elements.html#wai-**ariahttp://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#wai-aria XML elements will be parsed into the HTML5 document tree, albeit slightly differently to how an XML document would be parsed, but maybe close enough for your purposes depending on what XML you'll be including. Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] XHTML5 polyglot markup and WAI-ARIA, is there a valid way?
Hi Kevin, thank you for your feedback, I do recall times when this list was quite more active :) I found out I can use WAI-ARIA with html5 polyglot, without any aditional schema or doctype, I was tired the other day, and not thinking straight. The reason it wasn't validating, is because polyglot markup is considerably stricter, relying on older specifications, so it does not allow most new wai-aria roles and states from the latest realese candidate specification. I'm still testing against validation, what structures can I use, and what elements can take them (I imagine the rc specs are way ahead the validator, one cannot really follow their examples without testing) but its better then nothing. Anyway, I was hoping wai-aria could fill in the gap if javascript was unavalilable, but state change reliy heavily on javascript, so no miracles yet. It still is nice to have some control over the NVDAs announcements. It promisses to be a steep learning curve, and a longer headset time hearing strange html announcements, no doubt a challenge. thank you so much isabel On Sat, Jul 28, 2012 at 1:18 AM, Kevin L. Erickson kevinlerick...@gmail.com wrote: I am also looking into some similar areas. Looking for replies??? Kevin Erickson 804-873-0388 On Jul 26, 2012, at 6:41 PM, Isabel Santos unboun...@gmail.com wrote: Hi all, I've been researching for a way to use aria roles and states, to enhance accessibility on a web application, but it seems to be turning my brain into a soup of glia cells and floating neurons flashing like crazy fireflies! I decided to use polyglot markup, allthough it involved serving it as text-html for old trident browsers, to be able to include xml content on the site (wich I'm still learning). Since I'm using dropdown menus, that do not open on tab focus without javascript, I decided to try on wai-aria to improve the overall accessibility of the site, complementing the semantics, with or without javascript. And all was well, I was loving the idea and the new possibilities WAI-ARIA brings to the game, untill I tested it in http://validator.nu/. According to the Polyglot Markup: HTML-Compatible XHTML Documents ( http://www.w3.org/TR/html-polyglot/) I shouldn't use any docktype on the head of the document besides the !DOCTYPE HTML declaration, and am only allowed to use the default namespaces html xmlns=http://www.w3.org/1999/xhtml; math xmlns=http://www.w3.org/1998/Math/MathML; svg xmlns=http://www.w3.org/2000/svg; wich by the way, I can and should omit, because they are included in the html5 by default. Yet XHTML is, according to http://www.alistapart.com/articles/waiaria/ the extendible markup language, so it makes sense to extended it. Also, xml is supposed to allow for publication and standardization of doctypes and schemas, to avoid the need to be always reinventing the weel, and to allow easier document sharing. Since WAI-ARIA is gaining so mutch ground in terms of implementation (I'm gessing probably more driven by the mobile market then by the screen reader user needs) their should be already a doctype or a schema learking around. I'm not sure the one on ALAs exemple is what I need, but then again, it seems to have been designed to xhtml 1.1, not to polyglot XHTML5. I can´t avoid stranging that I'm finding so few documents on the web mentioning both polyglot markup and WAI-ARIA, most of them refering to older xhtml versions, stating the incompatibility, whille telling us to break the standards in favor of the accessibility (no doubt accessibility is more important, but why should one have to choose?). I'm probably missing something here, this doesn't make much sense, I'm really, really confused, too many documents, from several different groups, and I'm far from an expert. Can any of you offer some guidance on the matter? already gratefull for your time, regards isabel santos *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] XHTML5 polyglot markup and WAI-ARIA, is there a valid way?
Hi all, I've been researching for a way to use aria roles and states, to enhance accessibility on a web application, but it seems to be turning my brain into a soup of glia cells and floating neurons flashing like crazy fireflies! I decided to use polyglot markup, allthough it involved serving it as text-html for old trident browsers, to be able to include xml content on the site (wich I'm still learning). Since I'm using dropdown menus, that do not open on tab focus without javascript, I decided to try on wai-aria to improve the overall accessibility of the site, complementing the semantics, with or without javascript. And all was well, I was loving the idea and the new possibilities WAI-ARIA brings to the game, untill I tested it in http://validator.nu/. According to the Polyglot Markup: HTML-Compatible XHTML Documents ( http://www.w3.org/TR/html-polyglot/) I shouldn't use any docktype on the head of the document besides the !DOCTYPE HTML declaration, and am only allowed to use the default namespaces html xmlns=http://www.w3.org/1999/xhtml; math xmlns=http://www.w3.org/1998/Math/MathML; svg xmlns=http://www.w3.org/2000/svg; wich by the way, I can and should omit, because they are included in the html5 by default. Yet XHTML is, according to http://www.alistapart.com/articles/waiaria/ the extendible markup language, so it makes sense to extended it. Also, xml is supposed to allow for publication and standardization of doctypes and schemas, to avoid the need to be always reinventing the weel, and to allow easier document sharing. Since WAI-ARIA is gaining so mutch ground in terms of implementation (I'm gessing probably more driven by the mobile market then by the screen reader user needs) their should be already a doctype or a schema learking around. I'm not sure the one on ALAs exemple is what I need, but then again, it seems to have been designed to xhtml 1.1, not to polyglot XHTML5. I can´t avoid stranging that I'm finding so few documents on the web mentioning both polyglot markup and WAI-ARIA, most of them refering to older xhtml versions, stating the incompatibility, whille telling us to break the standards in favor of the accessibility (no doubt accessibility is more important, but why should one have to choose?). I'm probably missing something here, this doesn't make much sense, I'm really, really confused, too many documents, from several different groups, and I'm far from an expert. Can any of you offer some guidance on the matter? already gratefull for your time, regards isabel santos *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] firefox and classid on flv easter egg
Hi all, I'm designing a site for a friends master thesis on Fisical Chemistry for Education, about Nanotechnology. Since the public target is teenagers, the site has an high impact header with an flv file. The flv is not important and is mean't as more of an easter egg, it shows the skin play controls on over, it has an alpha channel wich hides it at the begining and end, and underneath there is a simpler gif and the sites name in text, that acts also as altertnate content, so I do not care if people can't see it because they do not have the fash plugin installed - if they don't, it means they do not wish to see it anyway. The content itself is inspirering but not essential as content. I also do not wish to use javascript for it, since it adds more variables to the way people may see it or not. I manage to make it wark as intended and equally on all major browsers using a variation of the satay method with the code: div id=anima object type=application/x-shockwave-flash data=flv/cabecalholoader.swf?path=flv/cabecalho.swf width=788 height=150 param name=width value=788 /param name=height value=150 /param name=src value=flv/cabecalholoader.swf?path=flv/cabecalho.swf / param name=quality value=best /param name=pluginspage value=http://www.macromedia.com/go/getflashplayer; /param name=align value=top / param name=play value=false /param name=loop value=false /param name=scale value=noscale /param name=wmode value=transparent / param name=devicefont value=false /param name=id value=cabecalho /param name=bgcolor value=#00 /param name=name value=cabecalho / param name=menu value=true /param name=allowScriptAccess value=sameDomain /param name=allowFullScreen value=false / param name=movie value=flv/cabecalholoader.swf?path=flv/cabecalho.swf /param name=salign value= / p class=noFlashspanEste site apresenta conteúdo interactivo não essencial para o br //span spanFlash Player 9.0115 ou superior. quot;Pluginquot; para 32bits disponível em: br //span a href=http://get.adobe.com/br/flashplayer/;http://get.adobe.com/br/flashplayer//a/p /object /div wich is XHTML 1.0 Transitional fully valid. The warning about the flash plugin appears onover with css styling and is unobstrusive. Problem is, in earlier versions of firefox and opera without the flash plugin, it would put a flasshing icon and overload the processor on my testing virtual machines. I solved it adding the class classid property of the object: classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354 still valid. still valid, and it workd fine, until I found out it wouldn't play anything in Firefox 3.5 with the plugin installed. And thats not good at all, people with the plugin installed should be able to appreciate the high impact header if they wish to, just by clicking the play controls. The classid content doesn't make any difference, just its presence. If it is there, older versions of firefox show the movie on over if they have flash, and the warning over the gif background if they don't. Newer versions do not show anything. Without it, it plays in flash as in anyothor one, it even fixes troubles on ie (it shows the text underneath on alpha enter) but it shows a blinking flash icon and stresses the processor on earlyer firefox and opera without the plugin. Is there a way to serve the classid tag just for older versions of those browsers without having to rely on javascript? (the usual way dreamweaver and flash use the javascript just mess things up with ie anyversion). Thankyou so much in advance, isabel *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] inline element directly on body
Hi all, maybe I should know this, but I cannot even find where does w3c refers to this, so here it goes: I have a very simple document with a strict dtd. on the body I have something like this: h1.../h1p.../pem class=nota.../em while validating the document I get this message: ___(quoting the validator) Line 15 column 18: document type does not allow element em here; missing one of p, h1, h2, h3, h4, h5, h6, div, pre, address, fieldset, ins, del start-tag . em class=nota...,The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.One possible cause for this message is that you have attempted to put a block-level element (such as p or table) inside an inline element (such as a, span, or font). ___ the question is:I cannot find a place where w3c tells me I cannot place an inline element directly on the body.In fact, all I find besides references about what is it, what can it contain and wich attributes it can handle, isa badexample of the well formedness concept: ___(quoting w3c)CORRECT: nested elements.phere is an emphasized emparagraph/em./pINCORRECT: overlapping elements phere is an emphasized emparagraph./p/em so,is it really mandatory thatem elements (or any inline element for that matter)should go inside block level elements, or am I missing something here? Best regards, Isabel Santos
Re: [WSG] inline element directly on body
:) thank you Russ, I must make a w3c site map on my favorites one of this days to be able to find this things... best regards, Isabel Santos On 10/23/05, russ - maxdesign [EMAIL PROTECTED] wrote: ...Inline elements [1] and anonymous inline boxes [2] cannot be placed directlyinside the body, form or blockquote elements when using a strict Doctype. They must be wrapped in a block level element[1] http://www.w3.org/TR/REC-CSS2/visuren.html#q7[2] http://www.w3.org/TR/REC-CSS2/visuren.html#anonymousHTHRuss
Re: [WSG] inline element directly on body
Thank you all, first, with shortschedules and short weekendsI find myself looking for things I cannot find in w3c,its organization is quite confusing, and since I keep loosing bookmarks and favorite listson every format(unfortunatly too many of those) I end up getting in pannic once in a while. On those times mysynapsis tend to get slower :). Things like (quoting w3c) !ENTITY % phrase EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM !ELEMENT (%fontstyle;|%phrase;) - - ( %inline;)* !ATTLIST (%fontstyle;|%phrase;) %attrs; -- %coreattrs, %i18n, %events -- tend to get confusing when you google it digging for a simple clear statement about your doubt, so thank you Rimantas. Janos, thank you for the tip, but I used the em element because that is what makes sense in the context, to enphasize a note as content, not only as presentation. Pardon me if I wasn't clear: I classified the w3c well formedness concept example as a bad one, not because it says anything wrong, but because it can be missunderstood; one can find this example all over the internet, as an example of how to use the em tag, but they are as poor as this example as to the issue in question: where exactly should it go. (I mean it would be wrong to make it empHello World!/p/em since em is an inline element and p is a block level one, but that isn't made clear). It seams it is very easy to find a lot of places where you learn xhtml, even where you can get diplomas on the subject, but the fact is that they do not get very deep. When one searches for more specific information, w3c turns into a labirinth, and most tutorial and reference sites into mere copies of w3c schools main content pages. Anyway, this links you all gave me deserve a good study, Thank you, best regards, Isabel Santos
Re: [WSG] Extending xhtml strict to include frameset and target
Well Martin, I got to the conclusion that there is no standard way to get rid of thespace bitween the two frames in a standard way: cellspacing=0 is out of xhtml, and no css style will take away that space, so out with the frames, I'll make the header a php include. As for the extending issue, I still want to know how it works, so I'll study it, thank you! Best regards, Tank you all, Isabel Santos On 9/26/05, Martin Heiden [EMAIL PROTECTED] wrote: Olá Isabel,you should try to get rid of the frames and use the strict doctype.Don't change the overall structure of the site and nor users neither search engines will be upset with the redesign ;-)Like Christian mentioned you could use a php include for the header.then use ids on the body tag to highlight navigation via css. Thatsaves a lot of headaches and gives the user a much better experience than the actual site. But it would probably better to redesign thenavigation structure as well and to add some more levels...If you still want to extend the dtd, use XHTML 1.1 and modify thedriver. (You should serve it as application+xml, but I won't think to much about that, even if it isn't conform with standards).To do that:1.) Download the driver: http://www.w3.org/TR/xhtml11/xhtml11_dtd.html#a_xhtml11_driver 2.) Modify it.3.) Let the Doctype point at your custom driver and add your modifications to the description.I'd choose the php include way.And please, don't let it blink so much ;-) Boa sorte!Martin**The discussion list forhttp://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**
[WSG] Extending xhtml strict to include frameset and target
Ok, maybe I'm being lazy, I'm googling for a good tutorial or exemples on the subject, and all I find is theory, so here it goes: I recently got a job as a web designer in a company whose site has previous decades markup. Apart from that I do all the companys graphic work, so time is short. The site has a ancient php seach engine, with a quite large data base, and the rest seams more like php output saved by the browser. Ithas tags for marqees, atributes like blink, links inside a flash movie,lots of heavy animated gifs, a script running at the status bar, an interface completly unrecomended for epileptic users well, I think you can imagine, or visit it at: http://www.ocean-wings.com/ The site is updated every day, since new models como in all the time, and has a quite large and loyal audience, wich by the stats includes users with FF, IE 5 to 6, IE ad Safari on mac (actually not bad at all). The updates are made directly on the markup, update dates are written by hand and the data base is updated separatly, so not only the error risk is significant, but also tasks are unnecessarilly repeated. Such a heavy site is running on frames witch makes all the sense, and some deeper links use the target attribute. I intend to rewrite the site completly to simplify the updating tasks and to make the site faster, more relyable, usable andaccessible. I also intend to do in in standards mode. The company intends to keep thelook and feelof the site, for it has already a very good emotional boundage with the users, so layout changes should be minimum, only to permit some features they intend to offer, like automatic alerts on updated items for subscription users. Since time is a short resource, my idea is to do it in two fases, in my spare time: First rewriting the site as a template indecent code, then turning it into php buiding a new database and using the template as an output container. So now I'm looking for a doctype I can use to include a frameset andtarget attributes in xhtml strict mode (not only to trigger standards mode, but also for me to be able to track any markup error). AndI'm rulling out transitional doctypes as an option. W3C presents a lot of information on extending xhtml, but nothing I can learn or understand in a quick way. There are also several discussions over the matter on very good blogs, but all I needright now is an example doctype, or a tutorial, on how to extend XHTML strict to include frameset and target external modules, and I cannot find one. Can some of you folks help me, please? Thank you, best regards, Isabel Santos
Re: [WSG] Extending xhtml strict to include frameset and target
Thank you Christian, making the top frame a php include sounds like an excelent idea. The markee I was thinking in turning it a flash object, since there is already a flashmovie in the first page it shoudn't be a problem for users, I think it uses less processing resources. From what I've read around the web, it seams it is not mandatory to use !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN DTD/xhtml1-frameset.dtd as a doctype to use on framed documents if I extend the markup and use the right module, it even seams to be the all idea of thex part of xhtml. But then again, all this reading got me confused,I mightbe gettingit all wrong. I'm using the frameset doctype, just wanted to do it a better way, or at least understand it. Best regards, Isabel Santos
Re: [WSG] Extending xhtml strict to include frameset and target
Well Christian, it is not a search page, is a search engine, you can find its form at the top of this page: http://www.ocean-wings.com/principal.htm And the first time I looked at this site I didn't notice that the oval circlesat the animation on the first page were actually links to get in the site itself. I allready convinced the client that that page ( http://www.ocean-wings.com)will need to be completly changed. On 9/24/05, Christian Montoya [EMAIL PROTECTED] wrote: ...I couldn't find the search page you were talking about. Could you give me a link directly to it?
Re: [WSG] Extending xhtml strict to include frameset and target
Hi Thierry, thank you very mutch! I still dont know how to extend the DTD, but you are giving me very good reasons not even to try it. (I hate when things get weird :) ). That's quite helpfull! There is always a good reason why experienced designers do not use some structures, I think I'll stick to the safe frameset doctype. Now about dumping the frameset, it would be nice, scripting cross frames is far more complex than within one document and would save me a lot of work. It would also permit me to give more flexibility to the layout witch is important to me (as long as at 1024x768pxin default text size things look the same they wouldn't even notice it) and frames will keep me from doing that. On the other hand, the top frame has actual content, heavy one, that will change from time to time, but that will stand on top of every page at the site. If I made it a single page, the content of the top frame would be reloaded on every page. And the company loves nice heavy blinking banners. To avoid loading heavy banners every time I would have to make them backgrounds on the css (to keep it cached). That would subvert thefunction ofthe css files, not tomention I would need to update the css to change the pages content. Also users are used to that vertical scrollbar (however hugly it may look), they do not need to scroll all the way up a long page to get to the seach form or the navigation bar. So it makes all the sense to keep the frames system: it saves bandwith and time, and keeps the navigationexperience of the users untouched. Although Ido not appreciate frames (probably for not being used to code with them) I must agree with the company, on that they should stay. Thank you, best regards, Isabel Santos On 9/24/05, Thierry Koblentz [EMAIL PROTECTED] wrote: If you keep the frames-based layout and go with a frameset DTD for theframeset and a Strict DTD for the framed documents, you'll run into these problems:1. IE will create an horizontal scrollbar in your top frame. The fix forthis is to use scrolling=yes (I know it's weird).2. To use target with a Strict DTD, you'll have to extend the DTD or the markup will not validate, but doing so - in my experience - will make yourCSS fails validation (I know it's weird).You could use the DOM to plug the target attribute where needed, but I don'tthink you want your navigation to rely on JS. You could also trybase target= if all your anchors target the same frame (I guess that would passthe Validator).I would dump the frameset and go with flat pages. That would have the otheradvantage of removing one of the 2 vertical scrollbars. Regards,Thierry | www.TJKDesign.comIsabel Santos wrote: Ok, maybe I'm being lazy, I'm googling for a good tutorial or exemples on the subject, and all I find is theory, so here it goes: I recently got a job as a web designer in a company whose site has previous decades markup. Apart from that I do all the companys graphic work, so time is short. The site has a ancient php seach engine, with a quite large data base, and the rest seams more like php output saved by the browser. It has tags for marqees, atributes like blink, links inside a flash movie, lots of heavy animated gifs, a script running at the status bar, an interface completly unrecomended for epileptic users well, I think you can imagine, or visit it at: http://www.ocean-wings.com/The site is updated every day, since new models como in all the time, and has a quite large and loyal audience, wich by the stats includes users with FF, IE 5 to 6, IE ad Safari on mac (actually notbad at all). The updates are made directly on the markup, update dates are written by hand and the data base is updated separatly, so not only the error risk is significant, but also tasks areunnecessarilly repeated. Such a heavy site is running on frames witch makes all the sense, and some deeper links use the targetattribute. I intend to rewrite the site completly to simplify the updating tasks and to make the site faster, more relyable, usable and accessible. I also intend to do in in standards mode. The company intends to keep the look and feel of the site, for it has already a very good emotional boundage with the users, so layout changes should be minimum, only to permit some features they intend to offer, like automatic alerts on updated items for subscriptionusers. Since time is a short resource, my idea is to do it in two fases, in my spare time: First rewriting the site as a template in decent code, then turning it into php buiding a new database and using the template as anoutput container. So now I'm looking for a doctype I can use to include a frameset and target attributes in xhtml strict mode (not only to trigger standards mode, but also for me to be able to track any markup error). And I'm rulling out transitional doctypes as an option. W3C presents a lot of information on extending xhtml, but nothing I can learn or understand in a quick way. There are also several discussions
Re: [WSG] Extending xhtml strict to include frameset and target
:) Oh wow, that page is going to give me a seizure. I can't look at it anymore. Like I said, unrecomended for epileptics... (there areaccessibility rules on blinking gifs) Yet the bliking lights have an important meaning for them: They represent the landing lights for airplanes, off if the airplane isn't there yet, blinking from red to green when landing... I don't think you should worry about the reactions of the users to changes in the site's appearance. You're probably right, but I'll need to go slowly on that: I like the job, I get to do a all lot of other things besides coding and I don't want to loose it. Once I get a decent markup there, I can change the style sheet anytime ;) . Best regards, Isabel Santos
Re: [WSG] Need help on css positioning
Dinh: The easiest way to fix it is to put the sidebar before the banner div in the markup (you dont need to change anything else, although I think you might wishset magins and paddingson the body to zero, it works ok). But you should not have to change the markup to format the layout, so I think the best way to do it is using negative margins. Anyway the other replys are already explaining it. Best regards, Isabel Santos
Re: [WSG] IE6 not shrinking space at pure dom explorer list trouble
Thank you very mutch for the answer Paul, I thought it had gone unnoticedin the middle ofall other messages. Sory I make them so long and confusing. I think I didn't explain it very well: Since the thumbnail gallery is absolutely positioned, what goes all the way down until after the previously ocupied by the lists space, is the footer. It goes so far one doesn't even notices it. You can see some reduced size screen shots from that page, rendered in Firefox 1.06 and IE6 sp2, at a screen resolution of1280x960px (actually overlaping print screens to show the pages full lenght)at: http://unbound.no.sapo.pt/decoder/prinscreens.htm Thank you abain, Isabel Santos On 9/22/05, Isabel Santos [EMAIL PROTECTED] wrote: The sites test pages is at: http://unbound.no.sapo.pt/decoder/(background displaying fine) http://unbound.no.sapo.pt/decoder/galeria/portfolio.htm (troubled page) http://unbound.no.sapo.pt/decoder/lib/default.css(basic css) http://unbound.no.sapo.pt/decoder/lib/standardbrowsers.css (site wide css) http://unbound.no.sapo.pt/decoder/lib/especifica1.css (pure dom'slist and gallery's css) http://unbound.no.sapo.pt/decoder/lib/pde.js (pure dom explorers script) ... But although for latest Opera and Firefox things get preety well presented, IE seams not to regain the space it saves when the list is shrinked uppon the script loading, so it leaves a continuos spacecorrespondent to the lenght it would ocupye if the list was all opened, and messing up that spaces backgrounds. ... thank you very mutch for your time, Isabel Santos
[WSG] IE6 not shrinking space at pure dom explorer list trouble
(similar message sent to css discuss list) Hi all, I'm afraid I've not been able to grab time toreadmost my lists messages during the lasts months, nor to answer any, pardon me please, but I'm getting kind of desperate on this new challenge, so I'm turning on to you :): I'm designing a site for a graphic company, still in the process of showing up the possibilities to the client, still testing just in IE6 pc, latest Opera and latest Firefox and getting already frustrated for not being able to tame IE. The sites test pages is at: http://unbound.no.sapo.pt/decoder/(background displaying fine) http://unbound.no.sapo.pt/decoder/galeria/portfolio.htm(troubled page) http://unbound.no.sapo.pt/decoder/lib/default.css(basic css) http://unbound.no.sapo.pt/decoder/lib/standardbrowsers.css(site wide css) http://unbound.no.sapo.pt/decoder/lib/especifica1.css(pure dom'slist and gallery's css) http://unbound.no.sapo.pt/decoder/lib/pde.js(pure dom explorers script) The simpler pages are displaying fairly ok, but atthe page http://unbound.no.sapo.pt/decoder/galeria/portfolio.htmI decided to use an unordered using the pure dom explorer from Christian Heilmann presented at http://www.onlinetools.org/tools/puredom/ , a script I findtruely elegant, and a thumbnail gallery following the example ofStu Nichollsin http://www.webreference.com/programming/css_gallery/index.html , and things are getting realy messy. I was able to avoid the absolutly positioned listfrom jumping over the tree pure dom list using a content stretching div bitween them, witch meens if the script isn't loaded, the list comes all the way down before the thumbnail gallery without destroying the structure for the Gello Layout (built uppon the Mike Purvis's genius idea described at http://positioniseverything.net/articles/jello-expo.htmlwitchcalls fora relatively positioned wrapper div). But although for latest Opera and Firefox things get preety well presented, IE seams not to regain the space it saves when the list is shrinked uppon the script loading, so it leaves a continuos spacecorrespondent to the lenght it would ocupye if the list was all opened, and messing up that spaces backgrounds. I might considera different design, with a diferent kind oflist, eventually one usinghoversbut right now I really intend to solve this issue. Since I cannot defined a maximum height for the list or any of its wrappers in IE, I presume it is not possible to use css to fix the list after the script is applied. (is this true?) I thought of the Peter-Paul Koch'sstructure used in the Three column stretching article at http://www.quirksmode.org/but it seams toundergo the samedifficulty with IE: it stretches, but it doesn't shrinks. Maybe I could make the script calculate the needed height and pull things up after the domsnodes generation, say like reloading the page without reloading the script or something?(is this remotly possible? I'm still assuming simples styles application wont work.) IE loads other structures using similar principles quite well; for instance, http://www.alistapart.com/d/eatcake/final.html(let them eat the cake's article) also uses style.display:none and style.display:block based functions uppon scripts loading, altoughtat div structures, and I see no extra spaces stretching heights. What am I missing?Does this has anything to do with using a ul? And finally, is there a valid reason for this not to be working, because of some stupid mistake, or because it is simply incompatible with IE6 pc, period? Ansiously looking forward for clues, thank you very mutch for your time, Isabel Santos
[WSG] Re: Web Design for PDA?
Thank you all, so very much! I gess I'll have a long study night, it won't be as easy as I first thought it would (gess it was kind of naif), but all this info you shared is valuable. I gess, if we can put standard code, to work properly, in a cross platformand browser maner, including pda on it, we win a good argumentover employers and clients, towish formore accessible and standard code, in spite of the time spent ondeveloping and solving compatibility questions: the user who buys a pda is probably included in the target public of the enterprises we design sites for, andthe argument about market share on browsers and common sense expectations, looses strengh:). Anyway, I hope I can do it, and later share any relevant findings with you. Isabel Santos
[WSG] Web Design for PDA?
Hi all,hope this isn't out of scope, both on css-d and wsg: On the template I'm working on, I decided it would be cool to give it a pda friendly version, for the target public would be kind of eager for new technologies.Following the ALA article on taking your site into the smaller screen, with some adaptation to my font options previous definitions, I created a second style sheet to be called under Handheld devices and to overwrite any normal css rule.I assume it is correct to inserte it like this: link rel="stylesheet" type="text/css" href="" media="screen"style type="text/css" media="handheld"@import url(lib/01pda.css);/stylestyle type="text/css" media="screen" title="principal"@import url(lib/principalquasar40.css);/style Not owning a pda myself, I built this using the Opera's small screen mode on a shrank window. Now I saw the uploaded page on a friends pda and got surprised:I get the header part of the page (broken yeton color)and the first navigation bar. Nothing else. It seams to me that the pda is trying to render the normal css (principalquasar40.css) and not the pda's one - 01pda.css(where the central column should occupy all the screen not showing any body background and widths should be mutch smaller). I'm using fully standard html 4.01 strictvalid code and the css files are valid. I'm also using _javascript_ to manipulate the dom to create the appearence of a shadowed text (in order to avoid a double header text on text browsers, a script from http://www.kryogenix.org/code/browser/aqdropshadow/)on the header and a colapsing menu on the right (from http://www.onlinetools.org/tools/puredom/index.html)- wich works on mozillas, opera 7.5and iewin 5.5 and 6 without problems at least on my pc. The script isn't supposed to work or give any error on browsers that do not supporte the DOM, since it is only meant for presentational issues. I then decided to look arround for more info; I found this text on one of the sites google gave me upon the search for "pda+web design": " There are four basic rules to create a good site for a palm sized device: 1: Stick to basic HTML tags such as: P, BR, B, I, PRE, headers (H1-6), BLOCKQUOTE, CENTER, UL, OL, LI, images, tables 2: Avoid frames, layers, imagemaps, plugins, _javascript_, Java, and CSS 3: Keep your screens small, and avoid clutter 4: Be aware of how graphics are displayed "___ Now, I can live with pda giving me like 1 taller size for h1 headers and the rest of the fonts at the same size, optimizing or reducing images, and so on.But what this tips tell me is that I should not use the standards to write code for pdas, wich means, if I really want to show the site on smaller screens, I will have to work on another version. Are my conclusions true?Or can there be another reason for the pda not to be showing what is intended, like not supporting scripting and messing up the rendering, being downloading the screen css and not the handheld for precedence issues over the css title, the css being to big for its buffer, anything... The site is at:http://unbound.no.sapo.pt/acad/index.htm Thank you very mutch in advance, Isabel Santos
[WSG] dl list breaking in ie 5.5 win
Hi, Could you please help me on this one? I've been trying to workaround a semantic problem in a site. Since the is intended to be used as a template, I intend to use only text and background on the header. To avoid low contrast situations, I decided to use an absolute positioned div simulating a shadow. You can see it here: http://unbound.no.sapo.pt/acad/index.htm Problem is it doesn't make sense on a screen reader to get two header titles one being an h1 and another being a p. (you can see it with the default style sheet - no positioning, basic styling - here: http://unbound.no.sapo.pt/acad/defaultquasar33.htm ) Now, what I have is: The name of a school discipline, and the course, year and semestre that discipline belongs to; The name of a school and the current school year. My h1 is the name of the discipline and the site is for the students of that discipline. So I gave myself a try on a definition list. I stripped it to the dl here: http://unbound.no.sapo.pt/testes/testesdl.htm Problem now is I cannot figure how to get it to properly work on ie 5.5win. It works in mozillas, opera (oh well, here it doesn't wrap but gets min-width), ie 5.01win and ie 6win (I do not own a mac, so I cannot know how it works in any of its browsers - and as for ies, i'm testing on a multiple ie instalation, somaby things do not show exactly that way in real instalations). The text gets each word on a line regardless of what I do, unless I give a fixed width to the dt - no percentage will work or a white-space: nowrap. Holy hack with height on anything won't work. Changing the display properties will break the list. Fixing the list with defined sizes or defining a width for the dl will break it also (unless I'm doing it the wrong way). Now the layout is completly liquid except for a defined min-width for the browsers that do support it. I need the text to wrap on smaller space, and not to cross that space, so nowraping or a fixed size won't work. Google gives me nothing on this. Is there anyway to fix this? Just to make ie 5.5 behave like 5.01 or 6 in this case? Or should I just keep it the way it was, with no dl? Can I hide the shadow text from screen readers yet not from all other browsers? Thank you all, Isabel Santos ** 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] css syntax question
Brian:
Doesn't seem an easy task (I'm not a css master anyway), but I think you
could use combinations of several selectors to accomplish what you want (not
nesting it though).
Using descendent, child, adjacent and universal selectors,
(check http://www.websiteoptimization.com/speed/tweak/descendant/
and http://www.ddj.com/documents/s=2371/nam1011137554/index.html)
for instace, you could group rules like:
#navigation p + #tabs, *strong.someclass, diva:hover {...}
You can define a rule in a group such as this even if you do not intend it
to be applyed to all the ocorrences of the object in the html source, since
if you define a more especific rule for that object later you will get the
rule applyed to it.
You can check if a rule will actually be applyed to the object you intend to
calculating its specificity and cascading order
(http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order ,
and http://www.w3.org/TR/REC-CSS2/cascade.html#specificity).
You can also give more than one class to an html element, like:
p id=desconhomepage class=description place clear/p
You can use the selectoracle
(http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py)
to check on exactly what your code means if you get doubts when the grouping
starts getting too complex.
You may find a lot of information about selectors in this links list:
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html
Of course you would have to deal with a poor browser support for some
selectors.
Maybe a fat style sheet will be also (for the time being) a saffer one.
Isabel Santos
- Original Message -
From: Brian Duchek [EMAIL PROTECTED]
Is there a syntax in CSS declarations which 'wraps' classes/ids in a
parent condition? I'm not asking this very clearly, but the idea is
similar to the Javascript syntax...
with {
...
}
The purpose being, I find myself writing a lot of statements like the
below
#navigation p {...}
#navigation #tabs {...}
#navigation #tabs ul li a {...}
Isn't there an easier/more efficient way to apply the parent selector
#navigation to all the different groups?
#navigation {
p {...}
#tabs{...}
}
Does anyone know if the above works, or if it has any browser support
holes?
I only ask because I know the people on this list can chew up this
question and spit it out like no one else :-)
Thanks,.
**
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 problem with CSS tabs (solution)
/Win. */
voice-family: \}\;
voice-family: inherit;
width: 142px;
}
html#sidemenu li a {
width: 150px; /* be nice to Opera */
}
#sidemenu li a:hover {
font-weight: normal;
border-left: 1px solid #69f;
border-right: 1px solid #69f;
color: #ffc;
background: #C60;
text-decoration: none;
}
#secondarymenu {
list-style-type:circle;
padding-left: 5px;
line-height: 2;
font-size: 12px;
font-weight: normal;
}
Isabel Santos
- Original Message -
From: john [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Sent: Friday, October 01, 2004 3:55 PM
Subject: Re: [WSG] IE problem with CSS tabs (solution)
Isabel,
Thank you very much for your help with this. I added your fix, but I'm
*still* getting the same problem in IE. Perhaps I'm not putting it in the
right place in the CSS? Where did you place it?
~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
content without clutter
**
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] floating image
Hi Robin,
http://css.maxdesign.com.au/floatutorial/index.htm
http://css.maxdesign.com.au/floatutorial/tutorial0201.htm
Isabel Santos
- Original Message -
From:
Robin Button
To: [EMAIL PROTECTED]
Sent: Friday, October 01, 2004 3:58
PM
Subject: [WSG] floating image
Response
to:
How canone 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
This is what I
do:
CSS:
.left
{
float: left;
margin: 5px 10px 2px 0;
}
.left p { color: #000; text-align:
center; }
(you can change the margins and
text size/color to suit)
HTML:
div
class=left
Insert
photo
p insert
caption/p
/div
Robin
Button
Re: [WSG] IE problem with CSS tabs (solution)
John: This is so very odd! Maybe we are refering different things, or maybe your browser is not clearing the cache, for I'm looking and seing it. I'm refering the yellow background under the link home in the home page, wich has the id active. Forgive me the insistence, I uploaded it to a personal area so you can see it. I'll delete it upon your response. Please check: http://unbound.no.sapo.pt/drzeus/index.htm css file here: http://unbound.no.sapo.pt/drzeus/lib/style.css Isabel Santos (ps: if you get a 404 please warn me - my ISP is giving some wrong DNS translations, strangely only to certain OS) - Original Message - From: john [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Friday, October 01, 2004 6:15 PM Subject: Re: [WSG] IE problem with CSS tabs (solution) I test with IE6...and even though I copies and pasted the CSS you provided, I still don't see the active you are here tab in IE! I don't get this at all... *sigh* Well, I feel I've wasted enough of everybody's time with this issue...I think I'll just have find a ready-made tab set and use it. Thanks. ~john _ Dr. Zeus Web Development http://www.DrZeus.net content without clutter ** 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] IE problem with CSS tabs
John:
Try moving up the priority of the css rule for your active link.
I believe making
#tabmenu li a.active {
...
}
shall work, but I didn't teste it.
Isabel Santos
- Original Message -
From: john [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Sent: Thursday, September 30, 2004 9:00 AM
Subject: Re: [WSG] IE problem with CSS tabs
Thanks, David, for the suggestions (and for the code). I implemented
the changes, however nothing seems to have changed. I don't understand
why that would be, as everything you said makes perfect sense. However,
I'm still not the getting the you are here active tab in IE.
Any other possible ideas I should consider?
Thanks again.
~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
content without clutter
**
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] IE problem with CSS tabs
John,
Forgive me, I should explain myself better.
By moving the priority up I meant increasing the priority of the rule, and
that is specifying it more deeply.
I really do not know if that is what's happening, but if it is, increasing
the specificity of the rule will increase its priority.
So instead of telling the browser:
#tabmenu a.active {
...
}
I would try
#tabmenu li a.active {
...
}
or something of the king.
The rule is the same, just more specific, so it will overrule the rule for
#tabmenu a:link or anyother rule for #tabmenu a
I really didn't find any other reason for this to be happening (And in fact,
it is happening in IE 6.0 sp2, Mozilla 1.8a, Netscape 7.1, Firefox 1.0 and
Opera 7.5), althought I might have overlooked something.
Isabel Santos
- Original Message -
From: john [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Sent: Thursday, September 30, 2004 4:20 PM
Subject: Re: [WSG] IE problem with CSS tabs
Isabel,
Forgive me, but could you please clarify your suggestion? I tried moving
the #tabmenu a.active code up one, but it didn't do anything. I'm really a
newbie with CSS, so please bear with me.
~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
content without clutter
Isabel Santos wrote:
John:
Try moving up the priority of the css rule for your active link.
I believe making #tabmenu li a.active {
... }
shall work, but I didn't teste it.
Isabel Santos
- Original Message - From: john [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Sent: Thursday, September 30, 2004 9:00 AM
Subject: Re: [WSG] IE problem with CSS tabs
**
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] IE problem with CSS tabs (solution)
John:
(http://www.drzeus.net/redesign/cslewis/http://www.drzeus.net/redesign/cslewis/style.css)
Allthought your xhtml is valid, the css wasn't validating, so I cleaned up
some errors, I do not know if this works with the erros, but, after
cleaning, making:
#tabmenu a.active:link, #tabmenu li a.active:link, #tabmenu a.active,
#tabmenu li a.active {
background: #ffc;
border-top: 1px solid #ffc;
z-index: 30;
}
gets the active link working on:
win IEsp2 6.0,
Mozilla 1.8a,
Opera 7.5,
Netscape 7.1,
Mozilla FireFox 1.0 (preview release)
Cleaning:
You had a couple of padding: 5; without the unit, a color:... without
the ; and :root seems not to be recognized by the w3c parser - leaving
it there work fine anyway.
Isabel Santos
**
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] IE weird display problem
Michael:
Simple but not perfect:
if you can live with a 3px margin different in
different browsers:
#right {width:197px; /* if I put a unit
here such as "px" then the column doesn't line up
*/margin-left:400px;}
IE renders a 3px margin on adjacent divs in certain
circunstances.
This will take that out; in other browsers, if you
have different backgrounds for each div this solution isn't
suitable.
If you can make it a float:
#right {width:200px; /* if I put a unit
here such as "px" then the column doesn't line up
*/float:right;}
More complex ones need some testing.
They involve getting rid of the IE margin without
affecting other browsers, or using negative margins IE only.
You could try taking a look at some good tips
in:
http://www.positioniseverything.net/articles/hollyhack.html
Well, 06:00h, I'm crashing...
Isabel Santos
- Original Message -
From:
MirAGe01
To: Web Standards Group
Sent: Friday, October 01, 2004 5:11
AM
Subject: [WSG] IE weird display
problem
I'm
working on a page that will consist of 2 columns that will sit inside a
wrapper div container. I set the left column to float left with a width of
400px. The right column is set with a margin-left of 400px and a width of
200px. The width of the wrapper container is 600px. The right column is
getting pushed down in IE6+. If I remove the px from the width of the right
column so the style reads simply width:200; then the right column lines up
correctly with the left column. I've never heard of this before and it makes
no sense to me. You can see my code below with the problem in
bold.
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type"
content="text/html; charset=utf-8" /titleUntitled
Document/titlestyle type="text/css" media="screen"body
{padding:0;margin:0;}#wrapper
{width:600px;margin:10px auto;}#left
{float:left;width:400px;}#right
{width:200; /* if I put a unit here such
as "px" then the column doesn't line up
*/margin-left:400px;}/style/head
bodydiv id="wrapper"div
id="left"left side
text/divdiv
id="right"right side
text/div/div/body/html
Thanks for
you help.
/*/[ Michael Turnwall
]weblog | resume/*/
Re: [WSG] Get DIV height
Hi,
maybe this will help:
http://www.quirksmode.org/
(the site has frames, so a direct link won't work; look in w3c
dom--scripts--get styes)
Isabel Santos
- Original Message -
From: Andrew Poulos [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Sent: Sunday, September 26, 2004 4:38 AM
Subject: [WSG] Get DIV height
[Sorry, I meant to start a new thread.]
When I use the following code to get the height of DIV that may of may not
overflow, depending on the content, IE returns the larger height of DIV or
contents. Whereas MZ and FF always returns the height of the DIV (100px).
Is there a way to get MZ to return the height of the contents if the
contents is larger than the height allocated to the DIV?
Andrew Poulos
script type=text/javascript
function sizer()
{
var obj = document.getElementById(myDiv).offsetHeight;
alert(obj);
}
/script
style type=text/css
#myDiv {position:absolute; left:100px; top:100px; width:100px;
height:100px;}
/style
/head
body onload=sizer()
div id=myDiv
This is some sample text it is not meant to be read. This is some sample
text it is not meant to be read.
/div
**
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
**
**
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] Re: broken navigation bar in Opera
It works! Thank you so mutch! Isabel Santos - Original Message - From: Irapuan Martinez [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Thursday, September 09, 2004 12:28 PM Subject: [WSG] Re: broken navigation bar in Opera At 06:26 9/9/2004 +0100, Isabel Santos wrote: I'm designing an academic site, and having real trouble with a top navigation bar. (...) In Opera the unordered list isn't rendered inline - The page is here: http://unbound.no.sapo.pt/acad/quasar.htm and the css here: http://unbound.no.sapo.pt/acad/lib/defaultquasar04.css. Is there anyway to make this work on Opera? Apply a width in the ul. When ul is float, Opera assume a little witdh to this element causing de brakelines in the lis. Force a large width to ul and the lis stay inline. ** 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 ** ** 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] Footer
Dear Ern Marshall,
style sheets mean exactly style sheets: they are intended to format your
code, not to store it; if you wish to store a piece of code to apply on more
than one page, you can use:
-server side includes (if your server provides them);
-php or asp to generate it;
-external client side scripts (javascript, vbscript);
-or pieces of inner html that also require scripting.
Over them, you can apply any style sheet you want.
A very simple script to attach to the page to write your links would be
something like:
var a='a href=myfirstpage.html class=linkstyleMy First Link/a'
var b='a href=secondpage.html class=linkstyleMy Second Link/a'
car c='p'+a+' '+b+'/p'
(you may find some validation errors on this, you can clean it using escape
characters or dividing the expression in smaller expressions so that ending
tags will not appear orphaned)
if you save this code as mylinks.js and then call the script to the head of
your page with a
script src=myjsfolder/myscript.js type=text/javascript/script
and if you put at the place you want the footer to appear (at the bottom of
your content) the code
script type=text/javascript
document.write(a);
/script
you will get a paragraph with your links on that place, written upon page
load.
If you prefere not to add code outside the head of the html file, you will
need to let your script detect the place where you want to put your links.
The easyest way to do that seams to be to use a span (or a div):
giving a span an id you can make id able browsers look for the span and
insert the markups piece you want:
so in your span you can make: span id=insert/span
and in the external script something like:
var a='a href=myfirstpage.html class=linkstyleMy First Link/a'
var b='a href=secondpage.html class=linkstyleMy Second Link/a'
var c=a+' '+b
//(since p/p is a block element you shouldn't use it inside a span)
//now the script will need to check for browsers capabilities
if (document.all){document.all.insert.innerHTML=c}
else if
(document.getElementById){document.getElementById(insert).innerHTML=c}
else document.write(c)
on the last option, if the browser doesn't handle inner html nor
document.getElementById it will write your footer anyway, just not at its
place, (actually at the top of the document, wich is not so nice) since it
doens't know where to put it.
It is also possible, on modern browsers to generate the code on load using
thedocument object model.
Anyway, it seams to me that if you want your site to comply the standards
and to be accessible (javascript links are not) you should look at your
server to know what server side technologies they provide and use them, or
simply write the links on the bottom of the page (it just one mark up line
anyway, just a simple copy paste, and it will save the loading of a script).
Hope it Helps,
Isabel Santos
- Original Message -
From: Ern Marshall [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Sent: Tuesday, July 06, 2004 12:18 AM
Subject: [WSG] Footer
I am very new to CSS, I have curently built a external style sheet for
my page at
http://www.hotkey.net.au/~marshalle/
Which works very nicely, But I have tried to find out how to add a
footer to the page.
I.E. to place a link back to the home page and a link to my guest
book. This would be placed in the external style sheet so that it would
appear on every page
But to no availI just can't seem to get it right
This is as far as I have got with the CSS
http://www.hotkey.net.au/~marshalle/BASIC5.css
Can you be so kind as to piont me in the right direction
--
Ern Marshall
In Vietnam we have lived hours of fraternal, warm and exalting nobility.
Here for a few days we have ceased to be slaves and have really been men.
It is hard to return to servitude.
http://www.hotkey.net.au/~marshalle/
*
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] 100% height columns - problems again
Quoting a recent post of mine on
http://www.webxpertz.net/forums/showthread.php?t=29509:
A 100% height table is 100% of the body. And the body is smaller then the
screen, so the table goes up to the bodys size.
Now, if you want a table to fill the whole screen, you must define 100%
height of the screen for all the containers. The container of the table is
the body, the container of the body is your html.
So if you declare on the head of the document:
style type=text/css
html,body { margin: 0; padding: 0; height: 100%; }
/style
you'll be able to center your design.
(You can add that right after your Mozilla only declarations in the contents
css)
You can get more info in: http://www.quirksmode.org/ on CSS under Tasks.
Hope it helps,
Isabel Santos
- Original Message -
From: Razvan Pop [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Sent: Monday, June 28, 2004 3:58 PM
Subject: [WSG] 100% height columns - problems again
Hello.
Never managed to make left and right columns with 100% height.
Please take a look here:
http://seoed.cpea.ro/seo-terms-glossary
and tell me if you have some ideas.
CSS files:
http://seoed.cpea.ro/stylesheets/left.css
http://seoed.cpea.ro/stylesheets/right.css
http://seoed.cpea.ro/stylesheets/content.css
Regards,
Razvan Pop
http://www.seoed.com
http://compliant-websites.seoed.com - Standards Compliant Websites
Directory
*
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] Fw: print page
Dear Maureen Beattie, As Neerav Bhatt said, printing pages exactly as they appear on the screen isn't possible. Eventualy you could use a script to resize print screen images, but you would have to call users permission, an rely on their machines capacitys. Yet, you can give alternative pages for print to the sites users. If the site isn't dynamic, you can make versions on msword, as save them as HTML filtered. Web pages produced on word will carry some non standard css declarations like the size of the page, and measures in non standard units like cm. Cleaning up the code isn't easy, though, this pages carry most word styles you have defined on the program. The tag for the alternative print page will be something like: link rel=alternate media=print href=youralternativepage where youralternativepage can be an office document or any html. The html documents produced on word by saving them as html filtered will carry the following tag: meta name=Generator content=Microsoft Word 11 (filtered) and will carry a word like icon if you look for them on the hard disk. This isn't a clean method, print version pages will be heavy and hard marked up, but it gives supporting browsers all needed information about the printing jobs. If the site isn't relying on images to define the layout (since images sizes on screen depend on the screens resolution) you can use another (much better) method: If you use media=print on a css call or @media on inline style declarations, you are defining styles that will only be used for printing. If you then define the pages as liquid layouts, the probability that they will print well on paper will be quite higher. A call for such a style sheet would be: link rel=stylesheet type=text/css media=print href=print.css and an import one: style type=text/css media=print, handheld@import basic.css;/style This will only work for browsers supporting css2 though. Hope it helps, Isabel Santos - Original Message - From: Maureen Beattie [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Thursday, June 24, 2004 8:24 AM Subject: [WSG] Fw: print page Hi everybody - my client wants the pages on her site setup so that they print out exactly how they look on the screen. At present the short pages are printing okay but the longer pages are leaving paragraphs out. I would appreciate it if someone could explain how to set this up or point me to a tutorial on the subject. Regards Maureen Beattie * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
