RE: [WSG] Must Read
Whatever the technique, using images for headings is, to me, backward, "pixel perfect", print thinking. I visited the site - I only have a modem connection. I dind't like the way the headings disappeared, got replaced with image placeholders which slwly filled up with text that was there in the first place. Perhaps I am a lone voice in the desert, but why go back to 1990's style websites when we have CSS? Is it necessary to make people wait, just so you can show them the font YOU like (and they might not be able to see anyway)? Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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 Text...
G'day Use instead of Use instead of Don't underline text - it will look like a link and confuse people > So a bold italic word which is also underlined is just: word Try Word Or if you use the combination a lot, set up the element to have bold italic text in (graphical/text) browsers. The problem with and is that it's presentational. and on the other hand have semantic meaning (especially when using assistive technology like text-to-speech converters). Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] iFrames vs Scrolling Divs
G'day > So I've read that Scrolling Divs is the way to go vs. iFrames, > but what about in the case of wanting to call a new page into > the iFrame? iFrame is valid XHTML 1 Transitional (and Frameset) but it is not available in the Strict DTD (and probably won't be available in future recommendations of XHTML). To embed a document in Strict, use the object element. Something like: See www.w3.org/TR/html401/present/frames.html#edef-IFRAME And www.w3.org/TR/html401/struct/objects.html#edef-OBJECT I do recall reading somewhere that it's possible to link a div to an external source (it used an attribute like "data" or "src") but I think it was a Netscape-ism. Regards -- Bert Doorn, Better Web Design www.bwdzine.com Fast-loading, user-friendly websites * 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] IES and Firefox issues - Link included
> Firefox will not display scroll bars when the tree expands beyond the dimensions of it's containing div. My theory: the auto height on #tree_menu_container expands the container to fit the content. Therefore the browser sees no need to add scrollbars. > IE will play silly buggers with my main content area. Probably a combination of the 100% width + 1px border on the table (which presumably will have tabular data). Try removing the table width, changing it to 99% and/or removing the table border. Incidentally, the javascript locked up MSIE for over a minute (after initial loading) and it was loading something like 180 files (presumably images). Ouch. Regards -- Bert Doorn, Better Web Design www.bwdzine.net Fast-loading, user-friendly websites * 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] Titles Acronyms Abbr etc
G'day > Looks distinctly like a case of totally unnecessary to me but we have > a difference of opinion in the office... Even if it was written as VDS, it would be an abbr(eviation): VDS A couple of other points to consider: 1. Is the use of h5 appropriate here within the document structure, or are you only using it to format the text? 2. Most browsers can now use id for internal anchors, so the might be unnecessary. If you're not linking to the anchor, and it's not a heading for a section, I'd just write: Vent Door Systems If h5 is the appropriate heading level and you do want to link to it internally, I would write it like this: Vent Door Systems Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites --- Outgoing mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.725 / Virus Database: 480 - Release Date: 19/07/2004 ** Scanned by eScan Anti-Virus and Content Security Software. Visit http://www.mwti.net for more info on eScan and MailScan. ** * 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 graphic in header with CSS
G'day > http://town.camden.me.us/fire/test%5Ffolder/ > I'm trying to place an image to the right of > the header text ("Camden Fire Dept.") I would make the image a background to the header div, if it's only there for decorative purposes. #header { background: #c00 url(graphics/shared/header_graphics.jpg) right top no-repeat; } Or if you want it shown 400px from the left, you could try: #header { background: #c00 url(graphics/shared/header_graphics.jpg) 400px 0 no-repeat; } > Ideally, the contents of the header should not > wrap no matter how small the browser window is. The way you have done it, people who visit the site at resolutions like 800x600 (which is still somewhere close to half the surfing public) will get a horizontal scroll bar (or wrapping). By putting the image in the background, you can overcome that issue - the header div should no longer get wider than the viewport and it shouldn't wrap (except at extremely low resolution, like lower than 640x480) Regards -- Bert Doorn, Web Developer Better Web Design www.bwdzine.net Fast-loading, user-friendly websites ** Scanned by eScan Anti-Virus and Content Security Software. Visit http://www.mwti.net for more info on eScan and MailScan. ** * 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 first message and my first step
Hi > The problem is the right menu look more right in > Mozilla Firefox, in IE look good. > The test page is in http://diego.igloo.cl/test/ I believe your problem is in the style rule *>div#sombra which sets the container's width to 708px. This is greater than the sum of lado_izquierdo (492px) and lado_derecho (200px). 492+200=692. Since MSIE does not understand the rule *>div#sombra, it does not apply the 708px width. Firefox does apply it, so lado_derecho, which is set to position:absolute;right:0px is 16 pixels further to the right. Incidentally, you can reduce your CSS somewhat by using shorthand notation for your margins. Instead of: margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; You can write: margin: 0 auto; Note that for 0 length measurements, the unit (like px) is optional. Regards -- Bert Doorn, Web Developer www.bwdzine.com / www.betterwebdesign.com.au Fast-loading, user-friendly websites ** Scanned by eScan Anti-Virus and Content Security Software. Visit http://www.mwti.net for more info on eScan and MailScan. ** * 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] Hacks
G'day As others have said, there's usually a way to avoid using hacks. I try to steer clear of them. I do (these days) import style sheets to hide them from V4 browsers - a beneficial side-effect of using a perfectly acceptable method of adding CSS to an (x)html file. Using conditional statements to get MSIE to load another css file is handy too. To me neither of the two above are really hacks. I use these occasionally (mainly for MSIE's lack of support for position:fixed) but that's about as far as I will go. I won't use hacks that use backslashes, rules hidden in comments etc, because they rely on bugs. What happens if the parsing bug that the hack relies on is fixed but the rendering bug that made the hack necessary remains? Is it such a big deal if a site doesn't look 100% the same in a few browsers? The site in my sig may suffer from it - seems OK in Firefox, Opera 7.5 and MSIE6, but might have some problems in MSIE5.x and certainly will look different in MSIE/NN4. No idea about Safari but I'm guessing it's OK. Regards -- Bert Doorn, Better Web Design www.bwdzine.com Fast-loading, user-friendly websites ** Scanned by eScan Anti-Virus and Content Security Software. Visit http://www.mwti.net for more info on eScan and MailScan. ** * 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] HTML & CSS references
G'day > What I need to use Firefox or Safari exclusively is a replacement for > the Mozilla sidebar references for (X)HTML and CSS, I guess in the form > of a website, or downloadable reference to be used in a browser. Have a look at www.zvon.org - they have downloadable references for CSS1/2, XHTML and more. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites ** 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] Image size--where should it be?
G'day > I am new to CSS and I am not sure if the image size > (width and height) should appear in the HTML or be > handled by CSS. Thank you. Width and height are valid attributes for images in HTML and XHTML, even in the Strict flavour. The only time I would specify it in CSS rather than HTML is if (A) all or most images on the page(s) are the same size or (B) for an image (like a logo) that appears on every page (and not as a background image). Other than that, I would still use the HMTL attributes. Regards -- Bert Doorn, Web Developer Better Web Design, www.bwdzine.com Fast-loading, user-friendly websites ** 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] Form fields in navbar causing IE to expand size of bar
Hi > tag causes some issues with IE. > Any ideas as to what would be the best way to approach this? Remove margin and padding from the form and all should be well. #searchform form { margin:0; padding:0; } Regards -- Bert Doorn, Better Web Design http://www.bwdzine.com/ Fast-loading, user-friendly websites ** 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] Question to the others ...
G'day > Firstly, what kind of measurement is ex? http://www.w3.org/TR/CSS21/syndata.html#length-units Relative units are: em: the 'font-size' of the relevant font ex: the 'x-height' of the relevant font px: pixels, relative to the viewing device I tend to use a mixture of em and px. Have never used ex but it may have its uses. > I have never seen that before. Secondly, how would a > fluid width layout work with a faux column like I've > used?I guess it wouldn't. Eric Meyer may have a solution. http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/ My own point of view (purists won't agree but I can live with that): if it's easily done with a simple, css styled table, why go out on a limb with complex CSS and background images. In many cases the difference in download is minimal, and without the need to download a background image, the (single, not nested) table approach can be more efficient. I prefer not to use background images if all I want is a plain colo(u)r. > Since the graphic is 780px wide, surely the container has > to be 780px wide too. No? If the image is presentational only, make it a background (perhaps ironic given what I said above) Otherwise you might try specifying its size in em's so it will scale up/down as appropriate. 780px is too wide for many people who still run at a resolution of 800x600. Why annoy them with horizontal scrollbars? Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au Fast-loading, user-friendly websites. ** 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] Another body tag question ...
G'day > body{font:84%/1.2em arial,sans-serif;direction:ltr} > What's the point of setting the body font at 84% of 1.2em? > (which is what I assume is what's happening). Your assumption is incorrect. The 1.2em refers to line height. See http://www.w3.org/TR/CSS21/fonts.html#font-shorthand Regards -- Bert Doorn, Web Developer Better Web Design www.betterwebdesign.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Faux columns not staying horizontal
G'day > My website at http://mavos.net/ is messing with my head. ... > right column falls down below the content. > Any ideas why this is happening? It's driving me crazy. Looks like the "IE Doubled Float-Margin Bug". As a result of the double (left) margin, there's not enough room for your #menu div within the #container div so MSIE drops it below the #content div. See http://www.positioniseverything.net/explorer/doubled-margin.html for a description AND a solution. Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Validate Inside Your Firewall
G'day > No, no - not validation. Accessability. > Things that are easy to check at eg. http://www.hisoftware.com/accmonitorsitetest/ Your answer (or one of them) is in your question. HiSoftware actually provide software you can run on your local PC or server. I haven't used it myself, but they do have a downloadable demo of AccVerify / AccRepair for (gasp) FrontPage and MS Office.. > http://bobby.watchfire.com/bobby/ > .. but these both require the checked item to be web accessible. Looks like Bobby is available for purchase as well, plus Watchfire have WebQA which also mentions accessibility. (No, haven't used that either - just reading it on their website) Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Header cut short
G'day > On my main page have just noticed that the header doesn't quite > reach all the way across the screen and neither does the header bottom > border. Not quite sure what you mean, but at 800x600 you would only see part of the background image and at 1152x864 and above, it repeats. A background image will not resize to the window width. I would set that background to not repeat horizontally, and give the header a background colour that's the same as the right-most part of the image (e.g. white, #fff). Do the same for the footer. background: #fff url(redtemp1100.gif) repeat-y; As an aside, you could change the height of the background image (say to 1 pixel) and give it more colours so it's not as "banded" while keeping file size the same (or even make it smaller). Unless that "banding" is deliberate of course. Can email an example off-list if you like. > For some reason on my screen (800x600 res) there is the > smallest bit of horizontal scrolling, though it should > not be necessary and I don't know why it is there. Is > there a way to get rid of it? I get a small amount of horizontal scrolling at any resolution, even 1280x1024. It's because of your padding on the footer div. The box model adds the padding to the width, so you end up with 0.25em + 100% + 0.25em. Change it to padding: 0.25em 0; and the scrollbar should disappear. Should not matter for the content as it's centered anyway. HTH -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Site review - www.caexpo.com.au
G'day Just a couple of comments. Some of the text (e.g. on the agenda page) is illegible (fuzzy, light grey text) in Firefox on my PC. I don't want to start another thread on that, but this is about the smallest text I've ever seen text on a site. It's so small, I need to guess what it says (unless I start playing with browser settings, which I then have to undo again when I go to another site). Also, don't you want people who have JavaScript enabled to provide feedback? Regards -- Bert Doorn, Web Developer Better Web Design www.betterwebdesign.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] using br - was [ image captions?]
G'day > That's what I intended of course, but I wasn't sure how to > get the text underneath the image. Am I really allowed a > then? Isn't that considered 'presentational? Matter of opinion, but I do use br elements for this purpose and I can still sleep at night. If nothing else, it separates the image's alt text from the caption (in non graphical browsers). If you don't like the br in there, you could set the image to display:block and if you want the text centered, put text-align:center on the div. Using the earlier example (though the class name sounds presentational to me): xHTML: caption text CSS: div.imgleft { width: 200px; /* or whatever is appropriate */ float:left; text-align:center; } div.imgleft img { display:block; } Regards -- Bert Doorn, Web Developer Better Web Design www.betterwebdesign.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Re: image captions again
G'day > Ignore my last message - I realised I'm putting a block > level div in an inline Duh! :-) > But I don't know how to get around it . . . . Close the paragraph before you open the div and start a new paragraph after the div. Putting the image with alt and caption inline (with span as suggested by Gary) may work, but you may get some strange effects in non graphical browsers (search engines, assistive technology): ...convallis ornare, tortor A picture . . . nibh ultricies ante... Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] It's so frustrating. Webstandars, accesibility and Firefox as a sales argument.
It's also frustrating to get emails with microscopic text (accessibility issue). Text/plain please? As far as your dilemma goes - don't lower your standards (pun intended) for the sake of getting work. If you can't convince them, let them go. Maybe they will come back when the site they get doesn't do what they need it to. If the lack of traffic from Google is one of their main reasons to redo the site, tell them (in broad terms) why you think Google doesn't like the site. Show them examples of sites you have made (the standards way) that do have good listings in Google. Maybe that will open their eyes. If not, move on. Oh, and yes, the site does show up if one searches for s2store. Great if people actually search for that "word", but otherwise about as useful as an ashtray on a motorcycle. My site is usually #1 of 15 million+ for my business name too - brings me 1 visitor a month if I'm lucky. Regards -- Bert Doorn, Web Developer Better Web Design www.betterwebdesign.com.au ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Defining A Definition List
G'day > So I should simply use the "traditional" > blah > blah > mark-up for my purposes? To my thinking, if there's a collection (list) of articles, each with a "caption" or "title" and a summary paragraph, using a (definition) list makes sense, as it allows you to group "related" items (a bunch of news items). If there's only ever going to be one news item (e.g. you just want to show the latest news), I'd stick with the traditional heading and paragraph(s). Is a list with one item really a list? Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites ** 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] Defining A Definition List
G'day again Peter > Yes absolutely. If there is one person in a room and you > are asked to list the names of the people in the room then > the list will have one name. Just to clarify my point. I did not mean to ask whether it is "possible" to call a list of one item a list. More a question of "why would you call it a list" and in HTML terms, why use the extra element. If we take this further, we might as well make every section in a html document (heading and paragraphs below it) a definition list and forget about headings and paragraphs. In fact, why not just make everything a div, span or object, so it all becomes very generic. (No, I'm not advocating that approach) > So many ways of grouping related items are correct, and without > further information on the differences we're just guessing. By > all means though if one looks better or suits a personal > preference then just use it, but it's not like we can draw any > best practices from this. Sure, it's personal preference, just like using tables nested n levels deep, often replacing a single paragraph with a complex table (no, I don't advocate that either). I'm sure we've all seen examples of this (ab)use of tables. Are definition lists in danger of replacing tables for layout? Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au Fast-loading, user-friendly websites ** 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] [Question] W3C Recommendations Level X,Y,Z?
G'day > Got a question about W3C recommendations and drafts. Let's say I'm > reading the recommendations for DOM Core Level 1 and 2. Does Level 2 > cover Level 1 and its own additions or does it say "we only cover > the new stuff and whatever we specifically override in Level 1"? >From http://www.w3.org/Style/CSS/#specs : CSS level 3 is under development. It includes all of level 2 and extends it with new selectors, fancy borders and backgrounds, vertical text, user interaction, speech and much more. CSS level 2 revision 1 ("CSS 2.1") contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things. At this moment, February 2004, it is a Candidate W3C Recommendation. CSS level 1 (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need. [Also in PDF] Hope this helps -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] inline list issues on MAC IE
G'day > The design is fixed height by client request. They were given the options of > overflow:scroll, :auto or :none, with the implications of each and they chose > none. Sometimes even the strongest of arguments cannot get a client to > realise that not everyone views a site at 1024x with fonts set to small :( So they like Manufacturing Best Practice, but not web best practice? Perhaps you could overcome it by using em rather than px. Find an em size that's equivalent to px settings in your client's browser (e.g. 20em). Best of both world - they get what they expect and it will still be scaleable for the rest of the world's population. Incidentally, with images disabled, the nav bar disappears (I'm using Firefox 1.0 on Win2K). I can't read white text on a white background. Suggest you put a background-color on the links, if not on the whole header. Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Images in Nav, Splash Screens.
G'day > 1. They want to use a full page graphic Splash Screen, which displays > the brand in all its glory before the user can enter the site. My opinion: * Waste of space * Waste of bandwidth (at the server and user's end) * Annoying. I don't have stats on it, but know many people who get annoyed by them (myself included). If there's a "click-through" and I'm still interested after the annoyance, I click on it immediately. If not, I leave. Here's some links you might show the client: http://www.websiteoptimization.com/speed/tweak/splash/ concludes: "Splash pages can backfire with users. Rather than enticing them to explore further you repel them clicking and screaming. Splash pages decrease performance, credibility, traffic, and search engine rankings. Bailout rates up to 71% have been reported with some splash pages. If you must use a splash page, make sure it loads quickly, provides bypass links and keywords, and optionally uses cookies to display it just once." http://www.webpagesthatsuck.com/amazon.html "Would Amazon.com use that design element on its site?" > 2. They want to use images in the Navigation bar to > give tight control over the fonts, instead of text. * They have no control over me turning the images off * The site will take longer to load * Poor eyesight? Can't read the buttons? Can't increase the text size, so I leave They talk about "old school". Using images for links, just to show a fancy font, is about as old school as it gets. I can't remember the last site I did this on - must be years ago. Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 site is broken in Opera
G'day I don't know if this is part of the problem, but have you heard of headings, paragraphs and lists? Everything on the page is a div or span with a class attached. Not very semantic to make everything a div ("generic language/style container"). Might be valid, but is it "correct use" of the elements? What I see in opera appears to be paragraphs (well, divs) that are wrapping over themselves. Perhaps something to do with line-height. All-up, it's some very complicated CSS for what seems a very simple site (OK, I only looked at the home page) Incidentally, when I went to the site in MSIE, it asked me what program I wanted to open the page with, rather than displaying it. Probably related to your Content-Type: application/xhtml+xml Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Alan Trick Sent: Friday, December 03, 2004 1:18 PM To: [EMAIL PROTECTED] Subject: [WSG] My site is broken in Opera Hi, I finished a nice update for my website, added a browser detection script on my css because IE doensn't like web standards. Now my site works in all the browsers I have exept for Opera, and I don't know why, can anyone help me with this? the url is http://jellybean.uni.cc n.b. it uses style.css in firefox/mozilla, and styleie.css all other browsers All the pages on the site are valid xhtml+xml and both css files are valid. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** Scanned by eScan Anti-Virus and Content Security Software. Visit http://www.mwti.net for more info on eScan and MailScan. ** ** 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] Using in a
http://www.w3.org/TR/html4/present/graphics.html#h-15.2 While this is HTML4 spec, the same would apply to XHTML1.0. The important things to note is: "The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets" (followed by a list that includes the "small" element). Further, I don't see it in XHTML Basic (http://www.w3.org/TR/xhtml-basic/) specs: Text Module* abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var Seems logical to me that big, small, b, I and u are to be deprecated, since they have a distinct "presentation" flavour. Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 site is broken in Opera
G'day >> Incidentally, when I went to the site in MSIE, it asked me what program I >> wanted to open the page with, rather than displaying it. Probably related >> to your Content-Type: application/xhtml+xml > Really? What version of MSIE do you have? I've loaded it many times in mine (6) and I've never gotten that. MSIE 6.0.2800.1106IC - fully patched but otherwise stock-standard (no plug-ins, not even a Flash player). I don't get this problem on other sites, so it's possibly something to do with the MathML or application/xhtml+xml (if you're feeding that to MSIE). I get a "download" dialog box in MSIE. Perhaps you have a plug-in of some sort installed for the MathML (which the vast majority of people would not have) so it displays fine for you. Extract from http://www.w3.org/Math/implementations.html : "Viewing web pages containing MathML requires a browser that can display MathML. Currently, only Netscape, Mozilla and Amaya can display MathML directly. If you use Microsoft's Internet Explorer, the best solution for MathML display is Design Science MathPlayer." Also, if I go to the Quiz #1 page, in Firefox (1.0), I am told to install additional fonts. In Opera (7.54), on that same page, I see a lot of code/Markup and get a message that XML Parsing Failed. Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Advert Banner, no validation.
Hi Genau Who puts the link into your (x)HTML? If the advertiser give you the link and you paste it into your page, you just need to make some minor adjustments. The validator tells you what the problem is: If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!). The validator also provides a link to a resource with more detail: http://www.htmlhelp.com/tools/validator/problems.html#amp If the advertiser is adding the url directly into your page, perhaps ask them to fix the code (send them to the url mentioned above if they don't understand, or give them a properly coded example). They may not be interested, but you can try. Hope this helps -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] alt or title...
G'day >> It's good practise to have the title attribute also on images (in >> addition to the ALT), as some browsers won't display the ALT Text as a >> tooltip. > Does that validate? I didn't think title was a valid attribute for the img tag? Should do: >From http://www.w3.org/TR/html401/index/attributes.html: Title: All elements but BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE See also http://www.w3.org/TR/html401/struct/objects.html#edef-IMG which says the img element can have core attributes The title attribute is one of them: http://www.w3.org/TR/html401/sgml/dtd.html#coreattrs Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] Table-less site not displaying in Mac IE?
I'm stumped on this one (partly because I can't see the problem myself as I don't have a Mac and can't afford one) www.naturalhealthacademy.edu.au is valid xhtml1.0 strict with valid css. It looks fine in MSIE6, Firefox 1.0 and Opera 7.54 (on PC). Also appears to be fine on Safari (per Dan Vine's iCapture) However, my client reported the following feedback: "A colleague of mine in Canberra is unable to get our website up. He is running Macintosh OS 10 and MS explorer" My client is concerned he may be losing a few visitors a month.Good ole MSIE on Mac... Of course, I could fix it by using a table for layout, but in the spirit of web standards I'm trying not to. Could someone with Mac IE have a look at the site and tell me what they see (or don't see)? Email me off-list if you like. If you do see a problem please let me know what you see (or don't see). If you have any ideas about the cause, I'm listening. So far, all I can think of is that it's something to do with margins or fixed/absolute positioning, but I could be mistaken. As an aside, is OS 10 the same as OS X? Thanks in advance -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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: Off with your JS (was Re: [WSG] Best approach (new question))
G'day > Do the 'Bob-The-Office-Worker', and the 'Mary-The-Surfing-Homemaker' (or vise-versa ;) ) types really know about this stuff? Maybe not, but Bob-The-Office-Worker's Directors may have instructed the IT department to cripple the browsers on all their employees' workstations. They may also have set all the PC's to a common resolution of 800x600 at 256 colours. I have been out of the regular workforce for nearly 4 years, but in my last regular job we had just that scenario. About 200 employees around the country (with the exception of the IT department) had no control over it. Flash was also taboo, because animations worked very slowly (or froze the terminals) with the setup they had. Bottom line: use JavaScript, flash etc for embellishment if you want, but make sure the site is "accessible" without it. While I'm at it - hide CSS from browsers that belong in the museum (as an exhibit, rather than a tool). Nothing wrong with plain text if the document is well structured (OK, graphics designers might disagree) Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Site review plz
G'day > The url: http://www.azapi.com/ Reviewing the home page only. Firefox 1.0 on Win2K, dial-up connection. The page took a long time to load. Looks like one of those "if you don't have cable or ADSL we don't want your business" type of sites. It does look good when it eventually finishes loading, but "Truly a flexible CMS - Azapi makes publishing online content a breeze" seems to be the only real content. This seems to be little more than a slow loading splash page as it tells me nothing, forcing me to go to other pages after I've waited half a minute. You have a limited time to get the visitor's attention. Put them on hold for 30 seconds (while there's nothing for them to look at) and you may have wasted an opportunity. Of course, I cannot speak for everybody (please, no "me too" responses on the list?) I don't have a problem with graphics per se, but use them lightly, unless you don't care about modem users. Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 img border padding error
G'day > http://www.xert.com.au/workshop/pbyron628/ > The problem is that the 5px padding around the images > does not show in IE Win 6.0. Not sure how it looks in IE Win 5.5. I'm not quite a CSS expert, but I'm not sure that images, being "replaced elements" can officially have padding, since padding goes "inside the element" You might try this instead: #sidenav p img { margin-top: 0; border: 5px solid #fff; } Or if you want a double border, as it seems, size the paragraph, give that the white background and 5px padding and leave the 1px black border on the image. But maybe I'm wrong about padding on "replaced elements" and it's just that IE doesn't like it. Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites . ** 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 img border padding error
G'day > I am following, to some degree, Russ' tutorial: > http://css.maxdesign.com.au/floatutorial/tutorial0208.htm > So it is possible to style an image to have padding and a border. I don't see image padding mentioned, at least not on that page. > Just not sure why my version isn't working in IE Win. Could be that IE doesn't support it padding on images. See below. These issues may have been fixed in later versions of MSIE and Opera but why not try padding the container instead? Should work in "almost anything" *According to http://www.blooberry.com/indexdot/css/properties/padding/padding.htm : MSIE4+: Padding properties do not apply to images NS4:Applying padding values to a replaced object (my test was an IMG element) really messes with document content flow Opera 3.5: Padding is not applied to replaced items (IMG, form field widgets, etc.) Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 img border padding error
G'day again. > The CSS code on Russ' tutorial highlights the padding as per below: > .floatright > { ...snip... > padding: 10px; /* This line uses the padding */ > border: 1px solid #666; > } As I've been saying, that's the container, not the image: Caption here ..not... > I have used Russ' technique here: <http://www.xert.org/> and it works > well in IE Win. Still a mystery to me why it won't work here: > <http://www.xert.com.au/workshop/pbyron628/> Seems an overly complex and totally different setup to me (background images, lots of spans and classes, no img element with padding). Anyway, it's up to you what you do :-) Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Changing Standard part2 !!!
G'day > At this time we have to know what we want for the future of the web. > When I build a cederom it is to bring information in an other way than text. > It must be the same with web. I hear what you're saying. If and when we get to the point that everybody has cheap, reliable, high speed access to the web without download limits, the next generation web might well replace TV and Radio. It might even put cinemas out of business. I don't see that happening any time soon though and expect that a lot of people still want to read words (be that on paper or on screen).Why are people still buying books, magazines and newspapers when we can present that same information on a website, even now? Unfortunately, flash etc, which go well on a CD Rom would exclude (at least, at this point in time) a huge number of users.If I want to see movies, I watch TV or hire a Video or DVD. If I want to hear music, I switch on the radio or listen to a CD (or tape, or old-fashioned record). I use the web to seek information and like many people I can only get dial-up (or a very expensive satellite connection) where I live. I avoid sites that use bandwidth-hungry (non text) content (the back button on my browser is very handy there) because most of the information I seek is fine as words and pictures (and I am impatient). Of course, this is just my opinion and I'm sure there are flaws in my argument :-) Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Float problem (perhaps) in IE 5 on www.mccn.org.au
Hi Nick > http://www.mccn.org.au/ Can't help you on the MSIE 5 issue, but I an provide some comments (looked at the home page only). Overall, I like the way you've done this. Being a "minimalist", all those images for bullets do seem a little archaic. You should be able to achieve the same with css (non repeating background image and padding on the li/dd for instance). If nothing else, it cuts down on code and makes it easier to change the look of these lists later. Also, if I reduce font size even one notch, those lists start to indent with a cascading effect. Using a background image and padding might resolve that issue too. I note you have a form inside a fieldset. That should really be the other way around (the validator doesn't complain about it, but it's back-to-front) . Finally, you have quite a few paragraphs with all content phasised. If it's that important, why not make it a heading? If it's purely for presentation, why not just apply an italic style to the paragraph? Similarly, why are your headings h4 when there's no h2 or h3 on the page? Curious Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 Site
G'day My site is http://www.dotradio.uni.cc. What can I do to improve my site? Is there anything wrong with it? Thanks for your help. Validate, fix, validate, fix, validate, ... You might start by changing the Doctype to HTML 4.01 Transitional and fix the 19 errors (as opposed to 154 with the XHTML1.0 strict DTD you currently use on the home page). Once you've fixed those 19 errors, look at updating the site to HTML 4.01 Strict by removing all presentational attributes and making more use of CSS (but don't specify font sizes in pixels like you have - cannot be enlarged on MSIE). Beyond that, replace the nested tables with more structural markup and (optionally) update it to XHTML1.0 Strict. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] IE6 Doctype Quirks Mode
G'day Patrick H. Lauke wrote: Never include the declaration. This throws IE into quirks mode right away. If you use server side scripting (ASP, PHP or whatever - not going into scripting detail as that's off topic) to serve an xhtml document in text/html or application/xhtml+xml as applicable, it's not hard to take care of the prolog . Insert the prolog if serving as application/xhtml+xml, leave it off if serving as text/html so MSIE6 does not choke. If you are just serving the document as text/html, the browser should not parse the document as xml, so the prolog is superfluous. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Affiliate link code validation errors
Will Jensen wrote: The problem is that the link does not validate in XHTML 1.1. This same problem shows up on many other sites using affiliate links for all kinds of products, not just for Opera. It's a very common problem and I believe the validator gives you a link that explains how to fix it, right after it tells you there's a problem. Perhaps you missed it. All you need to do is code the ampersands as & and it should validate (unless there are other errors of course). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Affiliate link code validation errors
Will Jensen wrote: I am concerned that if someone uses the 'corrected' link to go to the Opera site, that the use of "&" will cause an error in the affiliate ID registration process... Or is this just foolishness on my part? The only foolish question is the one that's not asked, although the answer was only a click or hover away (on your encoded link) Click on your encoded link and see what ends up in your address bar Browsers translate the & to an ampersand when you click on the link (or even hover over them). I have used this for years and have gone much further with encoded mailto: links that look like gibberish in the HTML. It's always worked fine. What does a browser show when you put > or " in your HTML? Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ fast-loading, user-friendly websites ** 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 alignment issues
G'day If you look at the homepage - http://www.e-oddie.com/ - I'm having problems laying the content out. I'm trying to centre the image on the page both horizontally and vertically. Then, within the panel, I'm trying to vertically centre the text. Unfortunately I'm not achieving either and am getting different results between IE6 and FF1. vertical-align only applies to 'table-cell' elements and in some cases inline elements. Putting vertical-align on a div has no effect (or is not supposed to) You could trick Firefox and Opera 7.5 (and perhaps some Mac/Linux browsers Like Safari, Konqueror etc) by setting the html and body elements to 100% height, giving body a display:table and panelContainer a display of table-cell and vertical-align:middle. Doesn't have vertical centering in MSIE but should still be usable otherwise. I can email you a sample file off-list if you like. Just a couple of other comments if I may: 1. Have you thought about using a definition list instead of an unordered list with (seemingly misused) h1 and h2 elements? 2. I'd compress the background image. Takes a long time to load on dial-up. 183kB for a background image is a ~bit~ much. 30-40k would be better and should be achievable without too much loss of quality. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Non-validation and web standards
G'day > As this does not validate, can I still claim to follow web standards? Matter of opinion really and depends on what the word "follow" means to you :-) Strictly speaking, I'd say if the (x)html or css is not valid, you're not following web standards. Others might say you are following them, but just not quite getting to the finish line. If the CSS does not validate, you certainly should not claim to have "Valid CSS". Some of the more involved hacks only target MSIE5 on PC. How serious an issue is having the layout look the same in that browser? Is this declining browser more important than writing valid, standards compliant css? I'd quote statistics, but you know what they say and many statistics don't differentiate between Mac and PC IE5. Perhaps there are other ways to fix problems with your layout, without using non standards compliant CSS. Perhaps the site would even be perfectly usable without the hacks, though it won't look quite the same. It all boils down to (at least for me) whether having the site look the same in a disappearing browser is more important than standards compliance. You could always put a (hidden with MSIE conditional comment which is itself a hack, yet valid) message on the home page, inviting people with MSIE4/5 to upgrade their browser (to a standards compliant one). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 CV
G'day > Does any one know of standards based resume templates.? I've > "Googled" until blurry eyed with no results. Don't know of any. However... > I would like to create something like the following: > http://www.ericd.net/ff2k2_ed/ed_resume.html > but, without tables. If the "t" word is the correct method, > than so be it. I'm still shy, even after reading the > specification, on when using tables is appropriate. Apart from the bits at the top being easier to set up with a table (though quite easy to do with 2 or 3 floating elements), why would you even consider using a table for this? The actual content could be done with headings, paragraphs and lists or if you don't like to use h1...h6 for some reason, you could use definition lists to keep terms (e.g. company name) together with definitions (e.g. positions held there). Tables should be used for tabular data, not for forcing text and pictures into columns and/or to indent/space text. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] A new year challenge - was [ Web Design in 2005]
G'day Can anyone who is really interested in web 'design' say that a site such as: http://www.fosterandpartners.com/internetsite/Flash.html 'sucks'? It certainly isn't standards material (it doesn't even have a doctype!) but the 'concept' is glorious. Well, maybe my idea of 'design' is different from yours. I see nothing 'glorious' about the concept of a small white box in the middle of my browser window that tells me I have to download a plug-in, without giving me even the slightest clue as to what the site is about. A mass of information, I see no useful information. Compare that with a typical cluttered 3-column layout with a graphics banner, text all over the place etc etc. "Click here to download plugin" certainly is clean and uncluttered. Can anyone of 'us' do this using purely valid xhtml and CSS? - that's your mission for 2005! It's easy to make an inaccessible site with pure XHTML and CSS but why would one take on such a mission? Regards -- Bert Doorn, Better Web 'Design' http:/www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] divs, layers, trans and strict
G'day > Both files validate OK, and so does the CSS, so why are they not behaving properly? - It's probably staring at me, but I just can't see it! Would any of you alert new year revellers take a look for me please? Strict version actually does NOT quite validate. However, the cause of your problem is case sensitivity: "digitalphotography" is not "DigitalPhotography" "pencil" is not "Pencil" "thisway" is not "ThisWay" Match the CSS and id's in the HTML (one way or the other) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Slow loading of CSS
It's called a Flash of Unstyled Content (FOUC) See http://www.bluerobot.com/web/css/fouc.asp (Found in Resources section of the Web Standards Group's site) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] External Links Won't Validate (URL Cleaner doesn't help)
Shane Helm wrote: I have a site that just went live: http://www.willlange.com/. There are 5 pages that have external links that cause the page not to validate. Suggest you read the explanation the validator gives (you are using the W3C validator?) rather than just the line that says there's a problem. The answer is right there. I quote: "Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&" (even inside URLs!)." Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] External Links Won't Validate (URL Cleaner doesn't help)
Shane Helm wrote: Did you test this link you just sent me because it doesn't work? That's the issue. When you change & to & the link no longer works. I am very familiar with the practice but it does not work with the site I am linking to. If I type a URL with &s (like below) into the address bar, it does not work (using Firefox 1.0). Following it from a plain text email may have the same effect. http://www.pcmls.com/willlange/cgi-bin/aa.fcgi?aacmd=results&id=dauckf&r=1&f=0&t=0 If I put that same link in an "a" element on a page, and I follow it, there's no error. http://www.pcmls.com/willlange/cgi-bin/aa.fcgi?aacmd=results&id=dauckf&r=1&f=0&t=0";>Whatever Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 PC Problem with
Shane Helm wrote: http://www.willlange.com/index.html between the top button that says "SUBSCRIBE TO OUR NEWSLETTER" and the 12px tan border of the header bar there is a green space where those 2 graphics aren't lining up. Got any reason why this is a problem? Can it simply be fixed in the external CSS file without changing every page of the site? Ouch, that page takes an awfully loong time to load (and that's with flash blocked) However... That's not what you were asking about. Try putting the image map (if it's really necessary to use that), somewhere else in the document, rather than in the flow, or remove the spaces inside the Seems that's the cause of the problem. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] being framed!
I haven't used frames for a long time... However, I believe it is possible to get a frameset without borders, by adding the following style to pages displayed INSIDE the frameset: html { border: 0 none; } No need for frameborder or (non W3C) border attributes. I believe it also works on documents displayed in iframes and objects. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] asking a PC user for a page check
Hi Thanks very much for your message and especially for the screen shot. Hm... now to figure out how to fix this mess. MSIE PC does not support position:fixed. You might try floating the menu to the left, or adding a small hack in for MSIE so it changes to position:absolute /* PC MSIE fix \*/ * html #menu { position:absolute; top:0; left:0 } Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] fonts
G'day The problem with custom font sizers is that they only apply to that particular site. And it only applies to one page (without resorting to the use of cookies, javascript, server side technology etc to remember the user's preference). Luckily I am one of the few "older guys" with poor eyesight who have discovered there are browsers other than IE. My $0.02 Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 ordered and unordered lists
G'day I am trying to have an unordered list that is styled nicely with an arrow graphic, however now I get the arrow graphic in my ordered list as well. Easiest way to fix: Change .mainleft li to .mainleft ul li so it only applies to unordered lists, rather than ANY li element. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Site Tracking and Validation
Hi Lori SO, question... is there a tracker that I can use that will still allow my page to validate? I use the same eXtreme tracker on my own site. I made some changes, it validates as xhtml1 Strict and still works. Main things were the & issue, escaping forward-slashes, adding alt attributes to the images and putting the noscript content inside a div. See site in sig (towards the end of the xhtml source). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Can I use a table in a form?
G'day Name: That's just rubbish. What the heck...? This sort of thing really is just replacing one inappropriate markup (tables) for another (divs and spans with css styling) and actually *diminishing* the structure...if anything, proper elements should be used... I'd have to side with Patrick on this one - using lots of spans with classes to mimic a table layout is (IMHO) even worse than using a table to lay out the form (and more spaghetti code) or ? or ? or ? But why not style the label to float left? Quick HTML snippet (incomplete): Contact Details Name: CSS snippet: label { clear: left; float: left; width: 14em; /* Add whatever formatting you want */ } I use something like this on the forms on my own site (which probably aren't perfect either, but I try). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 UL with Firefox
Hi Graham That looks like a very complex setup to display what is really a simple list of two items, with an image for a bullet. Perhaps the complexity is causing your problem (or the extra markup to highlight the problem is confusing me)? How about this approach: ul { list-style: none; margin:0; padding:0; } li { background: transparent url(whatever) no-repeat; padding-left: 30px; } Seems to work fine in Opera, MSIE and Firefox (on a quick test I ran) But maybe I'm missing something. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] iframe and HTML 401 strict.
berry wrote: How come the validator said that iframe is not a valid tag or can not be used with HTML 4.01 strict? I remember that I used in the past iframe without problem. iframe is not defined in the HTML4.01 (or xhtml1.0) Strict DTD, so using it in a strict document is not valid. Period. Whether it has worked "without problem" is not an indication of whether it is valid. There are millions of web pages that use invalid code and still "work" in most browsers. If you want to use iframes, use a Transitional or Frameset doctype. For similar functionality in Strict, use object: Text here for older browsers (perhaps a link to vide.htm) HTH -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 and background image
G'day not in ie. Anyone know? I can't give the url right now as it is totaledlate here .twikiLeftBar {background-image: url(/miner2.jpg); background-repeat: no-repeat; border-top:1px solid #ddd; color:#800; overflow:hidden; line-height:1.3em; } Hard to tell from this code snippet as there may be elements inside this "box" and rules that affect it. At a guess, adding a width and/or height might help, especially if there's floated elements inside the "box". Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] valid table tags for xhtml strict
G'day I'm looking for a list of valid attributes which can be used with tables in XHTML strict. Best source would be the actual DTD at the World Wide Web Consortium. However, as that can be a bit hard to read, I recommend you have a look at www.zvon.org - you can use their XHTML reference online or download it. Also, whereas 'align="center" cannot be used as a table attribute it is perfectly valid to say . I can understand that this because it relates to the DATA (not the box), but it can be confusing. I am surprised to see the align attribute (and valign) are still valid on some elements in the strict DTD. To me, they are presentational in nature (why would one "align" data other than for layout/presentation?) Kornel - you might like to double-check your statement that "It is not valid in XHTML/1.1 or any Strict [X]HTML version." http://www.w3.org/TR/REC-html40/index/attributes.html indicates that the "align" attribute it is *NOT* deprecated for COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD and TR. Neither is valign. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] meta tag standards
G'day Is there anything wrong with closing meta tags like so: I was wondering if there was actually anything wrong with closing it in a separate closing tag. http://www.w3.org/TR/html4/index/elements.html Scroll down to META. Look at the third column (which is for End Tag). It says "F", which means FORBIDDEN. It is also an "empty" element, just like IMG, INPUT, BR, HR (to mention a few obvious ones). http://www.w3.org/TR/xhtml1/#C_2 says: Include a space before the trailing / and > of empty elements, e.g. , and . Also, use the minimized tag syntax for empty elements, e.g. , as the alternative syntax allowed by XML gives uncertain results in many existing user agents. So yes, I'd say there is something wrong with , just like there is with and HTH -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] valid table tags for xhtml strict
G'day Felix Miata wrote: That wasn't my point. The expected result is readily achievable with no CSS at all. The few cell alignments that would deviate from the norm in any given table would require no significant difference in file size from those that require CSS classes for the same purpose, and the stylesheet itself would be just so much additional baggage. Let me rewrite... "The expected result is readily achievable with no *align attributes* at all" Am I missing your point or are you missing Kornel's and mine? Positioning (presentation) is expected in tables, much like H1 is expected to be quite large (presentation). So by your argument we would also need a "size" attribute on h1? Or introduce attributes "color" and "underline" for links? After all, people expect them to be blue and underlined. Guess what. We don't need such attributes because CSS can take care of it, keeping the (x)HTML document nice and clean. I thought the whole point behind (x)HTML strict was separation of content and presentation. Keeping "align" attributes does not seem to fit in. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] yet more valid table tags for xhtml strict
G'day cellpadding="5" border="1" rules="cols" frame="hsides" > and it is perfectly valid XHTML strict! ... So there you go! Border? frame? rules? All presentational at the end of the day, surely . . . It would appear that these attributes (which are presentational to me as well) will no longer be available in XHTML2: http://www.w3.org/TR/xhtml2/ http://www.w3.org/TR/xhtml2/attributes.html I don't see a need for most of these attributes any more, since the same can be achieved with CSS and they don't appear to have semantic meaning. Perhaps they were left in there because table rendering is a nightmare, with inconsistent browser support, especially for the col element, which is an oddity. Still. Why use when can be used? Or instead of ? Border, frame, rules, cellpadding and the like can also be done with CSS (better in Firefox and Opera than in MSIE, because MSIE does not support the CSS "border-spacing"). The bottom line for me is... If it can be done with CSS, use CSS. If it can't be done reliably and the lack of browser support is a critical issue, use (still valid) Strict attributes in minimal quantities. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Forms, labels & headers
Hi, > are you asking why using tables for layout is stupid? :-) > http://www.hotdesign.com/seybold/ I know using multiple tables, nested "n" levels deep is stupid and results in lots of excess code. So is using font tags etc. That's why I don't design that way. But sometimes it is (to me) unavoidable to use a table, because the alternatives just don't work consistently enough across browsers. Thanks for the link. http://www.hotdesign.com/seybold/14transitional.html sums it up for me, while the pages following it don't apply to sites I design. I've seen plenty like that, including a site that has a home page with 40k of HTML that includes 40 tables, some of which only hold ONE word (4 characters of content hidden in a total of 262 bytes of tag soup) Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] Forms, labels & headers
G'day > With Netscape 7.01 your select boxes are not working - they get > "selected", but the options don't drop down and cannot be chosen. Hmmm. Interesting. The "request a quote" page has valid XHTML1.1 and the CSS is valid too. It works fine for me in Mozilla 1.6 and Firefox (on Win2K and WinXP respectively). Is this ALL select elements, or just one or two of them? I might revert to tables for layout - no headaches with those. -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] Forms, labels & headers
Thanks Russ > > Stop! Before you do anything, the most important thing you can > do for your learning process is accept that a) it¹s going to take > time, and b) you will be frustrated along the way. Been there and I do agree in principle - I like compact code that makes sense. But if it takes me 5 hours of experimenting to get a "CSS Only" layout working in multiple browsers, I can't help but think "why bother". Especially when that same layout takes 5 minutes using tables and most visitors can't tell the difference. No, I won't nest tables 3, 4, 5 or (as with a template one of my clients sent me today) 6 deep with lots of other ancient artifacts in it. The template had no doctype and over 100 errors in HTML4.01 Transitional - an absolute shocker, yet it looked fine in all browsers I have access to (it was even usable in Lynx, which did report bad HTML) Anyway... Still puzzled why the selects in www.betterwebdesign.com.au/request-quote.asp don't work in Netscape 7. -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] Forms, labels & headers
G'day >> Especially when that same layout takes 5 minutes using tables and most >> visitors can't tell the difference. > You have a defined, repeatable process (even if it's only "fire up > $STEAM_AGE_WEB_PAGE_EDITOR") for making tag-soup web pages. What I was talking about is not tag-soup (although it depends on your definition) like the template my client asked me to use. I don't nest tables 6 deep or use elements like font and center or attributes like bgcolor. All I meant is to use a single table to define the overall layout, marked up with CSS to set up backgrounds, borders, spacing etc. It requires NO kludges to get three columns all the same height and with different backgrounds, whereas with three divs side by side we run into all sorts of problems with browser interpretations. Really, what is the practical (as opposed to philosophical) difference between the two methods? -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] Forms, labels & headers
Hi Jack > I have a huge form page https://www.willtrav.com/form-corp-profile.php > that uses table headers to define the text boxes > and how do I or should I include labels on those > text boxes? I haven't looked at the page, but from your description it sounds like you are doing what I have been doing for years. Russ (maxdesign) suggested I used fieldset (and label). An example of how I did it can be found at http://www.betterwebdesign.com.au/request-quote.asp - may give you some ideas. I set up the element in my CSS to have a fixed width and float left. Russ's example was http://www.amonline.net.au/sand/using/survey.htm Between the two of them, perhaps you will find something useful. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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...
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 * 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...
Yep. Just a little nit-picking. Hence I just said it was ironic, and that it was close. Does anyone actually use Opera? I've tried it in the past, but found that it had too many problems with too many sits (not only ones I built). I'm open to suggestions about how I can fix the problem you saw in Opera, without breaking the site for others or adding tons of javascript. The site used to make extensive use of tables (and at one stage even frames), which I am trying to steer clear of. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] print headers/footers
G'day A graphical page background should repeat on each page when printed (unless the user has turned printing of images and backgrounds off), so perhaps put the logo in as a background (for the print style sheet) and add appropriate padding to the page. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Barbara Dozetos Sent: Monday, 26 April 2004 10:18 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] print headers/footers I've done that with a header for the print version only, but because we can't reliably control page breaks, I'm lost on how to make sure our logo shows up on each printed page. All is fine if it prints out to only one page, or even two, because I can use both a header and a footer, but the pages in between are left without the logo. * 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] iframe - object - xhtml - IE6
G'day > It really works fine in Firefox, but not in IE 5+ (Windows). IE is > always showing a border around the object tag. I can't hide the > border via CSS even not with the deprecated attribute border="0". > Does someone have a solution or workaround for this problem? I had this same problem recently. I found that the border is actually IN the object, not around it. Put a style="border:none" on the body tag of the document you load into the object. Worked for me in IE6 and Mozilla 1.6+ Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] iframe - object - xhtml - IE6
G'day again > OK. Thanks for that hint. I tried it and discovered that > style="border:none" on the body tag only works, if there's > no doctype in the document I load. http://test.bwdzine.com/object.html shows no borders on the embedded file in MSIE6 on Windows 2000 (at least, not on my setup). Both documents are valid XHTML1.1 with a DTD Sorry, I haven't got an older version of MSIE handy. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-lding, user-friendly websites * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
[WSG] Tables are dead?
G'day I've read the comments regarding table-less design and have looked at the resources given. I agree that it would be ideal to consign "tables for layout" to the trash can and have built some sites that way already. I have experimented for days, but have come to a grinding halt on a project that's (surprise, surprise) easily done with a table and seemingly impossible without. Can anybody give me guidance on how to convert a layout like www.bwdzine.com/table.html (the boxes on the light background) to pure CSS? Or is this one of those cases where tables are sementically the right choice anyway? (It is a catalogue of products) The look was first set up on www.onepassionplace.com (I know it's tag-soup). We're setting up a new site (database driven, which gets us away from FP) and I want to do it "right". Is abandoning tables here "mission impossible"? I have experimented with floating divs, but can't re-create the look. Doesn't need to be pixel-perfect, but has to look tidy. With floats of different height, the neat rows are thrown into chaos (www.bwdzine.com/divs.html). With divs of fixed height and overflow:auto we could end up with lots of ugly scrollbars (or shortened descriptions with overflow:hidden). See www.bwdzine.com/divs2.html - increase font size to see the mess. Any ideas / clean, working examples? FWIW, I have no control over how much text would go in each box. -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] Tables are dead?
Thanks for all the help, people. Unfortunately none of the examples given solve the basic problem, which is that with anything other than tables, I cannot get multiple boxes across the screen that have the same height on every row, without specifying a fixed height. Mike's example (http://www.english-sofas.co.uk/contemporary_leather_sofas_0.htm) is nice and clean but it won't work in my case - the boxes do not have a predictable amount of text (can be one, two or many lines). Patrick's example that basically turns the table on its side (http://www.splintered.co.uk/experiments/details?id=36) is clever, but has the same problem (and will only work for a small portion of visitors). (But thanks for the tip - when viewed this way, it's quite obvious that I am in fact dealing with tabular data) I'll stick with a table but will try to cut out the empty "spacer" cells. Hmmm -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *
[WSG] Proper usage of Blockquote and Cite
G'day I'm converting one of my clients' sites to rid it of tables and make it xhtml1 strict. The site has a testimonials page, which quotes text from many customers and adds their initials and occupation. I believe I should be using blockquote for this, and perhaps cite (the element, not the attribute) for the initials etc. I've looked at the specs (and searched Google) but there doesn't seem to be a clear-cut answer. Is this the semantically correct way to use these elements? Testimonial or feedback here More feedback by same person NN, Occupation I've got no problem with blockquote, but my question is the use of cite - I know it is an inline element. Is there an equivalent block level element, or is there no need to use cite here? Old page is at http://www.innoffice.com/Testimonials.html New one is not yet online. Thanks in advance -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] Proper usage of Blockquote and Cite
Thanks Russ and Alan I agree, option 2 makes the most sense here as I want to attribute the quote to a person and want it to be visible in the most commonly used browser on the planet. 2. As an element to add meaning to the blockquote: content... Harry Potter Looks like I was at least on the right track with my choice of elements. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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 validating a Counter script
Title: Message G'dayA couple of hints...1. Close the meta tags: 2. Escape the forward-slashes (/) in the counter script: "http:\/\/1ro.cqcounter.com\/cgi-bin\/c?_id=razvan&_z=0&_r="+See how you go after that.Regards--Bert Doorn, Better Web Design[ www.bwdzine.net | www.betterwebdesign.com.au ]Fast-loading, user-friendly websites
RE: [WSG] Help validating a Counter script
Title: Message G'day again> Check this: http://validator.w3.org/check?uri=http://alegeri-locale.stockapplets.com/2/alegeri-locale-2004.html> Any other ideas?Yep. As the validator says: http://cqcounter.com/?_id=razvan&_lo=ro">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. So.. wrap the link in a block level element, such as p or div. As it is, the link sits directly indise the body element. http://cqcounter.com/?_id=razvan&_lo=ro"> (Or wrap the whole counter script in a div as this error appears more than once in that section). Tackle the errors one at time, starting from the top, since fixing the first error will often fix others that follow :-) RegardsBert
[WSG] XHTML Strict compliant shopping carts
Title: Message G'day I have, for a number of years, used and recommended a particular shopping cart (not going to advertise it here) Unfortunately, as with many such programs, the output it generates is laced with deprecated tags and attributes, nested tables and element nesting errors galore. Besides, it is resource intensive as it's trying to be all things to all people. Starting to look like bloatware (about 100 scripts, most with font elements etc in them). Many features, of which most shops would only use a handful. Does anyone know of any shopping cart software (preferably in ASP) that produces valid XHTML1 strict output and gives the web designer all the flexibility he/she needs with templates and CSS? I'm not fussed if it still has a table layout as long as it's not nesting them. Given recent discussions, one would expect such a cart to be inexpensive, since developing to standards is easier :-) I've searched Google but couldn't find any. I'd develop one myself, but haven't got the time and I'm not a programmer (though I'd love to give it a go). Thanks in advance --Bert Doorn, Better Web Designwww.betterwebdesign.com.au and www.bwdzine.net Fast-loading, user-friendly websites
RE: [WSG] Centering a liquid grid of image thumbs and captions
G'day Sorry, I emailed direct rather than to the list. Here it is: I stay away from using NESTED tables I try to use DIVS only (and it's fine in simple layouts) I use a maximum of one table per page, if it makes life easier, such as where there is a complex layout, or where I have something that, with some imagination, could qualify as "tabular data". Having said all that, if you can control the height of the captions, you could use divs or ps with a fixed height. Have a look at the portfolio page on my site (url in signature) for an example. I use paragraphs here, but you could use divs, an unordered list, or whatever :-) The beauty (to me) of this set up is that at different resolutoins you get a different number of thumbs across. For instance, at 800x600 I see 5 across, at 1024x768 there's 7 and at 1280x1024 I get as many as 9 across. P.S. I know this site isn't perfect. Am working on it. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Gleitzman Sent: Sunday, 6 June 2004 11:35 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions Roy - ummm, did I miss a post? Can you point me to 'Bert's layout'? Thanks Nick * 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] Centering a liquid grid of image thumbs and captions
Hi Nick I don't know how my site looks on a Mac (I don't have one and am not going to waste my money on one), but it's to be expected. But as my PS said, I am changing the site. Can't be bothered to do to much to it at the moment as I don't need extra work and it works for the vast majority anyway. It's one of those cases where I have used features that work in the mainstream browser on the mainstream platform, but which are seemingly impossible to implement on other browsers. I have another site that's more up to date. www.bwdzine.net - nothing fancy there, just plain boring CSS divs (seems the server is down however). That one probably doesn't work in Mac IE either. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Gleitzman Sent: Sunday, 6 June 2004 12:26 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] Centering a liquid grid of image thumbs and captions Thanks, Bert - that's a different and very useful take on the problem. Er - Notwithstanding your PS, do you know how unwell your site is in Mac browsers? IE5 particularly - the only thing that shows up is the bgrd image (red at left). I think it's the height:100% that's doing it... If you want, I can send you some screenshots direct; I have a range of IE versions on both OS9 and OSX, and Safari 1 for OSX. Maybe some others might like to contribute sshots from other browsers? Nick * 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] Centering a liquid grid of image thumbs and captions
Hugh > Don't know what constitutes 'wasting money' for you, I believe this is heading off-topic, but in a nutshell... Wasting money for me is to buy a system I won't use. > The most compliant browsers, including the default one, are found on > the Mac. As this list has so often said, develop first for standards, > and then figure out what needs to be done to the code to address IE > shortcomings. And is is also said.. The VAST majority of people out there are using a Windows based PC with MSIE5.5 or 6. Heck, I might as well buy a mainframe running Unix while I'm at it because some people use it? It's a matter of ecomomics. > Just my 2c. And mine -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] Ordered list mark-up
G'day Well, the specs appear to have provision for it. Unfortunately the vast majority of browsers do not (yet) seem to support it. Content alignment in the marker box LI:before { display: marker; content: "(" counter(counter,lower-alpha) ") "; counter-increment: counter; width: 3em; text-align: center; } This is the first item. This is the second item. This is the third item. I've tested this code in Opera 7.5, MSIE 6, Mozilla 1.6 and Firefox 0.8. It worked only in Opera, where it displayed both the regular "1" and the "(a)" like this: 1. (a) This is the first item. 2. (b) This is the second item. 3. (c) This is the third item. (you'd need to set the ol's list-style to none, to suppress the numbers) The others just showed a numbered list: 1. This is the first item. 2. This is the second item. 3. This is the third item. Perhaps others have experimented with this and found a way for it to work in other browsers. Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] First table-free site
G'day Your problem with the 5px space around the banner image comes from the CSS: #banner { padding: 5px; (etc) } Try setting that padding to 0 Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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] re: using wildcard * in css
As Andy said, it's the universal selector. I'd be careful with it, as the rule will most likely cascade down. Simple example: Note: be careful with the universal selector! You may find that the "strong" note gets the margin applied twice. It gets worse as you nest deeper (try putting an unordered list with links into the container and see what happens) Regards -- Bert Doorn, Better Web Design www.betterwebdesign.com.au Fast-loading, user-friendly websites * 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 variables
G'day Thierry Koblentz wrote: And as a side note, with MSIE, it is possible to give an ASP extension to the styles sheet to use scripting logic within that file. ASP, PHP or whatever server side language you use, as long as you set the appropriate content type on (in) the file (be it css.asp, css.php or whatever) it should work in more browsers than just MSIE. I just ran a test and it worked fine in Opera 8, Firefox, MSIE6 and MSIE5 PC. If it's served as text/css and the output is valid css, it shouldn't matter what the extension is. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Top Ten Web Design Mistakes - yeah, right!
G'day Much as I hate to... and I'm trying hard not to but ...yes "awkward to use". Let me pick an example: All I see is an overwhelming mass of links, even on the home page. But then, I'm just a casual observer who stumbled on the site as it was mentioned on the mailing list. It may be different for someone who went there looking for something this site has to offer (whatever that might be - I can't see it at a glance). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Flexible Font sizes in tables in ie
G'day Either way I still have the problem of the table cell text either appearing too large in ie, or too small in ff. Without resorting to setting text size in pixels in my table, I can't find any other way to prevent this from happening, I thought perhaps there might be a hack out there that will pass 0.8em to ie, but not to firefox? Yes. Use something like this in your css: * html table { font-size: .8em } Only MSIE will use this rule. I'm not sure whether on a Mac has the same problem (someone else may know), but if it does not have the same problem, there are other hacks/filters to stop Mac IE from using the rule above. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Header text problem
Not sure what exactly you're asking, but: http://validator.w3.org/check?verbose=1&uri=http%3A//www.zachinglis.com/ZachInglis.html It's broken code, which may explain why you are having problems. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Header text problem
G'day I can't seem to fix the UTF problem. Any ideas? If you mean the first of the 35 validation errors, have a look at what the validator suggests: ...perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". So, instead of Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Firefox caption madness
G'day I'm getting a weird problem when I try and absolutely position something in a table caption. ... Table 3.1 Performance results: Have you tried validating the (x)html? A caption can only contain inline elements and h5 is a block level element. It's possible your problems stem (at least in part) from this invalid coding. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Couple of question - Image Map etc.
Taco Fleur - Pacific Fox wrote: Thanks, but that's what I did, whatever is there, does not make any sense to me at all, for example; Line 43 column 11: document type does not allow element "H2" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag. What does that mean? If you keep reading the validator page, it provides further information I quote: One possible cause for this message is that you have attempted to put a block-level element (such as "" or "") inside an inline element (such as "", "", or ""). -- A quick glance at the code shows that the validator is spot on with its "possible cause". Let me re-write it to suit: - The cause for this message is that you have attempted to put a block-level element ("") inside an inline element (""). -- Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Never ending cross browser problems! Lets just do IE!
G'day Background bug solved, only thing left is the space between the top banner and the one underneath, there is a one or two pixel space breaking up the words "The right way" and only in Mozilla. The problem is that by default, images (in Mozilla) have a vertical-align of "baseline", which leaves a bit of a gap. Try adding: #content img { vertical-align: top; } ...or anything other than baseline. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] form hidden field ?
G'day I have a hidden field in a css styled form and when you view the page it's shown as a line in firefox, any ideas? In your css: input,textarea { color: #ff; background-color: #58829A; border: 1px solid #27455f; display: block; etc I'd say this is why you see the line - your hidden input will be given display:block, with that border. Removing display:block should fix it. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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 title styles
G'day I like the idea of linking back to the content once the reader has read the relevant footnote, but there are many instances when more than one footnote is attributed to a portion of the content (see example below). Also, the same footnote reference is referred to in different portions of the content. One option is to use some javascript to bring up a "pop up" message (hidden or dynamically built div, at the mouse location) that retrieves content from the relevant bookmark/footnote. I did something like this in 2002, although it was IE specific - using window.createPopup(). It doesn't work in other browsers (wasn't much of a consideration for me in 2002) but could probably be amended to work in other browsers. See http://www.klikbooks.com/Communication.html for an example. Look for a link with the text "PECS" and click on it. Perhaps a variation of this method (so you get a similar effect in other browsers) would be an option? Yes, I used a table for layout back in 2002. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Bridging the gap in IE
G'day I'm using image replacement on a H1 element. The problem I'm having is that the content under the H1 is fine in Firefox, but is pushed much further down the page in IE6. An example shows it clearly: HTML: <http://timburgan.com/css-test/index.htm> CSS: <http://timburgan.com/css-test/css/style.css> Is this a common issue, because I always seem to run into it? Does anyone have any ideas as to what this is caused by and how to overcome this? A few possible causes: 1. invalid HTML 2. invalid CSS 3. default font size and line height on the h1 4. margin on the paragraph following the h1 Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] Accessibility: Default placeholders
Is it really necessary for accessibility to "include default place-holding characters in edit boxes and text areas" per WCAG 1.0 Checkpoint 10.4? Is that an obsolete guideline? 10.4 *Until user agents* handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. [Priority 3] For example, in HTML, do this for TEXTAREA and INPUT. http://www.w3.org/TR/WCAG10-TECHS/#tech-place-holders Have we reached (or largely reached) the "until user agents" stage yet? What implications is ignoring this guideline likely to have (other than not getting "tick marks" from various automated tools), given I use properly coded labels and (where needed) fieldsets for the inputs? It seems crazy to repeat the label text (or slightly amended info) in the input for people to overwrite (and some will perhaps leave it in there!) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Accessibility: Default placeholders
G'day Thanks for all the replies, you've confirmed my suspicions. It's unfortunate that online accessibility/quality checking tools still insist on this (especially when you have a client who likes to see a mass of ticks with every tool you throw at his site). I have the same concerns others voiced about there already being data in the field - it's confusing and may cause more problem than it fixes. I hate having to manually select text already in an input, to overwrite it. Yes, that can be overcome with javascript, but I'd rather not fix a problem by introducing another potential problem. I might settle on adding value=" " (space) - shouldn't be hard to change my scripts to strip leading spaces when checking if a field has been completed. Geoff, I know exactly what you mean with the greyed out fields. Came across it myself only yesterday - a form where all inputs had a grey background. It wasn't until I clicked in one of them that I realised the field was not disabled. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **