Re: [WSG] What do you think about slicing images?
- Original Message - From: Marilyn Langfeld To: [EMAIL PROTECTED] Sent: Monday, November 15, 2004 9:19 AM Subject: [WSG] What do you think about slicing images? I haven't seen any discussions about slicing images, with regards to web standards. I expect slicing is discouraged, since it is table-based. It doesn't have to. The slices can be put together without the use of a table. Simple BR tags are enough for the construct. Thierry ---Pure CSS Navigation Menu | Scalable Tabshttp://www.kaosweaver.com/extensions/details.php?id=76
Re: [WSG] Kaosweaver Complete CSS Menu - accessible or not?
[EMAIL PROTECTED] wrote: http://www.kaosweaver.com/extensions/details.php?id=76 Hi I was wondering if anyone had any experience with this extension and whether it is fully accessible etc as it looks like it could be quite a time saver. Hi Helen, I'm biased on this, but I'd like to point out what I think is the best feature of this menu re: accessibility. This CSS menu allows the use of tabs images as background-images for the list items, so it is possible to increase or decrease text-size and have the Tabs expand or contract to always fit the size of the navigation links. Thierry | http://www.TJKDesign.com | CSS-P Templates compatible NN4.7 - | CSS Popups | CSS Tabs | CSS Dropdown Menus | Articles and Tutorials | ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] List Indenting
Paul wrote: Just did, on the UL class as well as the li class, no luck Hi Paul, The problem lies in your bluebox container. *Remove* the left declaration and use margin-left instead, that should fix it. Regards, Thierry | http://www.TJKDesign.com ** 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] 3 cols width any column longest and no div clear
Gianfranco Todini wrote: And it doesn't use any hacks as well... What's this? * html #container {display:inline-block;} And this? * html #left {width:197px;} :-) Thierry | http://www.TJKDesign.com ** 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] NS4 spacing borders
True, but management should make educated decision and that means listening to developers. But a developer who doesn't know how to design for NN4 would be biased, no? IMHO, supporting NN4 is a call for: - bad semantic, - structural hacks, - extra hours spent on the project. Out of these three points, I'd say only the last one would make sense for a client :-) Thierry | http://www.TJKDesign.com ** 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] NS4 spacing borders
but a useful one to know for sure. Since we're talking about NN4... Another interesting thing about this browser is the way it handles the noscript tag. In NN4, a simple noscript tags pair can break apart a whole CSS layout; at other times, it can be a great way to clear floats. Once a designer knows about these things (as using a clear.gif to set backgrounds color) it becomes much easier to support this browser. Thierry | http://www.TJKDesign.com ** 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] you've been framed!
designer wrote: OK, I know about the pitfalls, but the bookmarking thing is easy to get over - just add 2 short lines of javascript from www.CodeLifter.com : if (parent.location.href == self.location.href){ window.location.href = 'whateverframeset.html' } I don't think this has to do with bookmarking; it is more about calling the default frames when a naked page loads in the UA. And IMO it is better to use the replace() method in this case to avoid messing with the user browser's back button. However, what I want to know is, which browsers don't support frames? And should I be bothered? MSIE 2 (Win Mac), AOL 1.0 2.7 (Mac), AOL 1.0 Win Note that in some browsers (Opera for example) frames can be turned off. You have the noframes tag to help you deal with frame-challenged UAs I've written an article about frames, you may find something useful in there: http://www.tjkdesign.com/articles/frames/default.asp HTH, Thierry | http://www.TJKDesign.com ** 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] position:absolute in IE
Gunlaug Sørtun wrote: A simple float-design with a little bit of AP, can be as fluid as one may like it. How about 3-column floats? http://www.gunlaug.no/contents/wd_1.html Basically it is this: http://www.alistapart.com/articles/negativemargins/ This technique uses negative margins too, but does not require structural hacks for clearing, and I believe it has better browsers support: http://www.tjkdesign.com/articles/challenge/3cols/ HTH, Thierry | http://www.TJKDesign.com ** 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] position:absolute in IE
Gunlaug Sørtun wrote: Yes, that's another variant that'll work just fine. I made one based on the same idea back in may/june 2004, but Gecko-browsers wasn't clearing too well then: http://www.gunlaug.no/homesite/main_7_b.html Hi Georg, You're floating the right column and you have a few structural hacks for clearing in there. Did you try without floating it? I had much better result that way. Then, the *only* browser that needs a clearing element for the left column seems to be NN6. Browser-support shouldn't be a problem with either, as long as the old browsers are left out. The solution I've posted works in NN4 :-) Regards, Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] How exactly can I get pixel perfect in IE?
tee wrote: Hi, Been wanting to find a solution but it's sort of something not critical until I came up with this menu http://www.lotusseeds.com/tryagain_michael.html Any idea? In the markup, do not leave whitespace between the list items HTH, Thierry | http://www.TJKDesign.com ** 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] position:absolute in IE
Gunlaug Sørtun wrote: reached by different means. I don't have a personal preference, so I look into all solutions, and pick and choose from ideas and inspiration when/as needed. Guess that's how it should work across the web. The same here. There is a lot of good stuff out there, very inspirational... Nice, but if any of my solutions works in NN4, then it may only be because I've forgotten to hide my styles from it. I usually stop well short of supporting old browsers, simply because I don't want to. I like supporting NN4, I know it doesn't make much sense (structural hacks and bad semantic), but I really enjoy the challenge ;-) Now I only have to list some of my structural navigation and clean up a bit, since the styles are already in place. Next stage is to cut the amount of styles in half, without loosing anything. After that -- nobody knows. :-) CSS is fun :-) A lot of fun... FWIW: I thought it would be more appropriate to send you this email off-list, but it bounced... Regards, Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE problem
I've seen hacks over the net and used one to define sizes in IE...but this problem is driving me crazy... Hi Javier, As Alan said, you should use display:inline on every float that include margins, but I believe you need more than that to fix your problem. Try this: #contizq { display:inline; width:170px !important; ... ... } HTH, Thierry | http://www.TJKDesign.com ** 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] more float problems
Its the input buttons that are floated and overlapping causing the .sectionfooter| to shove over. Try : div.sectionfooter {clear:left} Also make sure you set a background-color for body, because white is not the color by default ;-) HTH, Thierry | http://www.TJKDesign.com ** 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 issues: Opera's absolute positioning
would anybody be able to suggest a simple fix to get the advanced search/preferences list to align properly next to the input on my frugal google experiment http://www.splintered.co.uk/experiments/74/ ? You could try to move the UL just before the text box and then use *float* rather than an AP div... HTH, Thierry | http://www.TJKDesign.com ** 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] Multiple comments to filter non Gecko-based browsers
Hi, I'm trying to use nested comments as a filter for non gecko-based browsers. This is my markup: !-- style type=text/css some rules here /style !-- Gecko-based browsers get it right; they see the nested comment and ignore the inner block. But the Validator gives me a warning about this (multiple comments in comment declaration). The thing that bothers me is that WDG [1] says that !-- hello-- is a legal comment, but my guess is that the Validator would choke on this too. Isn't confusing? [1] http://www.htmlhelp.com/reference/wilbur/misc/comment.html Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Multiple comments to filter non Gecko-based browsers
I guess the first question would be.. what are you trying to do and is their another solution? Not sure what you mean by filter for non Gecko browsers? Hi James, I found out that non Gecko-based browsers see the inner block (between the comments), so I can use this markup to feed them without styling elements in FF, etc. Honnestly, I didn't find a real need for that yet, but I'm frustrated with the info I found so far re: multiple comments. It's very inconsistent and I hoped that one of you guys could give me a definitive answer on this. Regards, Thierry | http://www.TJKDesign.com ** 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] Skip Navigation Visibility
Sarah Peeke (XERT) wrote: Many sites I have seen *retain this link's visibility* despite it being intended (AFAIK) primarily for screen readers. It also helps people who use tabbing navigation. Thierry | http://www.TJKDesign.com | ** 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] Accessible dropdown menus
Roger Johansson wrote: * Semantic markup (i.e. nested unordered lists) * Graceful degradation when support for CSS and/or JavaScript is missing * Keyboard navigable, preferrably with optionally expandable menus. * Top level menu items should be real links * Menus drop down on hover (obviously) Hi Roger, I have something that (I believe) fits #1, #2, #3 (not all browsers though), #4 and #5 http://www.tjkdesign.com/articles/dropdown/demo.asp HTH, Thierry | http://www.TJKDesign.com ** 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] Disjointed Rollovers in css
jackie reid wrote: is there a tutorial out there that anyone has seen or used that may help me achieve this. Hi Jackie, This may help you: http://www.tjkdesign.com/articles/css%20pop%20ups/ HTH, Thierry | http://www.TJKDesign.com ** 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] Suggestions for compliant drop down menus...
Lee Jorgensen wrote: http://alistapart.com/articles/hybrid/ I didn't know about that one, but I believe it is the worst article ever published by ALA. The author says: What if we could have one clean, well-structured menu which would combine the dynamism and code-ease of dropdown menus and do away with their main problems (not to mention degrade beautifully)? This technique is a bulletproof way to ensure browser compatibility and to maintain usability In fact, the technique has many issues: - poor browser support, - text is not scalable, - tabbing navigation is not possible, - list items are not accessible in IE if JS is disabled. I think ALA should have published this solution instead ;-) http://www.tjkdesign.com/articles/dropdown/demo.asp Thierry | http://www.TJKDesign.com ** 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] Heads up re: skipNav and other jump links
Hi all, I've noticed that many of you are using a container ID as a named anchor (to create a skip nav for example), but I'm not sure if you're all aware that this creates an accessibility issue: the user can jump to the location, but is unable to tab past it. Also, I've found that most of the techniques work when it comes to the jumping part, but making sure tabbing navigation is not disturbed is not that simple. For example it appears that a name=content/a is not bullet proof while a href=# name=content/a is. I've also noticed that if one uses display:none to style a named anchor, MSIE can't find its location (FF seems to be OK with it). One last thing: for the UA, case is not an issue, so a jump link (#content) would work, but tabbing navigation would fail if the anchor named content is contained in a DIV named CONTENT. Anybody knows why empty anchors are not 100% reliable when it comes to tabbing navigation? I just can't figure it out... Regards, Thierry | http://www.TJKDesign.com ** 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] Heads up re: skipNav and other jump links
Drake, Ted C. wrote: I've been replacing my a name=deepcontent/a with h3 id=deepcontent Or something similar. Isn't that the most appropriate way of going? Hi Ted, Try the 2 methods and you'll see how the latter solution disturbs tabbing navigation. Using the former allows UAs to jump to that location, but once there, the user cannot tab *from there*. On her next tab, she is brought back to where she comes from, or even farther up. Thierry | http://www.TJKDesign.com ** 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: Betr.: [WSG] Window Pop-ups
Gerard Copinga wrote: Hello, a href=help.htm target=_blank onClick=javascript:openNewWindow(this.href); return false; title=opens in new windowHelp/a As a side note: using _blank as the value of the target attribute is not a good idea unless the designer wants a *new* window to open each time the event is triggered. To make sure the link(s) open(s) in the *same* window, the best is to use ThisCanBeAnyName for value. HTH, Thierry | http://www.TJKDesign.com ** 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: Betr.: [WSG] Window Pop-ups
Kornel Lesinski wrote: And what about what _user_ wants? For me there is nothing more annoying that page with links to screenshots or faq entries that all stubbornly open in the same window and don't let me see more than one of them at once. IMHO, this technique gives some control to the user since it is still possible for her to open such links in new windows (i.e. Right-click Open Link in New Window (or Tab)). Using _blank leaves her with no choice. Thierry | http://www.TJKDesign.com ** 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: Betr.: [WSG] Window Pop-ups
Patrick H. Lauke wrote: Even if a link *has* _blank, you can use the right click option. I know that ;-) My point is that setting the target attribute's value to WhatEverName gives the user a *choice*. It allows him to either open these links in new windows or in the *original new one*. With _blank, each link clicked would create a new window, and AFAIK, there is no right-click option to change this behavior. Thierry | http://www.TJKDesign.com ** 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] Voice family box model hack
Stevio wrote: Can someone explain how the following works? Hi Stephen, You may want to read this: http://tantek.com/CSS/Examples/boxmodelhack.html Then this: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp Unless I'm missing something, the latter is a simpler and - IMHO - cleaner solution to fix MSIE. HTH, Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Two separate CSS issues
Stevio wrote: Anyone know why a floated div is hidden in IE6? Try position:relative on #sidebar, that should fix it To set padding and margin to 0 value for all the elements, try * instead of #, like this: * {margin:0;padding:0} HTH, Thierry | http://www.TJKDesign.com ** 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] Voice family box model hack
Michael Wilson wrote: If I have to use a box model hack (BMH), rather than a conditional comment, I prefer the following [01]: * html foo { /* Selector recognized by IE only */ height: 100%; /* Value for IE5.x/Win and IE6.x/Win QM */ hei\ght: auto; /* Value for IE6/Win */ } I believe it is worth mentionning that IE5 Mac would also apply that second declaration. Conditional comments are a pretty well know and documented technique, You may find this useful: http://www.positioniseverything.net/articles/multiIE.html Thierry | http://www.TJKDesign.com ** 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] Combination of CSS menu with dhtm/javascript menu button?
tee wrote: Seven, but I really prefer to stay with css menu as it delivers cleaner code. I was thinking perhaps I can insert one dhtml menu in Son of suckerfish dropdowns: http://www.htmldog.com/articles/suckerfish/dropdowns/ I'm a bit biased about this one: http://www.tjkdesign.com/articles/dropdown/demo.asp HTH, Thierry | http://www.TJKDesign.com ** 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] Combination of CSS menu with dhtm/javascript menu button?
Michael Wilson wrote: It works in NN6 Win, but I'm not sure about NN on Mac; that fix link I posted earlier has a listing of tested browsers. Michael, I've tested this page [1] in NN v6.2.3 on XPPro and it does not work. Regards, Thierry | http://www.TJKDesign.com [1] http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html ** 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] Combination of CSS menu with dhtm/javascript menu button?
Michael Wilson wrote: This [01], however, does work in NN v6.2.3 on XPPro. According to the Hi, I don't think it works as intented. The nested ULs appear, but NN6 doesn't paint any background, so it is not legible. Re: the Mac fix. This fix is for MSIE 5.2 (OSX), it doesn't fix 5.0 (OS9) and IMO, this is the IE version mostly used by Mac users. Also, the script triggers JS errors in Opera 6.05 so the ULs do not popup, but the most important is that it makes the top level list items *not* accessible. As I said previously, if you want 100% coverage, you will need to get into allot more JavaScript or you can simply link the top level navigation items to a shortened table of contents. In my view, this is the cleanest method as it doesn't require the added script and it's accessible by everything that can follow a link. As I said previously, I'm biased toward this method [1], but so far it seems to be the cleanest one without allot more JavaScript :-) Thierry | http://www.TJKDesign.com [1] http://www.tjkdesign.com/articles/dropdown/demo.asp (I've now added a list of browsers I have tested the technique with) ** 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] liquid 3-column layout - my head is spinning
Drake, Ted C. wrote: I've looked at about 3 dozen web sites this morning discussing the best three column layout and it is getting really confusing. So many of them are variations of each other and there are few dates on the pages to know what is new and better. Hi Ted, I don't know if this one [1] is better, but it is fairly new... In the footer, there is a list of browsers in which I've tested the page And there is a bit more complex design page too [2] [1] http://www.tjkdesign.com/articles/challenge/3cols/default.asp [2] http://www.tjkdesign.com/articles/challenge/ HTH, Thierry | http://www.TJKDesign.com ** 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] update-- liquid 3-column layout - my head is spinning
Drake, Ted C. wrote: I've got a question. You mention the IE painting bug, which is very similar to the issue that I am having. Hi Ted, I think I mentionned this bug re: the ALA demo page. Did you notice background painting problems with my pages? However, I was able to solve the problem, knock on wood, by removing the background color of the sub divs. I had a combination of You still have weird things going on in the Problem Area. Try this: click in the lower right corner (below turn dark on click) do not release the mouse's button drag the pointer diagonaly toward the top left corner of that DIV the whole container got painted over. I believe it is the left negative margin that triggers this bug. You can try the following to fix the different problems in IE: #orgintranets {display:inline} #orgintranets,#orgintranets a:hover {zoom: 1} #menu a {margin-left:1px !important;border:1px solid blue} #menu a:active {background:#e6e6c1} .cleanlist a:active {background:#fff} What has been your experience with the background painting bug? Painful ;-) HTH, Thierry | http://www.TJKDesign.com ** 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] liquid 3-column layout - my head is spinning
David Laakso wrote: Just in case you change your mind about source order: http://www.alistapart.com/articles/negativemargins/ FYI: The ALA's article doesn't mention a few things: - links inside the right column appear not to be clickable in Opera 6, - there are background painting problems in IE, - there is one structural hack missing from the markup to help NN6 clear the left column. Thierry | http://www.TJKDesign.com ** 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] liquid 3-column layout - my head is spinning
Gunlaug Sørtun wrote: Just some quick questions -- and please don't misunderstand me here. :-) NP ;-) - How many of the old browser-versions should be allowed to influence our choice of design-methods? - Aren't there enough bugs and flaws in the new browser-versions? I see your point, but when it comes to choose between different solutions, I find info re: browser compatibility very valuable. Regards, Thierry | http://www.TJKDesign.com ** 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] font list?
john wrote: No matter how hard I try to explain, one of my clients just cannot understand that fonts are taken from the user's computer when they view the page. Basically, he can't shake the distinctions between print design and web design. You may want to look into sIFR: http://www.macromedia.com/devnet/mx/dreamweaver/articles/sifr_demo.html Not for a whole document, but atleast for the headings. HTH, Thierry | http://www.TJKDesign.com ** 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 fonts be fixed in firefox?
Andreas Boehmer [Addictive Media] wrote: font-size? Or do I have to go and use images instead? In which case I would have to use Javascript for the Rollover, which really goes too far! To go with CSS rather than Javascript, you can use a transparent image and swap its background. Thierry | http://www.TJKDesign.com ** 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] Site check please - eCommerce
Hi all, I have a WAI-AAA icon at the bottom of the pages and I'd like to know if I can leave it there or if I have a few more things to work on :-) I'm using label with all my input elements, but the one for the search form at the top at the page. Does using the title attribute make it accessible enough or do I must use label? Also, I've put skip table links inside caption/caption (for people who are not using pointing devices), but they are ignored by FF. How come? Try to tab through the links on the page, you'll see that they are skipped. For the ones who'll check the markup: the few structural hacks are for NN4. http://www.tjkdesign.com/clients/uni/OrderForm.asp?cart=- Thanks, Thierry | http://www.TJKDesign.com ** 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 check please - eCommerce
Jan Brasna wrote: Label is in Priority 2, title is enough for Priority 1. BTW placing a label there and hiding it via CSS does the job too... Duh! LOL Thanks, Thierry | http://www.TJKDesign.com ** 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 check please - eCommerce
diona kidd wrote: I'm using FF 1.0.1 on Fedora 3 and the links are working for me. Which version/platform FF are you using? I'm using v. 0.8 and 1.0.2 on WinXP When you say working, do you mean you can click on them and jump to the anchors or that you can tab through all the links in the main section of the page without skipping them? Because the former works, it is the latter that doesn't. Thanks for your feedback, Thierry | http://www.TJKDesign.com ** 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 check please - eCommerce
tee wrote: Hi Thierry, I think your page has issued with Safari (Jaguar), it shuts down the browser after 2 or 3 second of loading. I tested 4 times, same result. Hi Tee, I was going to reply off-list, but on the other hand I'd like to see someone else using Jaguar to check the page. Just to make sure the problem is related to the site itself. BTW, what OS is Jaguar? (you can answer this off-list) I've checked with Safari v. 1.2.4 in OSX v.10.3.7 and it is working fine... Thanks for checking, Thierry | http://www.TJKDesign.com ** 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 not displaying a link as a block level element
Drake, Ted C. wrote: The rest of the styles use body classes to show or hide specific nested menus. Does anyone see a reason why the links would not display as block? It is causing some flashing as you mouse over the links and hit dead air. The hover goes off and on Hi Ted, To fix IE, try: #mainnav a {height:1%} HTH, Thierry | http://www.TJKDesign.com ** 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 not displaying a link as a block level element
Drake, Ted C. wrote: I could probably generalize the holly hacks to the whole site, but for now I am doing it on the individual nav. Are there reasons why I shouldn't just say * html li and * html a ? Did you try to use Conditional Comments instead of CSS filetrs? IMO, that's where this declaration belong... The height:1% lets you also use padding with *regular* anchors in IE. Thierry | http://www.TJKDesign.com ** 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 Comments
Drake, Ted C. wrote: This is a hack to send a style to Internet Explorer on windows and not mac. IMHO, IE CCs are a better alternative to this hack: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp Thierry | http://www.TJKDesign.com ** 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] Minimum browsers/OS tested for?
Neerav wrote: I havent asked this for a while so it would be interesting to know what the current trend in Browser/Operating system support is for the freelancers/corporates on this list to see if there has been any change in the last 6-12 months I think of people stuck with old browsers, the same way I think of people using keyboard navigation, etc. I believe browser support is accessibility, so I spend time tweaking my sheets, *trying* to make my sites look good in as many browsers as possible. I test in: Mac: Mozilla, Firefox, Safari, Camino, IE5.0 (OS9) and 5.2 (OSX) Windows: MSIE 5.0/5.5/6.0 - NN 4/6/7 - Opera 6+, Mozilla, Firebird, Firefox 0.8+ Thierry | http://www.TJKDesign.com ** 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] Minimum browsers/OS tested for?
Kornel Lesinski wrote: Pretty does not mean accessible. OK, I should have said look good and functional ;-) For example, when DIVs overlap, links become unclickable, content disappear. etc. I think it's better to spend time on some WAI checkpoints rather than adding display tweaks for NN4 and alike. I try to do both. If your HTML is well-written, it should be pretty accessible without stylesheets or scripting, and you could spend your time on something more useful. If the HTML/CSS is well written a document can look good/be functional in many browsers too. For example, why is it so complicated for some people to have a decent layout in IE5/Win? Because of its broken box model or because of the designer's skills? BTW, I think serving no style sheet to NN4 is one thing, but letting v.5 browsers feed on styles that break them is another story. I'd absolutely drop NN4. If it still has any users alive, they should be used to that sites are unstyled/broken in it. NN6 is rather experimental/broken and I can't even find a trace of it in webstats I use (ranking.pl). My reply to the OP was to tell him how I do it, not to tell people what they should do ;-) Opera users upgrade so quickly that Opera 6 now has few times smaller userbase than IE4. It's really marginal - I guess most of them are mobile phones users, and only Opera 7+ has option for testing handheld styles... I agree... Check Gecko versions in NN7/Firebird and Mozilla/Firefox you use - probably they use (almost) the same engines, so you don't have to use them all for testing. You're right, but it feels so good when you open a document in 4 or 5 different browsers in a row and it looks the *same* :-) I don't [try to] build layouts with strong browser support because I have too, I just do it for the challenge. And there is no time wasted because that's the way I learn... Thierry | http://www.TJKDesign.com ** 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] there is no attribute name
Patrick H. Lauke wrote: The proper way in XHTML is using fragment identifiers: giving an ID to an element, and linking to that, e.g. a href=#contentgo to content/a div id=content I've found that using id instead of name for anchors (including a href attribute) creates an accessibility issue since some browsers (at least MSIE) find the location, but are unable to keep track of the link sequence re: tabbing navigation. I posted a message a while back about this, warning people that skipnav links built this way are just *useless*. HTH, Thierry | http://www.TJKDesign.com ** 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] there is no attribute name
Patrick H. Lauke wrote: I found that, even when using NAME, IE (particularly IE6/SP2 on WinXP/SP2) can exhibit this same behaviour of forgetting the right tab order. In fact, I just created a super simple page where my IE (version and OS as above) just does that http://dev.splintered.co.uk/IE_tab_order/. Hi Patrick, That's correct, NAME by itself is not bullet proof, but if you include a href attribute in the named anchor (as mentionned in my post) it fixes MSIE. Try: a href=# name=content/a and you'll see that IE gets it right. And, in a weird twist, there are situations where, even using ID / fragment identifiers, IE gets it right (see for instance I've also seen cases where it works fine, but I still have no clue why ;-) FYI: I've also found out that styling an A element with no content (a regular anchor) using position:absolute makes MSIE ignore the location of this element, so IE does not jump to that anchor. Anyway, it is important for people implementing skip nav links to *check* them in IE to see if they work with keyboard navigation. Thierry | http://www.TJKDesign.com | CSS-P Templates compatible NN4.7 - | CSS Popups | CSS Tabs | CSS Dropdown Menus | Articles and Tutorials | ** 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] there is no attribute name
Thomas Ditmars wrote: div id=content ... Does this also apply to HTML 4.01 Strict? I guess my actual question is: What is the proper way of coding '#anchor-name' links in HTML 4.01 Strict? It is best to use *both* (up to XHTML 1.0) *with* a A element, to be nice to old browsers. You may want to remove styles, but not functionality ;-) a href=# id=content name=content/a This should take care of old browsers, tabbing navigation and the Validator. Thierry | http://www.TJKDesign.com ** 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] search engine question
Kornel Lesinski wrote: You have to use good, accessible menu that uses links in HTML. See son of suckerfish dropdowns. I'm not sure if CSS menus are really accessible. IMHO, they lack a timer, browser support is weak and most of them do not allow keyboard navigation. On top of that, if not well implemented, they can be totally inaccessible to IE users if scripts are disabled. FWIW, I'd go with a DHTML solution that degrades nicely. Thierry | http://www.TJKDesign.com ** 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] search engine question
Kvnmcwebn wrote: heres the menu http://www.dynamicdrive.com/dynamicindex1/hvmenu/horizon.htm Nice, but totally inaccessible without JS support. Check www.projectseven.com I believe most of their menus are fully accessible. It is important that without client script, the navigation fully expands. BTW, keeping this in mind, it may be better to go with a *vertical* flyout menu. Thierry | http://www.TJKDesign.com ** 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] search engine question
Kvnmcwebn wrote: heres the menu http://www.dynamicdrive.com/dynamicindex1/hvmenu/horizon.htm This link is to show you that I'm not biased when I say you should favor a DHTML solution: http://www.tjkdesign.com/articles/dropdown/demo.asp ;-) Thierry | http://www.TJKDesign.com ** 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] search engine question
Kornel Lesinski wrote: I'm not sure if CSS menus are really accessible. IMHO, they lack a timer, browser support is weak and most of them do not allow keyboard navigation. That's the same problem most JS menus have as well. That may be true for the bad ones, but not for quality JS menus. And I believe CSS offers no possibility re: a timer. There are workarounds, but they bring other issues. On top of that, if not well implemented, they can be totally inaccessible to IE users if scripts are disabled. JS-based menu will fail as well, and not only in IE, but in other browsers. I don't really agree. For example, the menu in my site is based on a projectseven's article. AFAIK, it degrades nicely in old browsers or in the ones with no script support. Having working, styled top-level items are IMHO best way such menu can degrade. Otherwise you may get something like few pages of unordered lists or spaghetti of links, which breaks page layout and isn't more usable. That's why I mentionned vertical flyouts vs. horizontal ones FWIW, I'd go with a DHTML solution that degrades nicely. But suckerfish dropdowns is DHTML solution that degrades nicely. You know what I mean, the suckerfish technique is not supposed to be a DHTML solution. And it degrades *only* if the top level items are actual links, which sometimes is not the wish of the designer. You can get best of both worlds - extend CSS menu to have features of best JS menu. Add class to menu and make :hover work only on menu with that class. Then using JS remove that class and add mouseover/mouseout/focus handlers that implement closing delay, keyboard navigation, etc. We agree on this. I believe that's what DHTML is, a bit of CSS with more JS ;-) Thierry | http://www.TJKDesign.com ** 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] search engine question
Kvnmcwebn wrote: Unless you think im making a HUGE mistake by using this dhtml menu from, im going to leave it. IMHO, it is a HUGE mistake I mean what are the percentages of users with scripting disabled-is it really going to come back and haunt me? Did you check the source code? It is not only inaccessible to JS-challenged browsers, it is inaccessible to SE as well. If you need to go this route, make sure to plug some basic navigation links inside the noscript tag pair along with the warning you alreeady have in there. Thierry | http://www.TJKDesign.com ** 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] search engine question
Kvnmcwebn wrote: The only drawback(for me) is that the text size cant be fixed as in the js method i was using earlier. Actually, that should be one more reason to stay away from that menu ;-) But check that menu in a different browser than IE, you'll see that text-size can always be increased/decreased. Thierry | http://www.TJKDesign.com ** 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] Odd Firefox Issue...
Chris Stratford wrote: Hey Guys, Just wondering if you have ever seen this problem with firefox. Hi Chris, I do not experience any problem with that page (FF 0.8/WinXP) Thierry | http://www.TJKDesign.com ** 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 for changeing colors
The Man With His Guide Dog At The Tent Store wrote: I do not know if this is off topic. Can CSS be used to change background and foreground colors to create a more accessible web site.? If so, how? Or please direct me to a web site that discusses the topic. Alternative styles article: http://www.alistapart.com/articles/alternate/ FWIW, I use session variables to plug the correct styles sheet into my documents. It goes like this (ASP): @import url(/css/generic.css); @import url(/css/%= variable %.css); That variable can target any files (for contrast, text-size, background images...) Thierry | http://www.TJKDesign.com ** 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 list spacing: margin or line-height?
Matt Thommes wrote: I've noticed that the CSS 'line-height' property provides extra spacing between list items, such as in an ordered list, unordered list, as well as definition lists. I try to favor line-height rather than padding if I'm dealing with an element that is styled with a height declaration (because of IE5/Win's broken box model). So for horizontal lists, I use: line-height: X min-height: X and then height: X for MSIE This technique has the advantage of centering the text vertically without the need of padding. It works with vertical Lists too, but there is a bug in Gecko browsers that would randomly create a small gap between some of the list items. Thierry | http://www.TJKDesign.com ** 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] lights flashing - I'm not the only one seeing this - CSS list sp acing: margin or line-height?
Drake, Ted C. wrote: Hi Thierry This has been bugging me lately and I've been adding margin-top:-1px to some of my navigation lists to avoid this random space between list items in firefox. Do you have any recommendations for avoiding Hi Ted, It's Bruno Fassino on CSS-D who gave me a heads up about this bug. This is its original post: bruno I haven't looked at your code, but the manifestation of the problem and the fact that it moves changing font-size makes me think that it is a so-called rounding error (due to measurements expressed in em.) Ingo Chao has a very detailed description here [1]; also check [2]. hth, Bruno [1] http://www.satzansatz.de/cssd/geckogaps.html [2] http://www.positioniseverything.net/round-error.html bruno Using padding *only* fixed my problem HTH Thierry | http://www.TJKDesign.com ** 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 check - lastminute.com
Gunlaug Sørtun wrote: In most browsers, there is no way to know how the page would print. There is a way: 'testing', but I agree on that browsers don't do their print-job the same way. Think Gecko is worst on print-jobs at the moment. Hi Georg, I was talking about the user, not the designer. Most browsers do not offer a Print Preview option, so many people are reluctant to print a page not knowing what they'll get. For example, many would not try to print a page thinking that a colorfull banner, sidebar or footer (elements not related to the content they are interested in) would unecessary drain their print cartgridge. - Don't know about the new window - preview though. Not my thing. It does not have to be a new window, but at least it shows them what they'd get on paper. - Providing available alternatives in clear view, may ease access for many. - How best to do that, may be the next question. I think the first link in a document (before the skipnav even) could be attached to an accessibility page. Such page would address user's preferences (text-size, contrast) a list of accesskeys (I know this one is tricky), the CSS signature for the site and much more. I believe that would help any user to know right away if the content of the site will be accessible for them, regarding their own issues (whatever they are). There are many sites out there offering more or less the same content, it would be less frustration for the user if he/she could find out right away if the site he/she is about to visit implemented any steps to facilitate their navigation of choice, reading (contrast, text-size), etc. I just think it is a waste of time and a lot of frustration for people to have to discover how much a site is accessible for them when it is so easy for a designer to make that information available to them early in their visit. How far off from the original thread are we now? Make sure to change the subject line in your next post ;-) Thierry | http://www.TJKDesign.com ** 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] Web standards presentation
Mike Brown wrote: if anyone is interested, I did a presentation on web standards last week and have put it online: http://govis.signify.co.nz That's great. Can we post that link to various NGs? Thierry | http://www.TJKDesign.com ** 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] CSS Dropdown menu
For people interested in à la suckerfish menus, this one now allows tabbing navigation in MSIE too: http://www.tjkdesign.com/articles/dropdown/demo.asp Thierry | http://www.TJKDesign.com ** 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 Dropdown menu
Frederic Fery wrote: on your site is says What's Bad We're using CSS for another purpose than presentation. why is it that bad? It is said that flyout and dropdown menus belong to the behavior layer and that CSS should not be used to accomplish such things. Also, because this technique relies on CSS *and* Scripting it overlaps 2 layers; and that's supposed to be bad too ;-) IMO, there is even a third problem, and it is about usability: there is no delay that can be set regarding the collapsing of the nested lists. Thierry | http://www.TJKDesign.com ** 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 Dropdown menu
Rowan Lewis wrote: Nothing wrong with styling states with CSS, but there is plenty wrong with using javascript to overwrite CSS states when you could do exactly the same thing with CSS. However, adding javascript to make a browser work like the others do is fine, but you should try to compress it some what, to save download times. I'm curious to know if you're saying that as a general rule or if it relates to that menu in particular. Thierry | http://www.TJKDesign.com ** 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] Fluidity help
Tom Livingston wrote: Hello list, Need a little help. I am building a page - http://66.155.251.18/platformrg.com/ - that was designed in a hard grid. Can I tweak this so that when text is scaled up, the boxes expand, at least vertically, to allow for the larger type as well as having the boxes maintain a min-height when scaled down - especially in the row that contains the image? I have trouble wrapping my head around the 'fluid thing'. I really can't change any design elements at Also, in IE 5.5Win, there is something up with the borders. Anyone see what that is? I think it'd be easier to start from scratch. IMO, this layout relies too much on the position attribute. Use a 3 cols CSS layout that works, float the buildings image and use the footer for your What's new area. Re: IE5, I didn't check but there is a good chance that your problem comes from its broken box model (the relationship between dimension of the box, border and padding). Thierry | http://www.TJKDesign.com ** 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] Fluidity help
Tom Livingston wrote: My first reaction was... Yikes!, Are you nuts! Me again, http://66.155.251.18/platformrg.com/people/ In IE5.5/6Win (and Opera 8 MAC) I am seeing extra space under the image and can't figure out where the heck it's coming from. Can you? This is normal behavior. It's because your left bar is taller than the picture. Remove padding on your elements in the sidebar and you'll see that the footer moves up and comes touching your image. If you didn't set your font-size value using pixels, you could have seen the same effects by simply reducing text-size in MSIE. Re: the box model, if you have a 100px wide box with a 1px border around it. In IE5 that box is 100pixel wide (including the border), but in other browser (including IE6 unless it is in quirks mode), that box will be 102pixels wide. That's what you've small differences in IE5 with the borders. And it works the same with padding. HTH, Thierry | http://www.TJKDesign.com ** 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] the mysteries of float - i seek enlightenment
Scott Reston wrote: In Firefox, the pullquote drops within the content to clear the first sidebar. Why? Put your 2 sidebar (do not float them anymore) into a container that you float right, and give it a width (pullquote needs a width too). That should do it. Thierry | http://www.TJKDesign.com ** 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] the mysteries of float - i seek enlightenment
Thierry Koblentz wrote: Put your 2 sidebar (do not float them anymore) into a container that you float right, and give it a width (pullquote needs a width too). Of course, I meant the content of your sidebar DIVs not the whole DIVs. So you're adding one DIV but remove 2. Thierry | http://www.TJKDesign.com ** 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] the mysteries of float - i seek enlightenment
Scott Reston wrote: sidebars will likely be separate cross-sells. If I wrap the divs in one big div, I still see the same issue. Are you sure? I just tried it and it seems to work just fine. The thing I'm most interested in, though, is the WHY? I want to Did you check the BugZilla database? https://bugzilla.mozilla.org/query.cgi?format=advanced Thierry | http://www.TJKDesign.com ** 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] the mysteries of float - i seek enlightenment
Ingo Chao wrote: This is float Rule 5: A floating element's top may not be higher than the top of any earlier floating or block level element. I knew how to fix the issue, but I was missing the big picture. So thanks for that piece of information Thierry | http://www.TJKDesign.com ** 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] the mysteries of float - i seek enlightenment too
Ingo Chao wrote: While I was zooming the text-size in FF, I saw that one line of text partly overlaps the red float. http://www.satzansatz.de/cssd/tmp/lineinfloat.html looks like the real browsers have some float bugs too. FFnightly20050525 WinXPSP2. Can this be confirmed on a Mac build? If this is a bug, someone knows the bugzilla entry for this? What about this one? https://bugzilla.mozilla.org/show_bug.cgi?id=41412 Thierry | http://www.TJKDesign.com ** 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] why doesn't this validate with w3c.org and what to do about it
[EMAIL PROTECTED] wrote: checked it and w3c css validator didn't complain? once i changed test-align to text-align If the Validator returned this error, but that you didn't notice anything abnormal in the rendering of the page it is possible that you can safely remove the whole declaration rather than correcting the spelling of the attribute ;-) Thierry | http://www.TJKDesign.com ** 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] An alternative to FIR (Fahrner Image replacement)?
Hi all, I think I may have found a new way to enhance the original idea: The demo (scalable image): http://www.TJKDesign.com/articles/tip_5.asp The article: http://www.TJKDesign.com/articles/tip.asp Please report any error you may find. -- Thierry | http://www.TJKDesign.com ** 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] An alternative to FIR (Fahrner Image replacement)?
Jan Brasna wrote: Well, I don't fancy it much, I don't like the idea of presentational image in HTML... I personally use own solution[1], based partly on Dynatext[2]. Now I'm playing with Anatoly's DIR[3] http://fecklessmind.com/main/5/definitive-solution-to-image-replacement If the user browses with images disabled and large text-size, the heading is cut-off because of the overflow declaration. Don't get me wrong, I'm not saying this method (that I mention at the bottom of the article as well as sIFR) is not one of the very best, I'm just saying that it has atleast this issue regarding accessibility. Thierry | http://www.TJKDesign.com ** 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] An alternative to FIR (Fahrner Image replacement)?
Patrick Lauke wrote: Maybe I'm missing the point here, but...have we just come full circle? If you're already adding IMG to the markup, what's the point of doing h1img src=/img/helloworld.gif alt= /Hello World/h1 and applying lots of CSS to hide the text, if a simple h1img src=/img/helloworld.gif alt=Hello World //h1 will do? You mean even if images are disabled? That's true with some browsers, but not all. I believe FF and Safari do not show the alt attribute value at all when images are disabled. And in MSIE, this value is not displayed in relation to the user's settings regarding text-size. Another idea behind the IR techniques is the flexibility of defining your images in the CSS, so that you can change them easily later by simply editing your stylesheet. Your technique hardcodes the images in, offering no such benefit (if the image's filename changes, you'll have to go back to all your HTML pages, rather than just editing your CSS). To make it flexible, you could use a dummy placeholder image in the HTML img src=/img/trans.gif / and use CSS background image for the real image, but then you may as well use any other element (such as a SPAN in...whatever IR technique I'm thinking of). You're too quick to criticize the method ;-) Read the article and you'll see that's the way I do it already. The last example, the one I've posted, is only to show the scalable part (that would be rarely needed because of type face). BTW, what would be the advantage of using a span rather than an img element? And then using CSS declarations that may have SEO implications or, worst, create accessibility/usability issues? Nice writeup, but this seems like 2 steps back, rather than a step forward, unless I'm missing something fundamental here... I'm not saying it's fundamental, but I was after a fully accessible solution. ;-) Thierry | http://www.TJKDesign.com ** 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] An alternative to FIR (Fahrner Image replacement)?
pixeldiva wrote: You mean even if images are disabled? That's true with some browsers, but not all. I believe FF and Safari do not show the alt attribute value at all when images are disabled. And in MSIE, this value is not displayed in relation to the user's settings regarding text-size. They do, they just don't show alt text pop up as a tooltip (because it was never meant to be implemented this way). Who's talking about tooltip? :-) If I disable images in FF and Safari I do not get anything. Do you? Regarding MSIE, what I meant is that the alt attribute value does not match the text-size in relation to the heading. And I'm not even talking about people using their own styles sheet, that could include: img {display:none} What do you think these people would get? Thierry | http://www.TJKDesign.com ** 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] An alternative to FIR (Fahrner Image replacement)?
Patrick Lauke wrote: Unless I'm mistaken, the WebDev extension does a fairly brutal remove images from the DOM. A far more accurate test (if you don't want to change your global options) is to choose WebDev's Images Replace Images with Alt Attributes option. Can't vouch for Safari, but if it doesn't behave the way FF does, it's going against the spec and against User Agent Accessibility Guidelines. You're right I was not using FF Web Features, but the WebDev toolbar. So it's true that people who would use the built-in feature would get the alt attribute value. But still! What about Safari and MSIE users? All UAs have flaws. IMO, our business is to deal with them rather than using the specs as an excuse for not implementing the most accessible solutions. Thierry | http://www.TJKDesign.com ** 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] An alternative to FIR (Fahrner Image replacement)?
pixeldiva wrote: Yes. I do. I get the alt text where it's been applied. As Patrick pointed out, you must be using the built-in function of FF, but it does not work that way in Safari (atleast in v.1.2.4). Regarding MSIE, what I meant is that the alt attribute value does not match the text-size in relation to the heading. Agreed. I wasn't remarking on MSIE at all. We're talking about accessibility (at least I am), so I'd say that leaving some UAs out of the discussion is kind of a problem ;-) And I'm not even talking about people using their own styles sheet, that could include: img {display:none} What do you think these people would get? That would depend which technology they use to browse. I don't understand what you mean by technology. I'm talking about using a simple style sheet to set one's own preferences to take over the author's styles. Most of the time, I'd say it is to hide images, enlarge text-size, add contrast to the documents, etc. Thierry | http://www.TJKDesign.com ** 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] An alternative to FIR (Fahrner Image replacement)?
Patrick H. Lauke wrote: Ok, the IR technique I was referring to (now that I've checked) was the Gilder/Levin method http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin Believe it or not, but I didn't know about that one ;-) Identical approach in term of CSS, but - as you know - very different regarding markup. which uses a span, and my point was: if you're using CSS to scale and apply background to what is essentially an empty/transparent image (a 1x1 transparent gif or whatever), then why use an image at all and not How do you make the background image of this neutral element scale? settle for a completely empty, neutral element like a SPAN (as happens in the Gilder/Levin technique)? Either way, you're adding extra markup to your HTML, so you may as well use something empty. The Gilder/Levin method relies only on CSS to display the image, if there is a need to show both elements in the heading the solution fails if the document is unstyled. Also, an empty span is nothing more than an empty span. I believe an image with meaningful title and alt attributes may be of better use. Thierry | http://www.TJKDesign.com ** 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] An alternative to FIR (Fahrner Image replacement)?
Philippe Wittenbergh wrote: For Safari (using 1.3), with images disabled, I get a grey outline where the image should be, and **sometimes** the alt text displayed. Like: if it fixes inside the bounding box for the image. If the text is too long, (ie a long long alt text) on a 20px by 20px image, the alt text is not displayed. Not Good. Thanks for the info Thierry | http://www.TJKDesign.com ** 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] Opening external links in popup windows with no extra markup
Hi all, I'd appreciate your feedback about this technique that does not rely on hooks; it only uses the href attribute... http://www.tjkdesign.com/articles/popups.asp Thanks, Thierry | www.TJKDesign.com ** 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] Opening external links in popup windows with no extra markup
Hi Brian, Looks good Thierry. Thanks One thing though-- what happens to mailto: links? Good point! To be honnest with you I didn't even think about these :) But they are safe because I'm checking for an HTTP string inside the attribute's value. I think this method could be used to style mailto: links as well, to let the user knows that clicking on them will open another app... Thierry | www.TJKDesign.com ** 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] Opening external links in popup windows with no extra markup
I think you ought to check specifically that 'http://' is at the beginning of the string. Good point, I'll change this. a href=/protocols/about_http.htmlFind out about HTTP/a a href=/affiliate.asp?ref=http://foo.com/bar.php;Set your affiliation reference cookie/a And other than the design choice of whether all external links ought to open a new window, I think you've got something good. I like your idea of attaching the style and title with javascript so as to leave the natural behavior intact. Thanks, but don't give me credit for that :) The only thing I claim here is the use of the href attribute as the only element to use to determine on which links behavior and style should be attached (external links, files inside a specific folder, links inside a specific element...). Thanks for your feedback and suggestion, Thierry | www.TJKDesign.com ** 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] Opening external links in popup windows with no extra markup
A more reusable approach would be to check for '://', as this is what differentiates 'mailto:', relative paths and 'http://' links, but will still allow you to use the script on secure pages. Whenever dealing with href maniputlation, it's always good to keep 'https' in the back of your mind ;) Nice catch! Other than that, it looks like a great approach for sites with client controlled content. Thanks Andrew, Thierry | www.TJKDesign.com ** 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] Opening external links in popup windows with no extra markup
Andrew Krespanis wrote: The problem was that we wanted to handle links to non-html files in a different manner than regular links. Ideally, it shouldn't require any more effort from the content author. The following page shows a simple demonstration of the solution: http://leftjustified.net/lab/javascript-file-links/ Nice! Thanks for sharing... Thierry | www.TJKDesign.com ** 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] Regexp vs indexOf (followup on: Opening external links)
Ben Curtis wrote: But, honestly -- fractions of a millisecond. The only concerns I have for the equation are: 1- if it's unobtrusively applied, then is it bullet proof (that is, can it give a false positive a non-scriptor will have to contend with)? 2- is it easy to read, understand, and modify three years later without documentation? concern #2 is what made me stick with indexOf And thanks for the followup, it made me notice that I was still using toUpperCase after switching from HTTP:// to :// Thierry | www.TJKDesign.com ** 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 question - user style sheets
or a prefs page ala Stop Design. http://www.stopdesign.com I'm using server-side scripts to switch Styles Sheets and keep user's preferences active: http://www.css-p.com/TNT/ Thierry | www.TJKDesign.com ** 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 question - user style sheets
Peter Firminger wrote: You have a usability/accessibility issue with the onChange event on the style switcher. Take it out and add a button to submit it. Try NOT using your mouse and tab through to that form instead, then try and arrow down and you'll see the issue. I know about it, but didn't want to put a button in there. The second link on every page (after the skipnav) is accessibility, and on that page the same options are available to all users. But thanks for pointing it out, I may include a CSS popup or something just for the non-mouse users. Thierry | www.TJKDesign.com ** 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 question - user style sheets
Peter Firminger wrote: You have a usability/accessibility issue with the onChange event on the style switcher. Take it out and add a button to submit it. Try NOT using your mouse and tab through to that form instead, then try and arrow down and you'll see the issue. Even something like http://esrab.webboy.net/toolkit.cfm Peter, I'm back to tell you that in fact I was totally missing the usability issue. I knew the feature was accessible (through another page), but I blanked on the fact that some users would automatically trigger the first option in that list. I'm still not using a button, but I removed the select for these users. Thanks for the heads up... Regards, Thierry | www.TJKDesign.com ** 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 IE Hacks
Darren Wood wrote: I use a very simple rule that will allow for CSS validation... Its the * html selector As a side note: - Conditional Comments are IE/Win only (= v5), - the star selector hack works with IE/Mac too. Thierry | www.TJKDesign.com ** 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] Sliced Image Dilema
Jeff D. Reid wrote: Can anyone here please post urls to some reading regarding the use of sliced images in building a website vs using CSS instead. Kind of a pros and cons type of paper. I'm not sure I understand your question. Is it about tables used to hold sliced images, like some Graphics program create? Thierry | www.TJKDesign.com ** 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] Spacing Issue
Webmaster wrote: a div-based header/3-column/footer layout that is accessible. http://www.google.com/search?q=3+column+accessible+css+layout yields some good results... Sadly not. The search for a valid CSS/(X)HTML, hack-free, 3-column CSS layout continues. Did you see this one?: http://www.tjkdesign.com/articles/3cols/3cols/6.asp HTH, Thierry | www.TJKDesign.com ** 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 - opening new windows philosophy
I fall in line with Gary. I do to, it just makes sense I use this: onclick=window.open(this.href); return false; instead of target=_blank. This short script doesn't name the window, so it should spawn multiple popups. I'd use: onclick=window.open(this.href,'myPopup'); return false; As a side note, some blockers kill these popups. Jeremy Keith recently spoke about using the class in the link to target a javascript to add the behavior, leaving a nice, clean link. One can apply the behavior without any attribute other than href http://www.tjkdesign.com/articles/popups.asp Thierry | www.TJKDesign.com ** 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 - opening new windows philosophy
Gez Lemon wrote: Hi Thierry, This short script doesn't name the window, so it should spawn multiple popups. I'd use: onclick=window.open(this.href,'myPopup'); return false; As a side note, some blockers kill these popups. The window.open function returns true if successful, otherwise false. You could use the return value to determine whether or not you want to stop the href attribute being honoured to cater for blockers. Hi Gez, I thought we had that discussion already ;) Best regards, Thierry | www.TJKDesign.com ** 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] window.open and popup blockers
Following the opening new window philosophy thread, I'm curious to know if there are blockers out there that *kill* links that trigger popups (do not open a new window, do not call the href value either). I can understand the logic behind ignoring window.open (even in an anchor), but then I think a return false statement should be ignored as well. AFAIK, that's Opera's behaviour... Thierry | www.TJKDesign.com ** 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 - opening new windows philosophy
In the case of PDFs opening in a new window, you might not even need to add a class. You could write a function that looks for the file extension .pdf in the href attribute and open that link in a new window. Andrew Krespanis posted this link a few weeks ago http://leftjustified.net/lab/javascript-file-links/ Thierry | www.TJKDesign.com ** 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] window.open and popup blockers
Jan Brasna wrote: I can understand the logic behind ignoring window.open (even in an anchor), but then I think a return false statement should be ignored as well. Are you sure? There's no reason for such an action. Jan, I'm not sure I understand your question regarding what you've quoted. Do you mean there is no reason for ignoring the return false statement? Thierry | www.TJKDesign.com ** 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] window.open and popup blockers
Jan Brasna wrote: Do you mean there is no reason for ignoring the return false statement? Yes. I can't see any reason why a browser/plugin/firewall etc. should ignore an independent part of a JS code. I see one. In that particular case, such behaviour makes sure that the user still can reach the href value. IMO, it makes sense, and AFAIK, that's how Opera's blocker works. It ignores *both* statements, window.open *and* return false. That's why I didn't really see the need for testing for window.open to begin with, because in my mind a blocker that ignores window.open in an anchor should honour the href value. Thierry | www.TJKDesign.com ** 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] window.open and popup blockers
Gez Lemon wrote: I've no idea whether Opera does ignore return false statements, but it would be outrageous if it did as it completely violates ECMA-262. Ignoring whether or not it's good practice to have JavaScript statements in an inline event handler, it is legal, and each statement should be considered standalone. It's up to the programmer to add the control structures to determine which paths are followed, not a browser based on the presence of a function call. Jan, Gez, I'm talking about a simple: onclick=window.open(this.href,'myPopup'); return false; In this particular case, if you consider normal to arbitrary ignore the window.open statement, then why do you consider outrageous to ignore return false. IMO, that's a smart way for a blocker to give control to the user over the popups without killing the links. I know Opera's blocker behaves this way, so if it violates ECMA-262 I believe it's for a good cause ;). FMI, do you actually know blockers that kill these links? Thierry | www.TJKDesign.com ** 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] window.open and popup blockers
Jan Brasna wrote: In this particular case, if you consider normal to arbitrary ignore the window.open statement [...] It does not ignore it! The method is fired successfully, but the environment processing it just does not open new window and tells the method to return false. It is not ignored in any way. The environment processing it just does not open new window vs. it ignores it... Is that supposed to answer the question about the *return false* statement that is ignored by the browser (Opera in this case)? FMI, do you actually know blockers that kill these links? Eg. older Operas. That'd show that they considered previous versions of their blocker as flawed, no? Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **