[WSG] question about max-width's behaviour
I thought max-width tells the browser: This is the limit of the width you can expand, regardless how big the screen is. But my testing shows that, with a max-width of 60em, a 1680px wide monitor, when a browser is opened in full screen, with fontsize increases, the page just continued expanding until it reaches 1680px full screen. If I drag the screen to the second monitor, it keeps expanding. If I make the screen smaller to 900px, then expansion stop there. Am I missing somthing? I tried setting a max-width of 1024px and 60em width , it doesn't work, my test shows that FF and Safari ignore the max-width. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] question about max-width's behaviour
On Nov 21, 2007, at 3:30 PM, Adam Martin wrote:
What are you putting the max-width declaration on? a div for example?
adam
I have something like this right now:
#wrapper {max-width: 60em; min-width: 600px;margin:0 auto; }
#container, #btm_wrap { margin:0 auto;position:relative;text-
align:left;}
It was this:
#wrapper {width: 100%}
#container, #btm_wrap { margin:0 auto;position:relative;text-
align:left;max-width: 60em; min-width: 600px;}
div id=wrapper
div id=container.../div
/div
div id=btm_wrap.../div
None of them changes anything, even with the #wrapper div removed
(which I just realized can be safely removed)
This site uses min/max width and the behaviour I see is the same as
mine.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] question about max-width's behaviour
On Nov 21, 2007, at 5:02 PM, Jermayn Parker wrote: good example of this is: http://www.456bereastreet.com/ It behaves the same as mine as well as the think vitamine. This is because em is a measuring unit relative to the font size of the page, so as you increase the font size, the size of 1 em increases as well, and therefore your max-width of 60em gets larger and larger. I DO understand this. Perhaps what I don't understand is the max- width concept. I thought 'max' means there is a limitation regardless what condition a page is, and I thought this 'limitation' should include the 'em' unit. The purpose of max-width loses if it can't overruled the em's behavior. Do I making myself clear or stupid? :) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] question about max-width's behaviour
On Nov 21, 2007, at 5:05 PM, David Laakso wrote: This site uses min/max width and the behaviour I see is the same as mine. Oops, forgot to post the url in my previous post. http://www.thinkvitamin.com/ (one of the best layout I even seen!) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Site check
On Nov 16, 2007, at 7:23 PM, Kenny Graham wrote: I don't think the grey used nicely; give me an impression that it's an advertising firm with very conservative, uncreative image. Content area without bg color may looks cleaner. Home page is the most important real estate for a site, I think it presents better if making it to 2 columns floated with 2 rows, so that your visitor can see the 4 big buttons without having to scroll down to find out what services your firm offers . Brand | Print --- Web | Media Make it elastic with min/max width support, so user with big screen won't see the big empty space on the right, and those who prefer viewing at 800px can see what you have now. I really don't like to have to scroll up so that I can navigate to another page. Lastly, when I click the home button, I see 'about' text popping up on top of about button, this happens to other 3 buttons too. regards, tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Skip nav links, tab through
On Nov 15, 2007, at 7:13 AM, Steve Green wrote: Links are not on the tab sequence in Safari by default, but you can turn that on in the Preferences. I have no idea if users actually do in practice. I still unable to figure out how Safari tab feature works. I already have it turned on but when I 'tab', the feature never work for any sites but the Safari menu (address bar and bookmark bar) only. I don't know what I am missing, as I obviously can get the tabbing work in Firefox. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Skip nav links, tab through
On Nov 15, 2007, at 5:42 PM, Philippe Wittenbergh wrote: You need to turn FKA (Full Keyboard Access) 'on' in System Preferences Keyboard and Mouse. Also for Safari and Camino: Safari: Preferences Advanced: see the checkbox. Camino: Preferences Web Features: see the checkboxes at the bottom. Thanks Steve and Philippe, Finally got it working. I didn't check the 'Advanced' as I am average user :-) So much for the universal access of Apple! Glad to know Camino has this feature too (I swear I checked it) as this is my default browser for web browsing. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] opera doesn't play nice with Opacity
James, I have no idea whether Opera uses Qt4 or 3 but it may filter through in time to a new Opera release (try Opera 9.5 beta - it may have it already). I have 9.5 Alpha Beta. Do you know if Opera is quick to bug fix? If not, I don't want to bother to report the bug. :-) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] opera doesn't play nice with Opacity
Many thanks again to everyone who replied to my post. On Nov 13, 2007, at 5:52 AM, Navjot Pawera wrote: I have 9.5 Alpha Beta. Do you know if Opera is quick to bug fix? If not, I don't want to bother to report the bug. :-) I just checked the thread and saw this discussion. It would a big help if you could file that bug (as you've already been playing around with it - you'd probably will be able to explain it better). You can be assured that we'll do our best to get this rectified in the newer builds as soon as possible (if it is a valid bug of- course - I haven't really been able to check the Navjot, yes I filed it early this morning. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] opera doesn't play nice with Opacity
On this site,
body {background:#FFB701}
where footer wrap has opacity of 0.92 with a bg color
#ftr_wrap {background:#0d0d0d;
opacity:0.92;}
and 3 columns has
#col1, #col2, #col3 {background:#1a1a1a;}
I think Safari and Firefox got it right, that the 3 columns' elements
are 'inheriting' the opacity from the #ftr_wrap, which is what I wanted.
But Opera doen'st seemed to agree.
http://lotusfromthemud.com/goldenlotus/index.html
Also, I know I am asking something close to impossible for pixel
perfect, but is there a way I can make it less obvious between PC and
Mac for the h1 text.
I have h1 fontsize first set to 380%, then settled for 3.8em for now.
h1 id=logoa href=#homeGolden Lotus/a/h1
#logo was first floated left with margin-top, the text was 3px lower
in my PC's FF and Opera, so I changed it to
#logo {margin-top:290px;position:absolute;}
It doesn't change at all.
http://www.lotusfromthemud.com/goldenlotus/mac.png
http://www.lotusfromthemud.com/goldenlotus/pc.png
Thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] opera doesn't play nice with Opacity
On Nov 12, 2007, at 8:56 PM, Ben Buchanan wrote:
You are correct: Opera doesn't do opacity.
Actually a quick test in Opera 9.24 (PC) shows that Opera does do
opacity; so opacity support isn't the issue. Perhaps a selector/
inheritance issue?
Test case:
Hi Ben, thanks for the test. It doesn't quite work in my Mac Opera
9.50 Alpha, when mouse over, nothing happens, but I can see the
opacity effect if I select the h1 text.
I also found another problem, this confirms Opera has Opacity bug.
In the left column of golden lotus's page, I also use the opacity for
this id:
#bgtop {background: #efefef;opacity:0.95;border:6px solid #fc5;}
and
#left_col {background:#fc3;color:#212121;}
probably should remove this div entirey but my first draft was using
a rounded corner image for the top of left column, thus extra div was
used.
The text in the #left_col should be black text, there in Opera some
of the texts are showned in #fc3 color which is the background color
of #left_col.
http://lotusfromthemud.com/goldenlotus/opera.png
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Styling option [Forms]
On Nov 4, 2007, at 5:27 AM, James Jeffery wrote:
Hi all
I have a select box that has a greater width and hight then the
standard size. I am trying to center the default option that displays
in the select box. I have tried padding: xem 0; and it centers the
options when the list is displayed, but the default option does not
change.
Basically i want to center (vertically) the default option in a
select box.
Anyone got any ideas i have tried for a while and can't get it to
work.
When I run into this problem, I declare width for 'select'.
select {width: 250px}
If I want to style the option values in Firefox, I add a class like so
.option {border-bottom : 1px solid #efefefe; padding: 3px
;width: 250px}
If a class is added, I don't declare width in 'select'.
IMHO, this looks so much better than making text center just for the
Gecko based browsers. I do care the aesthetic inspiration, but using
JS to overwrite browser default for option attribute isn't something
I aspire :)
'width' works for all browsers I have tested : Safari, IE, Opera,
Firefox and Camino
'text-align' only work in Opera and Firefox. In Camino, only the
first option value works.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] How z-index works
Thierry, excellent work! This is a good case of a picture worth thousand words - I think I pretty much understand how z-index works (after many hours of testing and an assignment from the CSS.2.1 class) but I still not able to get a comprehensive understanding from that article on z-index. On Oct 29, 2007, at 10:57 PM, Thierry Koblentz wrote: Hi John. Sorry to hear that, but I don't know what to say as nobody else has reported having problems :( You may want to have your web host take a look. It may be DNS caching (not sure if it's correct word) with your IP address. I encountered this problem with sites from Asia and Europe , because I really wanted to see the sites, so I reported the problem, and suggested them contact their web hosts. After that I was able to get the sites loaded. You maybe able to find out yourself from dnsstuff.com by entering your IP address, then report to your webhost. The first time I couldn't see a site and the site owner had no idea why, someone from another list told me to look up the IP address of that site to look for anomaly, thus I was able to tell the site owner to seek help from his webhost. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] skip to content: care of accessibility causing usability
On Oct 30, 2007, at 5:56 AM, willdonovan wrote: I dont seem to get any of the flicking effects that everyone is talking about. I'm using Firefox 2.0.0.8 Hi William, thanks for checking. It was eliminated :) This site has something similar to what I did - I think I must have gotten the idea from it ；） http://www.themaninblue.com/ tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] skip to content: care of accessibility causing usability
I agree with you: the 'hover' technique is way more annoying, and
it will annoy way more people.
Thanks all for your response. I now can clearly see I got myself
carried away by my 'try-to-do-thing-right' little obsession :)
Ok, three of you said skip to content is of little use in this site,
but if I still want to keep it (and able to keep client happy), I
suppose this won't upset users right?
#skip_nav a {display: block;padding: 0.35em;text-indent: -200em;text-
decoration: none;}
John said don't use display:block. Actually the very reason I used it
is because I want a user able to click on any area of the top. Is
this as bad as the annoying hover effect?
Georg, can you kindly take a look on IE6? The horizontal menu
doesn't load smoothly, when the page is fully loaded, the header's
part reloads, I suspect it has to do with the clear both class yet I
can't figure a fix for IE (tried all tricks from hasLayout)
div id=header
h1 id=logobackground image spanxxx/span/h1
div id=header_search/div
div class=clear !-- without clear:both the horizontal menu
moves up, sits below the search field --/div
div id=menu
liHome/li
lixxx/li
/ul
/div
div class=clear !-- the gray background won't show up without
clearing --/div
/div
#logo {float: left}
#header search {float:right}
#menu{background:#f3f3f3;width:100%;margin-top:0}
.clear {height:0;clear:both}
IEs show a 6px to 8px gap between h1 logo and the menu., so I have
margin-top: -6px for IEs. my guess is the clear class causing it.
It works except that in IE 6, as described, the header reloads after
the page fully loaded.
Thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] skip to content: care of accessibility causing usability
On Oct 28, 2007, at 3:56 AM, Stuart Foulstone wrote: But the point is that, this accessibility feature is for people who can't use a mouse - i.e. they cannot click anywhere. Ah yah right A good point you have made. I am a 'mouse' user, and I do find skip to (content/navigation) useful for me. Now you pointed out ( John and other did too but I was blind :) ), makes me realized I was mainly viewing this feature from my own' benefit. Glad that I asked. Sometimes one has to show one's ignorance so one can learn something important :) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] skip to content: care of accessibility causing usability
Georg, thank you so much! IE6 displayed correctly except the header problem I wrote. I did a lot of tweaking in the main stylesheet after my post , and didn't get to check on IE6. You saw the 'wrong version' :), but I notice the header's reloads disappered now the right column sits below the left. this makes me rethink maybe the mini-cart that has negative margin top causing (I ruled this out before), or the auto-expansion. Thanks for the advice on hasLayout tricks. I will give it more thought next time I tempt to use again. A fixed-width approach will _just work_ in all browsers, and make it much easier to get IE6 to behave like a browser. I need to accommodate 800px screen for a very specific reason, but this layout doesn't look good (especially in product page) in 800px. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] skip to content: care of accessibility causing usability
I am having an issue and I can't seem to see the whole picture objectively. Thanks to your influences, it has become my second nature to have 'skip to content' in every site I do (sites I have control over the design and layout); when I do markup coding, clients often ignore the 'skip to content' and 'skip to nav' - I managed to convinced them a couple times with a compromise to hide it from browsers by using 'display:none', because, according to them, only screen users need 'skip to content'. I am doing a site that I have control on design and layout, client asked to remove the 'skip to content' when I showed him the first layout, I tried to talk him out by stating how important it is to have the 'skip to content' implemented. He didn't buy it, so I came out with this technique: teesworks.com/ (move your mouse to the top to see the result). Haven't show it to client yet. Been working on this site in the last 2 days, I find that I am getting so annoyed by the surprise' everytime the hover pops up. There is no way to miss it everytime I move the cursor to the top. If I, the site builder, find it annoying, what will the users find ? I am beginning to think this is causing a usability issue and is killing all other usable elements that I work so hard to try to get them right. Please give me your thought. Many thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] browsers render differently with Optroup
I am working on a web form that has Optgroup in it, and the first time I realized browsers render this attribute differently. I have something like this: optgroup label=United States option label=CA value=CaliforniaCalifornia/option /optgroup In Firefox, it display: California In Safari and Opera, it displays: CA p/s. Haven't check on IE yet. According to w3c's html spec http://www.w3.org/TR/html4/interact/forms.html#form-labels I made an example page with markup copied from the above page http://lotusfromthemud.com/option.html represents the following grouping: None PortMaster 3 3.7.1 3.7 3.5 PortMaster 2 3.7 3.5 IRX 3.7R 3.5R In 17.6.1 Pre-selected options, scolled down to the end of 17.6.1, It says: A graphical user agent might render this as : (screenshot from old Netscape I think) Gecko based browsers are graphical user agents yet Safari and Opera are not? (!!!) Screen reader isn't graphic user agent, so it will read 'CA instead of 'California'? It's quite annoying if I have to add : option label=California value=CaliforniaCalifornia/option tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Title attribute and screen readers
On Oct 24, 2007, at 4:27 AM, Patrick H. Lauke wrote: Try tabbing to a link with a title via keyboard, and tell me if it brings up a tooltip or similar to let a sighted user read the title... So it's concluded that title attribute is as useless as tabindex and accesskey and therefor shouldn't be used at all? Need acknowledge by your accessible mastero :) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Title attribute and screen readers
So it's concluded that title attribute is as useless as tabindex and accesskey and therefor shouldn't be used at all? Need acknowledge by your accessible mastero :) Need acknowledge from your accessible mastero :-) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] browsers render differently with Optroup
On Oct 24, 2007, at 12:14 AM, Philippe Wittenbergh wrote: On Oct 24, 2007, at 3:27 PM, Tee G. Peng wrote: I am working on a web form that has Optgroup in it, and the first time I realized browsers render this attribute differently. IE Mac displays 'CA' in your 1st example IE 7 Win displays 'CA' in your 1st example Opera 9.5 alpha: idem ditto. I made an example page with markup copied from the above page http://lotusfromthemud.com/option.html Under 17.6.1 it says (specifically for label in option): http://www.w3.org/TR/html401/interact/forms.html#adef-label-OPTION label = text [CS] This attribute allows authors to specify a shorter label for an option than the content of the OPTION element. When specified, user agents should use the value of this attribute rather than the content of the OPTION element as the option label. That sounds, to me, as validating what Safari, IE Mac, IE Win Camino are doing. Note that Firefox is not wrong by the description given above. I am sorry I only understand this thing half. We must use 'label' right? option label=3.7 value=pm2_3.7PortMaster 2 with ComOS 3.7/ option So Firefox reads PortMaster 2 with ComOS 3.7 and the rest of the browsers read from 'label' attribute, so the screen reader? Can 'value' be removed? Everytime I work on a web form, the same qeustion kept throwing back to me. Is there any attribute one can saftly remove without causing browsers, screen reader and form script suffer? label and ID are needed, Name also needed for the form script I use; this leaves the 'value' which I never able to decide the *value* of its usage. I really find a markup like this is too much label for=myformMy form /label input name=myform id=myform value=myform tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Priority 2 error - Clearly identify the target of each link.
working on a project that must meet all mechanical check for priority 2, via WAI or Total validator. Client is from UK and according to an article I read, by year 2008, all government websites must meet the priority 2 is that correct? This is not a site for government but client wanted WCAG AA compliant. In the site, there is a section for blog, and the excerpt follows with a 'continue reading' link (title attribute generated by the blog or CMS script I have yet to find out, and can't find a way to change or customize it). In the same page more than one article is listed, that means more than one title attribute with 'continue reading', as a result I am unable to pass the Priority 2: 13.1 Clearly identify the target of each link. http://www.w3.org/TR/WAI-WEBCONTENT/#tech-meaningful-links Can this idiotically error be ignored? Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Priority 2 error - Clearly identify the target of each link.
Russ,
On Oct 20, 2007, at 3:31 PM, russ - maxdesign wrote:
Hi Tee,
Is it an Idiotic error?
Imagine you're blind...
Ok, since you put it this way, I will reconsider my choice of word :)
(thanks for the grammar correction).
You have given a good reason, still, I think that criteria should
have room for flexibility (just as George has given the same reason)
because, link texts in the articles aren't the same and the excerpt
of the article should have given enough information for a user
(including screen reader user) whether he wants to continue reading
the full article. If my argument is prudent, I think validator should
have something like
if {this}
else {that}
argument, so that it doesn't blindly flagging an error when it finds
two same texts for title attribute:)
If law requires websites must passed mechanical check, yet the logic
behinds that criteria has flaw but validator can't verify it, I think
we have a big problem here.
I don't have screen reader to test, so I can't verify your argument
about the frustration that may cause to a screen reader user if he
jumps from one link to the other, although, I would thought he would
have the software read out the excerpt, because, when I use Apple
VoiceOver, that is exactly how I will do.
Despite many posts and articles I have read, how screen reader
behaves is a myth to me. I think I remember reading someone (Steve?)
said that no all screen readers read the title attribute.
Guess I still haven't gotten my question answered :-(
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] introducing a prompt to download or open a pdf
On Oct 16, 2007, at 12:39 AM, Chris Price wrote: BTW Macs don't have a right click. Hi Chris, Mac has right click. It's just Steve Jobs made it so difficult with his Apple mouse (a piece of pricey junk). If you use Apple mouse, use the combination of control on keyboard + click on mouse, this will open up the right click window for options. I think it worth to include this little info for user education when a web design opted to use right click for download/open new window. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE 7 check please
Hi Kepler, Thanks for checking. For http://spanish-portuguese.berkeley.edu/ - I'm not seeing a horizontal scrollbar in IE7 until you resize below around 770px (after the 3rd column drops below the 2nd). I suspect this is the behavior you wanted since FireFox behaves the same way. One thing I did note was the search heading remained at the right and didn't drop below the second column like the rest of the 3rd column. I suspect it is because it is contained in the second column's div: I guess this one isn't a good example of what I was trying to find out in IE 7 as it's min-width is smaller than 800px. For http://www.thinkvitamin.com/ - This site has a scrollbar in IE7 around 884px. It appears that this is caused by the footer. In FireFox it just ignores that the right portion of the footer is being chopped off and doesn't give you a scrollbar but as soon as the footer content doesn't fit in IE7 the scroll bar appears. I didn't noticed that the content in footer being chopped off, but yes, this is what I was trying to determine whether IE 7 has issue with elastic + fluid layout (is there a name for such layout?), or other browsers that got the words chopped off is wrong. I made the screenshots for Firefox in Mac and PC, and IE 6 Vs IE 7 standalone. http://lotusseedsdesign.com/ff.png http://lotusseedsdesign.com/ie.png - you can clearly see IE 7 has scollbar at 800px and the reason for it is footer text. I am trying to fix a similar layout that I submitted to accessites.org. My layout initially was elastic and aimed for 1024 screen user, however they found horizontal scrollbar at 800px - 800px without horizontal scrollbar is one of the criteria. I wanted this be fixed, so I amended my layout to elastic + fluid like the above two sites, and I am getting some 70px scrollbar at 800px screen in my standalone IE 7, not IE 6. (no special treatment is served for IE 6/7 for the outer wrap). At 800px screen in other browsers, no words being chopped off though. Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE 7 check please
On Oct 14, 2007, at 12:14 AM, Donna Jones wrote:
Tee, i just looked more at the http://www.thinkvitamin.com/ site.
yes, i get the scroll bar at 800 wide in IE7 (not standalone). and
yes, its because its not chopping off the footer (wouldn't have
noticed, probably, though if Kepler hadn't noticed and then you re-
mentioned it). In IE6 it doesn't chop off the footer and there is
no scroll BUT its broken, the divisions don't line up right (they
sorta fall all over the place). In mozilla there is no scroll but
the footer is chopped off. so, it seems like out of those three
that IE7 is handling it best. In mozilla, using Tidy, it says
there are 136! warnings. and , some in particular are missing
division endings. also, just noticed at 800 wide in mozilla the
divisions overlap in a way that doesn't work well, at all. i think
someone needs to take a look at it!
Thanks Donna, thanks for checking.
I am not concerned how thinkvitamin has errors and warnings and text
got chopped off because that is beyond my control but the owner of
the site. That site is made for wider screen audience but made
consideration for 800px screen user (a close to none-existence for
its audiences I would say). So my take is they aware of the issue and
decided not to bother.
My quest is whether IE 7 has issue with elastic + fluid' layout, as
shown on that two sites and mine.
Anyhow, I found the answer myself. In my layout I have an element
with background image, and I have a span class for image replacement.
h3 {url(image.png) no-repeat}
h3 span {position:absolute; text-indent: -3000px}
h3heading 3/h3
Apparently the position:absolute or the text-indent was causing that
extra 70px white space in IE 7, thus resulting a horizontal
scrollbar. Note that 70px extra is there whether the screen is 800px
or 900px. it's just not noticeable with wider screen.
It goes away when I change the absolute to relative, or text-indent:
-3000px to 'left: -3000px'
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Jquery and/or Yahoo UI
Can you comment on Ext JS ? http://extjs.com/ I'd been wanting to know how it measure up with standards but thought this is not a place to ask, but where is the better place to get a better answer regarding standards? :) tee On Oct 12, 2007, at 10:56 AM, Christian Montoya wrote: On 10/12/07, Simon Cockayne [EMAIL PROTECTED] wrote: Hi, Anyone using jQuery (http://jquery.com/) or Yahoo UI (http://developer.yahoo.com/yui/) ? *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] IE 7 check please
Can you please tell me if you see a horizontal scroll-bar in these two sites in IE 7 (not standalone), in 800px wide screen. http://spanish-portuguese.berkeley.edu/ http://www.thinkvitamin.com/ I am working on a similar layout and in my standalone version it has scroll-bar, not in IE 6 though, therefor I don't want to fix something I am uncertain whether that is a bug in IE standalone and beta. If it also show up in IE 7, has anybody encountered similar before and if you know the quick fix? Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE 7 check please
On Oct 12, 2007, at 10:33 PM, Tee G. Peng wrote: Can you please tell me if you see a horizontal scroll-bar in these two sites in IE 7 (not standalone), in 800px wide screen. http://spanish-portuguese.berkeley.edu/ I forgot to mention, in the above site, it actually is about 776px before you see a horizontal bar, but that doesn't eliminate my suspicion that IE 7 has issue with elastic layout, becaus at IE 6, the scollbar appears when the sreen is smaller that 769px. thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Cost of Accessibility
On Oct 8, 2007, at 8:32 AM, Joseph Taylor wrote: There's plenty of people all around me that build crap sites for cheap. Always will be. If I may add, there are plenty of people all around me that build crap sites for em$$$/em and I had worked with a few of them - my insistence on building accessible site only got myself fired. Always will be if there is no law telling them they must build accessible websites. My dilemma is, I don't want the law tells me I must build accessible websites, and I don't want to build accessible sites because I afraid people with disability might sue me. I want to build accessible sites because that is the right thing to do and I have pride in what I do. Sometimes I do wonder, are some people (including me) in the WSG list live in our fancy world. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Form styling
I, on the other hand, love form styling :)
this is what I came out, a bit heavy on markup but it works
consistently accross browsers, including IE 5 (except extra line-
height).
div class=form
span class=col_leftlabel for=titleSubject: /label/span
span class=col_rightinput name=title id=title type=text
size=40 value=insert value / /span
/div
I used to use label and input for floated left and right.
label {float: left}
input {float:right}
div class=form
label for=titleSubject: /label
input name=title id=title type=text size=40 value=insert
value /
/div
but with checkbox, which the label tag is on the right and I found
that the floated left 'label' was conflicting with it, so I decided
that adding extra span classes works better and less headache with
IEs; If I remember correctly, IE didnt' behave quite well without
extra span classes.
div class=form
span class=col_leftWhat fruit do you like?:/span
span class=col_right
input id=chk2_0 name=fruit type=checkbox value=apple /
label for=chk2_0 Apple/labelbr /
input id=chk2_1 name=fruit type=checkbox value=orange /
label for=chk2_1 Orange/labelbr /
input id=chk2_2 name=fruit type=checkbox value=durian /
label for=chk2_2 Durian/label
/span
This is my latest creation that includes :active and :focus, and is
WCAG AAA compliant. You are welcome to use my code.
http://tinyurl.com/2b8ban
tee
On Sep 26, 2007, at 10:15 AM, Tom Livingston wrote:
Hello list,
OK, I hate form styling. It's my least favorite thing. I have started
using Eric Meyer's Reset style sheet. Does anyone have a favorite
resource for dealing with forms. I am tired of resorting to... [cough]
tables. I do manage on occasion to pull it off w/o tables, but it's
always a struggle. Especially where labels are to the left of text
inputs.
Thanks a bunch in advance.
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] question on 'logical tab order'
Trying to polish up my accessibility statement. First, I don't have tabindex implemented in the web form and links as I concluded it's like access keys, prune to cause confusion than helpfulness. I have 'skip to content' and 'go to top' links, with :active and :focus, and I thought linking structure wise, I have a logical tab order planned out. So I wrote: You shall able to navigate this site using tab features with your keyboards comfortably. Logical tab orders are taken into account to prevent confusion; :active and :focus pseudo classes are used so that links and form items are highlighted when they are 'tabbed to'. [1] Decided to read more about tabindex and tab orders, after a few articles, I left with a confusion. For example, article written by Molly E.H defines 'logical tab orders with 'adding tabindex attribute'. Accessibility statements on a few sites claimed to have the logical tab orders but I don't see the tabindex attribute in the the markup. [1] I am pretty sure that paragraph is full of grammatical errors but I can't pinpoint them as I have difficulty with when to add 's' and where 's' should be added. So if you can correct my errors and explain to me that will be great :) Many thanks! tee lotusfromthemud.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] opera bug on hover, and the use of margins and left/right on absolute position
Got an impression that Patrick and George are experts of Opera
browser :) Can you guys take a look on this?
Al, I reckon you have no problem that I bring this question here.
It came from a question someone asked on other list and Al from PVll
gave a tips that I found can be improved a bit for browser
compatibility, because on so many occasions, I found that using
margins instead of left/right to manipulate position in an absolute
position gets consistent result in browsers (except IE 6 and below,
but that can easily solve) .
[1] http://www.projectseven.com/csslab/parlor-tricks/tooltip/
a.tooltip:hover span {
display:block;
position:absolute;
top:0em;
left:100%;
width:15em;
}
the result in Safari and Opera
http://tinyurl.com/2ggkpf (doesn't work properly for opera 9.5 alpha
and Opera 9.02)
http://tinyurl.com/24f2hm
Opera 9.02 has a problem with :hover span, part of the popup box
overlapping the link element's background on hover. When link is
clicked, the popup box shows up fine.
[2] my version: http://tinyurl.com/25beyt
a.tooltip:hover span {
display:block;
position:absolute;
top:0; left:0;
margin-left: 5em;
}
http://tinyurl.com/27wvmw (work for Opera 9.5 alpha without clicking
the link element; still doesn't work for Opera 9.02)
http://tinyurl.com/2z3gwn
I noticed this problem before Opera 9.5 alpha came out, but didn't
bother to seek for answer/solution because very rarely I need to use
#2 on client's project. Now that knowing it does work for Opera 9.5
alpha, guess it's good to find out what causes the problem in #1.
Also, can someone explains the use of margins over left/right [3]
units with absolute position. I don't think I ever read anything from
all those known CSS gurus (including you :) ) about the benefit on
using margins or left/right elements when absolute positioning comes
to play.
[3] top or bottom doesn't seem affect anything but quite needed; at
least in many occasions when I use an absolute position, I always
need to declare a unit in top or bottom with 'zero' unit in left or
right, then in combination with margin (left or right) to get it
works properly.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] question on 'logical tab order'
Simon, thank you so much for the English lesson. Thousand times better than my high shool English teacher who declared I absolutely cannot write a sentence in English, and that I should married myself out the moment I finished my high school, because, according to her, that was the only career I could had for my future :) I would first point out is that this will be almost meaningless to anyone other than people familiar with html and css - so this is a message to web designer colleagues, but certainly not to the general public! That is quite true, however on different perspective, I do think that sometimes putting a message like this on a site helps educate general public how to use their browsers to enhance their browsing experiences. Of course, only if they care to read the accessibility statement. Best regards, tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] opera bug on hover, and the use of margins and left/right on absolute position
Forgot to ask another question about tooltips (using hover span technique) Vs title attribute I have a concern regarding accessibility on this technique, if show/hide result isn't so much of a concern,would 'title' attribute a better choice? Because, if style sheet is disable or pag viewed in Lynx Viewer, content in the span class is revealed. But we don't always want this. tee On Sep 22, 2007, at 6:21 AM, Tee G. Peng wrote: Got an impression that Patrick and George are experts of Opera browser :) Can you guys take a look on this? Al, I reckon you have no problem that I bring this question here. It came from a question someone asked on other list and Al from PVll gave a tips that I found can be improved a bit for browser compatibility, because on so many occasions, I found that using margins instead of left/right to manipulate position in an absolute position gets consistent result in browsers (except IE 6 and below, but that can easily solve) . *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] question on 'logical tab order'
Hi Stuart, thank you so much for the suggestion. I like what you have here: As you tab from one to the next, the current item is highlighted to help show which has focus. I think mention of logical tab order or pseudo classes (even though that's what you've done) will only serve to confuse accessibility users - remember keeping explanations as simple as possible is also part of accessibility Will improve this :) I still don't think my question get answered. I want to know, without using the tabindex, can one still claim to have the tab order in place? Or rather, how you guys define/understand 'logical tab order'? A google search on 'logical tab order', shows up results that are related to tabindex. best and good weekend! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Open Source CMS
On Sep 12, 2007, at 2:13 AM, Web Dandy Design wrote: Hi, Can anyone advise on the most accessible, open-source CMS between Joomla, Drupal or Plone? Modx cms tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Open Source CMS
On Sep 12, 2007, at 7:57 AM, Vlad Alexander (XStandard) wrote: This article may be useful: http://juicystudio.com/article/choosing-an-accessible-cms.php Hmm, I wonder why they didn't include Modx. The survey was done in May, maybe Modx (v 0.9.5) wasn't quite ready yet! The v.9.6 has improved a lot and we are promised something even sweeter in the next release. That said, if you pay attention and practice web standards, it will be a fooled to not pay attention to certain things from certain people in the web standards groups. The same goes with Modx CMS, if you are looking for a scalable, accessible and web standards compliant CMS that offers many flexible and powerful features through plugins and snippets, it will be a fool that you don't even spend a few minutes to take a look simply because you already have a favorite ones. Dive into Modx and make a template (or convert one of your static CSS/ XHTML layout) isn't difficult at all. Modx is very user-friendly for web designer however the learning curve is a bit higher (but not more than WP, Joomla, Textpattern, EE, Plone of the sort in my opinion (I have tested them all)) if one PHP knowledge's is a bit weak (someone like me). Currently Modx lacks a good documentation and the admin interface have room to improved (again! we are promised that they will be changed in the next release); Many tips and tutorials are hidden in the Forum that need a bit of digging and dedication. Modx doesn't control/limit what you want as far as code and functionality concerned; it gives you what you want to have, the way you wanted it. Personally I don't think there is a fully accessible WYSIWYG Editor existed that delivers pure clean code. TINY MCE is the default plugin for Modx which I find difficult to use and a memory eater; I prefer something like textile from Textpattern; someone was making Markdown integration I think. It has a QuickEdit front-end content editor which I like very much. Ditto, Jot and Reflect snippets make Modx a wonderful Blog CMS (if you only want a blog). Ditto aggregates articles (aka documents) (this snippet can do a lot more tasks); Jot takes care of comments and Reflect handles the archives. There is a plugin called PHx (Placeholders Xtended), enable, can add the capability of output modifiers using placeholders, template variables (A very powerful feature of Modx - you no longer limited to Content area) and settings tags. Jot + PHx, you get: moderate, edit, delete comments at front- end. As for the ping and trackback features that bloggers concern about, there is a Trackback snippet, and a Japanese developer wrote a SendPing module : [quote]: What does this plugin do? This plugin is supposed to send pings to various (editable) websites using the XML-RCP library and ping protocol. The goal of this is to update these services that there has been added new content to your website, which will make sure these services crawl your website. This feature is mainly interesting for those who use MODx to blog, but the usage of pings is growing all the time as it's an comfortable way to instantly get updated data for search engines. In addition to this it'll also notify Google that your site has new content and your sitemap.xml should be spidered again (exact filename also configurable). Also, according to ZeRo's email this currently supports multi domains, which could be useful for the heavy users. What doesn't it do? It wont make you coffee nor breakfast, sadly, in addition to that it doesn't automatically notify these services as of now; you'll have to run the module manually, ZeRo has planned a plugin to handle this with his next version. Trackback allows blogger to send/receive pings to other blogs whereas SendPing will notify blog search engines/social networking sites [/quote] Many interesting and powerful snippets/plugins/modules that can enhance features, functions and make your live sweeter, can be found in 'forum In Development'. Lastly, I almost hate to mention my site as it hasn't completed yet - it's powered by Modx using just a few snippets/plugin with a nothing- to-show-blog. This is not a good example to demonstrate how flexible and scalable and accessible Modx can give you, but I hope it's a good example of 'artisan's work' (borrowed Partrick's word) made by Modx. In the blog individual article page, I even managed to score WCAG AAA. http://tinyurl.com/3deh87 tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Open Source CMS
On Sep 12, 2007, at 5:43 PM, Vlad Alexander (XStandard) wrote: Tee wrote: Personally I don't think there is a fully accessible WYSIWYG Editor existed that delivers pure clean code. It all depends on how you define fully. XStandard has a keyboard accessible interface and most definitely delivers clean, accessible markup. Well, yesterday I finally learned that the Mac version finally came out - a very long wait, must be at least 2 year; after 6 months of waiting, I gave up and completely forgotten as if it never existed. Haven't try the lite version so I will take your word and give a benefit of doubt, but until then I will reserve my insignificant 2 cents :) I remember there was a thread regarding XStandard porting to Modx and you and the developers were going to see if possible. That seems went dead? tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Speaking of alt tags . . .
Hi Bob, On Sep 11, 2007, at 1:42 AM, Designer wrote: What is the current wisdom about the syntax of alt tags? I believe that if I have a decorative image I am supposed to put a blank tag. If it's decorative image, why not make it to background image? This is most appropriate way to handle it, and you don't need to worry about blank alt tag. regards, tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Speaking of alt tags . . .
On Sep 11, 2007, at 2:16 AM, Patrick H. Lauke wrote: Quoting Tee G. Peng [EMAIL PROTECTED]: If it's decorative image, why not make it to background image? This is most appropriate way to handle it, and you don't need to worry about blank alt tag. Depending on the situation, it's not always possible to add images as non-repeating CSS. For instance, think of a CMS environment with multiple, non-technical authors using a WYSIWYG plugin/editor. It's unrealistic in those situations to expect those authors to assign an ID to a container element, add appropriate padding, and set the image as CSS background (also often they won't even be able to add CSS in the first place). For hand-crafted pages, done by a web artisan, it's true that using CSS is the more elegant solution. It's just not appropriate in all situations at this point. Hmmm, I didn't think about that. My clients asked me how to add *decorative* images by themselves, I asked are they any meaning/ purpose of those images, are they echo to your content, they said no I just wanted my page looks nice in certain area. I told them sorry you can't do that, because if it's decorative purposes I already took care of it in the CSS. To me, an decorative object is something that pleases or upsets my eyes, it may bring up an emotion, but taking it away (or without adding extra later on), the purpose of the 'website' is still complete. Those photos in Flicker, are not decorative images to me. I guess this is just how one interprets 'decorative' :) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] click on select element triggers block popup in IE7
I am testing a form on IE7 standalone, when I click the dropdown selection option, it triggers the 'popup blocked' message. Can you confirm if this only happen in IE7 standalone hacked version. I can't find any info from google search with phrase like so : click on select element triggers block popup in IE7 Can't show the page but I made a screenshot from a site somewhere. http://tinyurl.com/39pp97 Sorry to mention this, but in cause you recommend me to install IE 7 and run IE 6 standalone instead. I don't want to do it yet because I need developer toolbar runs on IE6, and it doesn't work for the standalone version. Thank you and have a good weekend! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] click on select element triggers block popup in IE7
Thanks for the confirmation, Choan. Although I don't use IE7 standalone anymore, I remember this behaviour. The IE developer toolbar works in IE7 too. The developer toolbar works in IE7 standalone, the issue is, I haven't have a need to use the toolbar in IE 7 in the last 8 months, but I need it for IE6 on almost every project I do, just the 'outline div' this simple feature helps trememdously to find what causes layout to break. I have sufficient CSS knowledge to avoid many famous IE6 bugs from happening to begin with, but when a finished page is submitted to client, I often get a reply that the page breaks in IE 6 when he started adding new CSS codes. best, tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] lack of 'lang' attribute fails WAI
On Sep 8, 2007, at 2:40 AM, Andrew Cunningham wrote: Its passible to have metadata in more than one language, but it came become problematic. Anyway the title element should realistically only have one langauge. Hi Andrew, I am curious, is there guideline from WCAG that state there should only be one language for the title? I am trying to look at this matter with Search engine perspective. For a bilingual or multilingual site which has more than one language in the page, an author may make good use for having title as as well as other metedata in different languages. Although search engine giant google can search sites in any language but it maybe prudent to add special treatment for other native search engine that specializes in its native language, for example, a search engine from India maybe more capable in its Search algorithm with 18 Indian languages as well as its neighbors' languages such as Nepali, Urdu and Tibetan; whereas, baidu, a popular Chinese search engine not just does a better job for Chinese site searching but other languages such as Tibetan, Mongolian and Uyghur because they official part of China territories. If a site contains English and one or more of the above mentioned languages, it's likely at least x% of users who visit the site may use a native search engine, thus a valid reason to have more than one languages in the metadata. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] lack of 'lang' attribute fails WAI
I am working on a bilingual site (chinese/english) that needs to pass at least WCAG AA, the site is UTF-8 charset and I didn't use lang attribute in the meta because it's a bilingual site. and I am getting this error on Priority 3 Verification Checklist: 4.3 Identify the primary natural language of a document. * Rule: 4.3.1 - Documents are required to use the META element with the 'name' attribute value 'language' in the Head section. o Note: This rule has not been selected to be verified for this checkpoint. * Rule: 4.3.2 - The HTML (Root) element must use the 'lang' attribute. o Failure - The HTML (Root) element does not use the 'lang' attribute. What do you propose I should do to make the 'failure' goes away? Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] lack of 'lang' attribute fails WAI
Patrick, Diego Jixor, thank you. Is every page on your site in both chinese and english, all in one page? Some pages contain two languages and that was the reason I thought 'lang=en' isn't quite appropriate. I guess I must draw the dice and pick one. According to WCAG 1.0: 4.3 Identify the primary natural language of a document. [Priority 3] For example, in HTML set the lang attribute on the HTML element. In XML, use xml:lang. Server operators should configure servers to take advantage of HTTP content negotiation mechanisms ([RFC2068], section 14.13) so that clients can automatically retrieve documents of the preferred language. Techniques for checkpoint 4.3 Is this 'clients' refers to normal browsers (Opera, Firefox for example) or Screen reader (including Apple's VoiceOver)? If the later, I don't think there is Screen reader that can speak both Eastern Asian language and English (except one make by Indian, Japanese or Chinese then there is hope :) I heard Chinese has one but only work for PC ). Up till this point, the whole purpose of lang attribute is at fault. Will WCAG2 amend this or perhaps introduce a new attribute for bilingual site? tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] lack of 'lang' attribute fails WAI
Hi Kepler, Personally I think it is an accessibility issue to mix two languages on the same page. I am not sure about this, I don't find it an issue at all, due to my background it's actually a rather common thing to read/speak two different langagues in a single conversation/page. If you ever watch Bollywood movie, you will see that it's very common too. Heck! Even those Booker prize winners Indian writers have to insert a few Hindi here and there. Do French in Quebec do this? UTF-8 makes it possible to have two totally different languages put on one page, and website no longer is a mono-language rule it all, based on this logic, I think one really can't argue it's an accessibiility issue if a website contains two languages in one page, as long as the nature of the site has this needs based on its culture and custom preferences. I am just curious why you did that. Well, I guess this is arguable if I really need it. I guess I don't need to but I have a good reason for doing it - I am redesigning my web design service site (+ blog), and I want to target a particular audiences that are both English/Chinese capable and comfortable with using both and have the preferences to give the business to one who is capable of both languages. To do this, I need to demonstrate that to them - it's just a matter how one go about doing it, and yes, serving one version for English and the other for Chinese is one way to go. However, say, in the home page and other pages I want to show blog entries that have English and Chinese articles in certain block, it makes more sense to have two languages in one page instead of two different pages specifically for English and Chinese. There is also this possibility that a site needs two languages in one page, for instance, a site offers language learning. If it is a requirement, you can identify a particular block as being in a different language by using the lang attribute on that one block. Then use the lang attribute on the html tag to identify the main language of the page ( http://www.w3.org/TR/WCAG10-HTML-TECHS/#changes-in-lang ) . Thanks for the pointer. This no doubt is a good way. I currently am working on a multilingual site myself. It is not live but you can see it at ( http://lafermerie.neighborwebmaster.com ). The links on the lower right allow you to switch between languages. I am using UTF-8 and setting the lang attribute based on the currently selected language. Wow!! Powered by Zencart! I know it's not ready for production environment, but did you check the Magento? tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] XHTML+Voice
Has anybody done this on your (and client) site yet? It's showing up on Opera site, so I reckon it's supported for 9.50 Alpha? And Safri Beta 3 too? http://dev.opera.com/articles/view/xhtml-voice-by-example/ tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] XHTML+Voice
Hi Philippe, a quick question before I forgot to ask. A bit off-topic: yes I use VoiceOver sometimes; the built-in voice options are awful, so far Vicki is the only one I can listen for more than 15 mintues. I'd been wanting to purhcase a pleasant voice sample but don't know where to look. Anybody knows about this? Hopefully Leapord will improve. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] will Eric Meyer's CSS SCULPTOR put me out o f job?
On Aug 27, 2007, at 8:41 PM, Al Sparber wrote: Both products produce standards-based CSS layouts that work in modern browsers (ours also addresses IE5.0x, too). I can only speak for our product (CSS Layout Magic). It is a rapid deployment (one click) tool that produces a minimally styled, structurally sound layout set up with easy-to-edit faux column images. The idea is that you get a rock-solid structure on which to build and enhance. While Jakob Neilsen might consider it a finished design, we don't :-). You have to have a basic understanding of CSS and markup to use these tools to their full potential, other wise the pages you produce will always look like a rental house with white walls (in this case, a lot of yellow). The faux images approach allows quick customization to easily turn this: http://www.projectseven.com/products/templates/pagepacks/cssmagic/ cssmagic08.htm Thanks all for your feedback. I guess I asked the question incorrectly and the subject line was to draw eyeballs I am afraid. Al, I am not afraid you CSS Layout Magic will put me out of job because I saw some of your customers managed to mess up your layout and I actually helped a few to clean up their messes :) Not saying your extension is not good or not as good as the CSS Sculptor, besides, I am in no position to compare because I never use either of them. What prompted me to ask this question is because, I guess, the impression I got is the way it's being advertised- The ultimate Web standards compliant CSS layout I see so many web designers using CSS without a bit of understanding of semantical and structural markup, and the way I see it, the way they do with the div classes is nothing different than the table layout, so I always thought extension like yours provides a good ground however, exactly like you're saying You have to have a basic understanding of CSS and markup to use these tools to their full potential. Guess it probably just a marketing gimmick to market an extension as The ultimate Web standards compliant CSS layout, but I respect Eric Meyer so much (no he doesn't know my existence) that I want to believe The ultimate Web standards compliant CSS layout is exactly as it advertised, that it really can help many web designers to use the CSS and markup correctly, semantically and structurally. If so, I may even consider to purchase it myself to help enchance my production :) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] will Eric Meyer�s CSS SCULPTOR put me out of job?
Please don't be misguided by the subject :) http://www.webassist.com/professional/products/productdetails.asp? PID=135RID=930 I am just curious, what you do guys think of the dreamweaver extension like this one and the PVll CSS layout Magic, and the Google Blueprint ? Can they take over the carefully crafted CSS and structural markup you deliver to your clients? There first one even take care of IE browsers. I notice fewer people ask me to do CSS and XHTML templates lately :) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] display:table equal height and print style problem for Firefox
Hi Georg, Many thanks again! This often means CSS based column-layouts can't be (re)created for print, which, IMO, isn't a bad thing since multi-columns running over several printed pages doesn't make all that much sense. Linearizing - one column after the other - makes a lot more sense on print. I aware of this and already suggested to client. The end-client wouldn't listen, just as he wouldn't listen the fontsize issue. It hasn't been a pleasant project to work on, as much as I wanted to, I cannot just quit half-way because this will be irresponsible (secretly I do hope I get fired though!). Generally: you should not reuse your screen-styles for print and rely on overriding with print-styles. Starting from scratch with a complete set of print-styles, will usually result in less complex print-styles and more reliable results. It works however I run into another problem. First I realized I forgot to add 'media=screen for the style sheet and was getting different results both from Safari, Firefox (both don't seem to render correctly) and IE (it shows correctly). As soon as I added the 'media=screen, they work well but the content in IE is gone. Had the #outer and #inner declared overflow: auto (*also tried 'visible' ) and height: auto (tried 100% too); removed the 25000px in #middle and #right, still, the content is missing. It comes back if I remove the 'media=screen in other stylesheet. And yes, the print.css is with media=print. Checked your perfect equal height page in IE6, there is a big gab between the first and second column. I don't see you have a print style sheet but the equal height column declaration doesn't get in the way. How come? My IE7 is standalone version, the print preview doesn't work therefor I can't test it. This is the same site that I can't show the URL, I wonder if it's ok if I send you the page offlist again to take a look? tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] display:table equal height and print style problem for Firefox
Anybody know if there is a way for this.
A 3 column layout used the display table equal height technique
#outer {display:table}
#inner {display:table-row}
#left, #middle, #right {display:table-cell}
and the logo with floated left is placed outside the above divs.
img src=logo.gif id=logo
div id=outer
div id=inner
div id=left content left /div
div id=middle content middle /div
div id=rightcontent right /div
/div
/div
For the print style sheet, client wanted to remove the left column,
but keep the middle and right column, so the print shows two columns.
If I have all ids (except the left column that is declared
display:none) floated left, the right column in Safari floated to the
left , placed above the middle column. Right column floated right
aslo get the same result in Safari
If only #middle and #right are floated and no special treatment for
#outer and #inner, then Safari, Firefox and Opera respect the columns
but in Firefox, the logo which is placed outside the #outer wrap,
stays in page 1, and the #middle and #right columns jump directly to
page 2, with a empty page 3. In IE (floated elements are used), the
right column is missing.
I am not going to worry the IE at this moment yet ( I understand I
can use Conditional comment for print style sheet too?), but want
to know if there is a way I can make the logo and the middle/right
columns stay in one page in Firefox. Obviously I can't declare
display:none for #outer and #inner.
Thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] (X)HTML Best Practice Sheet goes live - correct link
On Aug 10, 2007, at 12:53 AM, Dean Edridge wrote: Frank Palinkas wrote: Kind regards, Frank M. Palinkas Microsoft M.V.P. - Windows Help W3C HTML Working Group (H.T.M.L.W.G.) - Invited Expert M.C.P., M.C.T., M.C.S.E., M.C.D.B.A., A+ Senior Technical Communicator Web Standards Accessibility Designer website: http://frank.helpware.net email: [EMAIL PROTECTED] | [EMAIL PROTECTED] Member: Society for Technical Communications (S.T.C.) Guild of Accessible Web Designers (G.A.W.D.S.)Web Standards Group (W.S.G.) Supergroup Trading Ltd. Sandhurst, Gauteng, South Africa website: http://www.supergroup.co.za Work: +27 011 523 4931 Home: +27 011 455 5287 Fax:+27 011 455 3112 Mobile: +27 074 109 1908 Wow! this is the longer signature I ever seen and it's quite unpleasant to need to scorll down in order to read the message. Sorry, Dean and Frank, I am not making any compliant. I am here to learn the best web practise from many of you guys and I see that some of the members condemn top posting; I think bottom posting (is this how it's called?) is equally bad when one needs to scroll all the way down to read a few line of message. I think this is one of the accessible issue perhaps not many people pay attention to. One of my client is semi-paralyze and doesn't make use of assistive software because, according to her, it's too expensive and too much learning curve. One time she made a comment to me that I should write my message in the top so that she doesn't need to scroll all the way down ( I always trim my post when I response). I was in her office recently and witnessed how she uses computer, it was unimaginable inconvenient and uncomfortable for me to watch. She has mobile problem on her hands too. I watched her literally spending some 3 or 4 minutes to scroll all the way down in order to read an email. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Shop Products Markup
On Aug 7, 2007, at 12:45 AM, James Jeffery wrote: Depends on what you want to achieve. You can use the microformats hReview to provide product reviews, but i dont think there is anything specific for listing products. You could use XML, but only if you had real reason to, if your using XML for the sole purpose to add semantic meaning to your products i wouldn't bother with it. You can add just as much semantic meaning using Classes. Example: div class=bookshelf p class=titleHarry Potter/p p class=authorSome Author (I really dont know :P)/p /div If you are going to create a centralized service based around your e-commerce site and plan to create your own software, widgets, toolbars and stuff then XML might be a better option, but before you use XML you would need a reason to in the first place. Hi James, I am curious as to the 'but before you use XML you would need a reason to in the first place' comment. What kind of reason it have to be? I am asking this because I was exploring the Foxycart script with Modx CMS for one of my site. Foxycart people said that JSON/XML data feed prevents duplication of data. I really love what I have learned and have implemented (with TVs in Modx) so far, however the monthly fee and the launche date of Open Source Magento kind of put me in limbo with the Foxycart. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] setting fontsize in body
On Aug 7, 2007, at 4:01 AM, David Dorward wrote: This would be the older generation who tend towards having poor eyesight and needing larger font sizes? I've never seen a designer make body text bigger then the vendor default, only smaller and harder to read. clearleft dot com comes to mind. I headed for that direction too, but was horrify to see the body text of my site shouting boldly at friends and clients' PC monitors. I think this is the problem we constantly facing here because too many website are with smaller fonts and that people suffer (they probably don't know they can use the zoom in /enlarge fontsize feature) too much, so my friends and some unweb-savvy clients, although have 1280 and higher resolution for their monitors, they all changed it to 1024. I bet they would have changed it to 800 pixel if their monitors allow it. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] designing for handheld
On Aug 5, 2007, at 12:45 AM, Stuart Foulstone wrote: Hi, You could try the cellphone emulator at: http://mtld.mobi/emulator.php for an idea on rendition on cellphones. Stuart, Do you know how accurate the renditionis for this emulator? And compare with Opera Mini and other simulators. I tested couple of sites I did on Opera mini and the DM device center last night, the results are quite acculate and with some 5% differences between Opera mini and the device center, mainly the paddings left/right issue. I am actually suprised and pleased to know over 70% of the sites I did so far, already render well (provided what I saw are truly what I saw) in handheld devices even without a different stylesheet for mobile. Even with the 3 column layout in Pixel, it shows the first column, scroll down to the bottom of first column, there following the second column, then the third. But with this mobi emulator, what I see is, the site shrinks porpotionally, like the IE 7 and Opera zoom feature does. I didn't download the iphony yesterday, but decided to try it when writing this message, and see that my sites are all shrink porportionally like the mobi emulator does (mini-my-site version:) ), so does the thiess kentz site John showed (I see he has a handheld stylesheet in the header). So which emulators (simulators) are correct? tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] designing for handheld
Hi, a project I'd been working, client asks if I can port the layout for handheld devices. Current layout is pixel width with every pixel carefully culculaated in different sections/columns, so there is no way I can simply adapt the style sheet. At this stage, it's simply an inquiry from client whether I am competent to do the stylesheet for handheld devices. I am very keen on getting my hand dirty even it means sacrify a candle light dinner at a romantic soothing restaurant on Sunday night. I have never done layout specifically for handheld devices, think this is a great opportunity, but I don't know how much complication (apart from learning curve) it involves. The articles and books involving with buildibg accessibily websites that I read all these years, some of them touched the handheld devices but no much, and I don't think I remember all I have read. First and core question: structure wise, is it just a matter to making the layout liquid? I happened to download the Adobe Dreamweaver CS3 trial version last week, and see that it has 'preview in device center' that covers many brand of handhelds, with many different models and display sizes. The layout (3 columns) I mentioned here doesn't break, it displays first column, second column and the third vertically. It appears that layout intergrity doesn't suffer except herhaps differnt margins/paddings needed. Does this means I have the basic covered? If you have done sites for handheld devices, could you be so kind post it here so that I can take a look and perhaps study your style sheet. Recommendation on building accessible sites for handheld devices also welcome. Thank you! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] designing for handheld
On Aug 4, 2007, at 6:42 PM, John Faulds wrote: The only site I've done with a handheld stylesheet is: http:// www.thiesskentz.com.au/ As far as testing goes, not sure how reliable DW's previews would be considering how bad their design view is. Other testing options include: http://www.operamini.com/demo/ http://www.operamini.com/beta/simulator/ http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/ http://www.marketcircle.com/iphoney/ (Mac only) Hi John, thank you so much for the response. I ran the site in Opera Mini and a few from DW Device Center, it renders quite closely. The obvious different is that there are two Thiess Kents logo, one big, one small, the small one overlapping the Engineers Constructors Opera Mini puts the horizontal menu in a tree menu with a + (expand) icon, is this how you set the mobile stylesheet renders it? Padding left are gone for paragrahy and heading elements in the Device center (just like my pixel perfect three cols layout). I never see a website in a handheld device (my cellphone allows me to brows the internet but I am unwilling to test it as I don't know how much it will cost when the bill arrives ), therefor willing to give a benefit of doubt for the Adobe DM Device Center. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] setting fontsize in body
Hi, I got an impression that setting 100.1% fontsize in body tag is a better approach and have been doing so for many sites. Also, with the 100.1% in the body, I usually declare .85em (.95 for my site as I love big fontsize :) ) for paragraph and lists. I also find that I get a more stable, closer fontsize across browsers. Working on a project, client has the fontsize declared at 62.5%, and the paragraph, nav list at 1em. It works ok for most part, my responsible is to clean up all messy code and restructure the layout structure. I had the fontsize changed to 100.1% which affected many elements, so I changed it to 70% and adjust fontsizes in other elements accordingly, but suggested client to go with 100.1% so that I can rework the font size in every elements. The tab nav that is at 1em, break to second line in Opera, and the fontsize appears to be 3 or 4px bigger than other browsers (however the 1em in p more or less the same. I aware that Opera often makes the size a bit bigger but this is a bit unusual for me. If I change the 62.5 to 100.1, nothing gets change for the Tab nav in Opera, it still shows 3/4px bigger than other browsers but the second level link text shrinks to like 4 or 5 pixel in IE, thus making it impossible to read. Client sent me this link, kind of suggesting that 62.5% is the better approach because his client isn't happy that now the heading texts are too small and the paragraph texts are too big due to the changes I made. http://www.clagnut.com/blog/348/ What do you think? Sorry I can't post the url for you to take a closer look. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] setting fontsize in body
Hi Thanks for all the insightful feedback.
I have a very limited freedom on this particular project. A previous
version was done quite messy and it seemed time were waste quite a
lot, so I was brought in to fix, clean up the code, but the end-
client wanted the fontsize stays the same. The problem I am facing
now, is that in Opera Mac version, fontsize in every element is 2
pixel bigger than other browsers, the PC version stays consistent.
Here are the basic codes for font size adopted from the previous
version and I am not allowed to touch it.
body {font-size: 62.5%}
#nav li {font-size: 1em} /*10px */
p {font-size: 1em} /*10px */
h2 {font-size: 1.2em} /*12px */
h3 {font-size: 1.1em}
no specific declaration is made for IE, but there is no issue there
as far as consistency concerned. Mac version Opera makes everything 2
pixel larger. It looks fine and acceptable for the content area
(nobody seems to care how this browser render the fontsize as long as
the layout looks the same and thing doesn't fall apart) but because
the navigation tab is a bit crowded, thus making the last tab drops
to next line. And this is the problem I need to fix, I suggested a
change to 100.1% in the body and adjust other element accordingly
because from my experience, I know I can get a better result for Mac
version Opera. No, can't do it because I can't touch the fontsize if
it affects the size in other elements.
What I don't understand is, why the Mac version Opera behaves so
erratic. My guess is the 62.5% causing the problem.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] setting fontsize in body
On Aug 3, 2007, at 8:19 PM, Philippe Wittenbergh wrote:
On Aug 4, 2007, at 10:45 AM, Gunlaug Sørtun wrote:
Back to Tee's problem with 'body {font-size: 62.5%}' etc in Opera/
Mac. It may be caused by the preset value for 'minimum font size'
in that browser/OS.
If someone can check the preset value for 'minimum font size' in
an unaltered Opera/Mac, as I set mine to '14px' years ago and have
since just updated it, and I can't remember the preset value. Now
I can't even check Tee's problem, because my Mac is off-line.
Unless my copy is sick, the default is 9px
Mine is 12px. I don't remember I ever altered the fontsize in Opera
(9.22), as I only use this browser for testing.
Monitor Screen resolution: 1680 x 1050.
Just got an email from client, his client doesn't care the Opera, if
it can be fix with a 'conditional comment' like we treat the IE than
it's great, go ahead and do it, if not, ignore. Which is very
unfortunately and I must admit I get discourage by this type of
attitude. It would be nice if every client can have the same attitude
toward IE :)
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: RES: [WSG] HELP with CSS
On Jul 28, 2007, at 10:17 AM, David Hucklesby wrote: I don't think this is a matter of HTML skills, But understanding HTML syntax help isn't it? Personally I found this selectutorial help understand semantic markup greatly (thanks Russ again!), especially this 'the document tree - it's a family thing http://css.maxdesign.com.au/selectutorial/ tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Site test Google analytics
On Jul 26, 2007, at 2:24 PM, Jason Robb wrote: Hello everyone, I launched a site today. http://www.barbarawellsstudio.com - I'm looking for some criticism, any suggestions are appreciated. On a side note, I posted a thread back in late May on Photo Gallery markup. My solution is located here: http:// www.barbarawellsstudio.com/collections/ Also, when including Google Analytics, they ask to insert the script into the body, just before the end of the /body. Hi Jason, in Firefox, there is a one pixel gap between the tab and the color bar. I only took a look from Mac, but pretty sure the same thing is showing in PC too as I had encountered the very same problem with a site that also have color coded tabs. The color bar is quite thick therefor you can use line-height or padding bottom to compensate easily. The collections page loads a bit slow for me though - I am on cable broadband. I was once quite fancy with this lightbox gallery, but very soon I got so sick of it I can't even bear to look at it :) Think it goes better with blog. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] a question for Aussie
Hi, sorry for my post, and please kindly reply to me OFFLIST only. I need to send a package to Australia and must have it delivery no later than Tuesday 31st July, because I am paying for the delivery therefor would really like to save some money if possible, and I have the options for 2 days delivery and 3 - 5 days delivery, the cost for the 2 days delivery is double (not the cost of a cup of Latte but at least 20 cups :) ). The destination is St Ives, NSW. Had a look on Google Maps, it seems that the city isn't far from Sydney. Based on many of my international shipping experience, I know when a carrier says 3 - 5 days, it usually safely can reach the destination if it's a capital of the country or the large busy metropolitan city, in 3 days; if the place is a remote area, it may take another 3 - 5 days, so I am actually looking at 6 - 10 days delivery option. Question: How far is St Ives from Sydney, can it be reach within a day? Thank you and please reply Offlist, so that I don't annoy people more than I already have by posting this message. Sincerely, tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Re: please avoid forcing people to open pdf in browser!
On Jul 23, 2007, at 3:31 PM, Patrick H. Lauke wrote: Content-disposition: attachment; filename=document.pdf Joyce Evans wrote: This seems to be a good idea. Could you please give an example where this code would be placed on the web page or how it would fit into the code? I’m having a “blank” moment. Thanks. You would put that in your server configuration (e.g. in Apache's httpd.conf or in an .htaccess file) I am curious: because browsers treat PDF differently, shouldn't it be better to provide an info for user to choose download or open new window for PDF with right click? With Safari, it's indeed irritating that PDF opens in the same window unless I right click my mouse for options; Firefox asks how I want to view the PDF file. Despite my passion for the use of PDF, I don't always want to download PDF from websites though, especially when there is no telling the link I am gonna to click is PDF or just a link. I don't think I like it much that the only option I have is download, some websites do exactly what you suggested, especially the Adobe, which forces to open up my Acrobat Professional even though I have specifically tell my browsers use Preview only for PDF. In the view of usability, I think this option falls short. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] (Phillipe) margin problem in Firefox
On Jul 19, 2007, at 8:39 PM, Philippe Wittenbergh wrote: I would use the following structure: ol li h6span%number/span John Doe on Jul 7, 11:34 AM/h6 pcomment here/p !-- or more p -- /li Ah! this does look a lot better! Thank you so much! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Re: please avoid forcing people to open pdf in browser!
On Jul 20, 2007, at 3:39 AM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Saying that PDF's are needed by Government Websites is a very circular argument for allowing them - why are they needed? In my experience it is only ever because of laziness or poorly designed workflows, and as you point out, we all hate them, especially when they cannot be opened/ read. Mike I love web standard and practice it with the best of my ability, and I love PDF too - use it, create it, deliver it (for client), I love it especially when I need to download form, I love it even more when I can fill up the form with my keyboard directly from browser, then print it out, sign my name and post it; I also love it when an ebook I purchased (rarely because most ebook in PDF version are badly created) have hyperlink option where I can jump to certain page/ section with a click on link, and jump back with another click. I do hate it when a PDF file I downloaded, the text is unreadable with 300% zoom A Chinese physician will tell you anything that is medicine, contain 30% of poison - over used, over dosed, if not kill you, will at least make you suffer (irritation is one of the suffering emotion I supposed) - today a Western journalist will write that anything that is Chinese medicine MIC, contains 100% poison (alas! unfortunately with some true in it), your statement came out to me like a Western journalist who wrote an article saying that all Chinese medicine contains 100% poison. Alas! as much as I know it's not true and you didn't know anything about Chinese medicine except quoting/reading something from some source or had a one tiny bad experience the last time you travelled in China, but I feel helpless to defend the Chinese medicine due to those rotten poising evil apples that do exist and have creating quite a stir. I think in this case, blame the messenger, not the source that made of what it is. PDF can be accessible, not in the sense of web standards, create it and delivery it with care and best practice, it's not evil at all, especially compare with flash, imho. Look at the economic aspect, all government sectors on earth are talking about budget cutting constantly, I personal feel Government websites stand a good argument for providing PDF forms for free easy access. Don't know which country you live in, do you remember when was the last time you needed to visit post office or a city hall department to obtain a form, or worse, you need to pay for it from a third party agent that does nothing creative but make money from selling forms provided free of charge by governments. Oh, although no statistic to proof it, but I do believe we manage to save quite a few forests each year by having the PDFs be available on one's website, on the internet. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Wide Display
Hi CK,
On Jul 20, 2007, at 6:21 AM, CK wrote:
Hi All,
Could use your savvy in creating a style that would prevent the
services content from sliding out of position when viewed on a very
large display.
http://bushidodeep.com/summer_2007/wide_capture.png
div#bd_container {max-width: 1000px /* for example */}
and also read the max width support concerning IE browsers
http://tinyurl.com/yqxsel
Hope this helps!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Re: please avoid forcing people to open pdf in browser!
On Jul 20, 2007, at 7:54 AM, Hassan Schroeder wrote: Oh, although no statistic to proof it, but I do believe we manage to save quite a few forests each year by having the PDFs be available on one's website, on the internet. ?! You're entitled to your enthusiasm for PDF (which I don't share) but this one escapes me -- how do you figure? This is heading a OT direction I am afraid. I should add the 'on one's website, over the internet, via email' Will, take myself for example, for print/web design services, I don't send paper invoice unless client specifically requested; I have another business on the side that requires making catalogs - each copy of color catalog cost me US$1.75 (17 x 11 by 16 pages), and I print some 500 copies a year, most of them are wasted, go directly into trash bin even though I don't send them unless a request catalog is made via web form /telephone/ fax. I have the catalog in PDF version available for download from my website and always encourage people who requested the catalog to download the PDF version instead. And on the printed catalog I had it printed help saves a tree and help us save our cost, please download our catalog at www.site.com/ catalog. Although I am environmental conscious and make it a practice in my daily lives but It will be hypocritical to tell people 'help saves a tree, please download catalog at . I don't print out anything (PDF) unless necessary; I don't request printed material unless absolutely necessary, many things I needed for references purposes for me to conduct my business can be obtained on the internet in PDF, not just forms. I work very hard to try to make a paperless home office - impossible but I make great effort to reduce the use of paper. I don't have my bank sends paper statement to me via mail each month and other services I subscribed to that are not technologically savvy or lack of resources to make them HTML (either this option is available thing can goes wrong and you will have another reason to blame the web) but PDF only. The incoming fax I received are also in PDF. Everthing is in PDF I do not work in papermill industry but my previous life as a print designer and the business I do now and the awareness I have as to how we mindlessly polluting our enviornment, require me to know a lot about how paper being made, what materials are made of, what chemicals are used and how much virgin fabric are used for the paper, where the source comes from and are the fabric that made of 100% pure white shining glossy paper from the tree that takes decade to grow or corps that are farmed and regenerated annually etc... You feel good about your country has a toughest law in protecting forests and preventing certain industries from destroying the beautiful forest in your own land, but perhaps what you don't know is, your people (my people) go to other countries that have less tougher law or no law in protecting the forests, exploiting others' beautiful forests and lands so that you can have beautiful gift paperwrap for birthdays, for Chistmas, and for your shning glossy paper prensation that you present to your clients. Chances are, any information that is offered as a PDF option for download over the internet, help saves energies/resources, less pollutions and help saves a tree one way or the other. If 50% of the people that reqeusted catalog, forms last year from me, from my clients, from any government websites opted for PDF version, everyone wins to some extend. Like I said, blame the messenger - blame the people who created the PDF for not making it accssible and easy for the users. Don't blame the PDF itself - it's innocent and in fact in my opinion, a beneficial technology Adobe has invented. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Wide Display
On Jul 20, 2007, at 8:53 AM, CK wrote: Hi, Your solution was great, now I've developed a problem with a vertical scroll bar. some of the math has went awry. Would you assist? please post the url. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Wide Display
Oh, one more thing, are you serving your page application/xhtml+xml? If not, you probably should removed the ?xml version='1.0' encoding='iso-8859-1' ? from your top of your document and change the dtd to xhtm 1.0 (transitional or strict) or html 4.0 strict I don't know well enough to explain to you why? Hope this interview article can serve as a good introductory on doctype. From there you should be able to find more info from the links the article provided. http://webstandardsgroup.org/features/tommy-olsson.cfm tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Wide Display
On Jul 20, 2007, at 9:48 AM, CK wrote: That would help: http://bushidodeep.com/summer_2007/template_02.php On Jul 20, 2007, at 11:43 AM, Tee G. Peng wrote: try remove the 'min-height: 100%;' from the same div or make it less than 100% if you really must use it. I did a quick test on Firefox developer toolbar with the Edit CSS tool, it works and the footer sticks to the bottom of the browser screen. Is this what you wanted, fixed footer? May I know why you want the min-height: 100%; declared for this simply layout? Also, isn't 100% the default browser height? I have never used min-height before as I tend to code with conservative, anything that requires lots of hacking to make IE works, I try to avoid in most cases. Also, I haven't encounter a layout that needs to use min-height so far. By the way, I think 1600px max width is just too much, looking a your page, I don't see the reason this layout needs more than 900px, also it will be better if you wrap your navigation menu inside the div#bd_container, so that when a user have the browser open with a very wide screen, take 1600px for example, the menu wont' stay to the far left (assuming you have the max-width set to 900 or smaller) tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] margin problem in Firefox
Hi, I don't seem able to solve this very simple position problem for
the comment area.
First I wasn't sure whether I should use OL or UL or P or DT for the
comment (my first question), after looking at some blogs I decided to
go with OL (with a question mark hanging in my head), everything
seemed working as expected until I started adding pretty background
colors/images and Firefox doesn't obey my rule. Been spending last 4
hours trying to figure what I did wrong with Firefox but I am unable
to see the error.
Pleaseee lend me your crystal clear eyes.
There shouldn't be a gap for the mustard background (#1, #2...) and
the 'john doe on july 15, 11:34am' gray background
http://zhujili.com/index-new.html
codes in question:
#comments li {margin-left:96px; /* because the gray background image
is 96px wide}
#comments li.msg_left {font-size:1em;
background:#cc8c0b;
padding:5px;
float:left;
width:30px;
margin-left:51px; /* this one is causing the problem in Firefox but
I need this declared because I wanted the the box stay 51px away from
the left */
color:#ddd;font-weight:bold;}
It appears that in Firefox, the li.poster inherits the margin-left:
51px from the li.msg_left which I can't make sense of it.
#comments li.poster {width:auto;padding:5px 0 5px
15px;background:#2E2F30 url(images/curve-top.jpg) no-repeat right top;}
thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] My Website
On Jul 15, 2007, at 5:43 PM, Marvin Hunkin wrote: Hi. check out my website at the bottom of this message. cheers Marvin. Check out my home page at http://startrekcafe.bravehost.com Hi Marvin, I am a Star Trek fan. :) Is there anything particular you would like us to look at? I understand that this site is your school assignment and that it's a site makes for visual impaired in particular (are people with this disability use screen reader only? I doubt.) - first I must said the color contrast is too much for my eyes to bear, especially the galaxy background image. My thought is, they must have a way to accommodate normal users and users who are visual impaired so that their stays at your site are an enjoyable experience. Also, there must have a purpose and information provided for a website, but I don't see it quite clearly. First your headline states that it's a 'Star Trek Portal' but you also tell us we can find information on Star Trek and Disability. Ok, fine, but what is your objective for the site? Are the two topic equally important? Do you want to make a site for both Star Trek portal and information about disability? Or are you actually wanting to make a site about Star Trek that is built with accessibility in mind so that people with disability can view it regardless what browsers /screen readers they use? Also, as a Star Trek fan, I expect too see some background info on the homepage about Stark Trek (it can either be one the series or all series, it doesn't need to be like this page in wikipedia (http:// en.wikipedia.org/wiki/Star_Trek) but a bit of information will be very useful. I see you have provided many star trek links in other page, however Providing background info on Start Trek on the homepage can help and motivate your visitors who may not know what Star Trek is, to stay a bit longer at your site tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] margin problem in Firefox
On Jul 19, 2007, at 3:04 PM, Kepler Gelotte wrote: Not #comments li.msg_left as you assumed. Adding a margin-left: 5px; to your #comments li.poster and #comments li.myresponse definitions will fix the problem: Hi Kepler, Thanks for the suggestion. It doesn't quite work though as it throws Safari and Opera (I am sure IE too but haven't check) to the opposite, where the 'poster' class background moving to left, I already tried adding margin in that two classes. See screen shot taken from Safari. http://zhujili.com/ss.png I noticed you added 'scroll' for the background element. What is good for this? Because I don't see any effect in the browsers. I must admit I never use scroll though as never occur to me it's of useful. Best, tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] (Phillipe) margin problem in Firefox
Phillipe wrote in CSS-D:
It is a bug in Gecko. [1]
Here is your list, simplified.
http://dev.l-c-n.com/_temp/moz-egde.html
The top one is wrong, the bottom one is fixed.
li.poster {-moz-float-edge:content-box;}
does all the magic.
(one could argue about the semantics of your list construction, but
css-d is not the place for that).
OK Phillipe, please tell me what I did in-correctly with this
construction.
(1) The List not being semantical for the comments markup?
I have doubt for this myself as I thought DL or even simply P tag is
more appropriate. Yet 10 blog sites I checked, only one use div class
with P tag. The rest are OL and LI
(2) The P inside the LI ?
Added P tag for the comment message because there will be people
leaving more than one paragraph of texts and I don't want a break in
between.
(3) The numbering should be placed inside the 'poster' class instead
of giving its own class?
I think placing the numbering inside the li.poster class is more
appropriate, but I don't want to do that because adding a new LI is
more straight forward and easier to position the mustard box :)
Did it with a guilt but decided to go lenient for myself. Now you
mentioned it, I feel very bad and uneasy even without hearing what
you are to say.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Visual Design Of Websites
On Jul 13, 2007, at 1:57 AM, Nick Cowie wrote: I think that everybody has missed the original point of Marvin's post. Marvin was looking for help in completing his visual design units in his web design course, as Marvin is visually impaired and is trying to build websites for sighted people using a screen reader. And you thought is was hard the other way round. I assume Marvin must pass the visual design units to complete the course. Do not pass the course and no qualification, no chance of further education and less chance of a job in the field he wants. Marvin is after advice, help, tips, tricks and techniques for visual design, such as colour theory, image size etc. as well as suggestions on how to storyboards and flowcharts. Nick, I wanted to thank you for reminding us on Marvin's need. I understood what he was looking from his post but didn't have idea on what to recommend/suggest, and from some of his posts in the past, I got an impression that he seems particularly interested in developing sites for visually impaired people but never bother to find out why ( probably because this is web standards list and I learned it's impolite to ask person question). Ironic isn't it, here in the WSG we hear list members talk about developing accessible sites for people with difficulties, and often times with big theory, idea with their owned ideology, yet we shamefully make an genuine quest from a list member who is visually impaired, turned to a 'thread closed'. Best, tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Visual Design Of Websites - THREAD CLOSED
Russ maybe there is a way to filter the incoming post that is thread closed' from being delivered as soon as the moderator(s) announced it? So that it saves everyone frustration and irritation? :) tee On Jul 12, 2007, at 8:07 AM, russ - maxdesign wrote: THIS THREAD IS CLOSED This is the second reply to a closed thread. No more! *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Page Structure
Curious, what if you use this ? h3emRugby World Cup 2007 Packages/em/h3 and also putting all important keywords in the title I was asked recently by someone to tell her why with certain keywords search, her site shows up in first page in google and yahoo. This person has no html and web design knowledge whatsoever, let along the SEO and structural markup, however she managed to build her site in Dreamweaver with table layout and many divs styles, font face, br are inserted in the code. It's a site about greeting card and almost no way she, even me able to bring the site to the first page in google search with the word 'greeting card, notecard, etc'. But her site comes up in the first page with keywords 'humorous card', 'humorous greeting card', and 'humorous blank card'. I looked at her source code, she has 'humorous' this word in the title, h1 and a p tag with em. She didn't know what em for, and the reason she used it was because she wanted itallic. Obviously she was hitting on luck and I got to learn a new SEO trick. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG]shorthand doesn't work for bg position (was auto-hiding bottom part of bg image when resizing fontsize
On Jun 18, 2007, at 12:24 PM, Robert O'Rourke wrote:
By the way, I have a question regarding fixed background position
it doesn't work in this way in Safari and Firefox either.
#container {background: url(image.jpg) fixed no-repeat}
so I changed to
#container {background-position: fixed}
Im pretty sure it was working for me in Firefox just before... the
background image scrolled with the page. Not sure why it wouldn't
have worked for you.
Rob, I meant to reply this yesterday.
Strange! it really doesn't work for me for my testing in Safair,
Firefox and Opera.
I tried placing 'fixed' before and after the 'no-repeat', also after
the x/y positions.
Here is the test page:
http://project.lotusseedsdesign.com/wandahennig/index2.html
Accroding to CSS shothand guide, placing the 'fixed' in the
background should work.
http://www.dustindiaz.com/css-shorthand/
#container {background: url(../images/pic.jpg) fixed no-repeat 459px
top ; /* I was certain it worked for body {background: url(../images/
pic.jpg) fixed no-repeat 459px top} in the first version I posted for
help, but I tested it now in body, it doesn't work anymore.
Unfortunately I can't duplicate what I did with entire style sheet */
and here is the working one where I removed the 'fixed' from
background property
http://project.lotusseedsdesign.com/wandahennig
#container {background: url(../images/pic.jpg) no-repeat 459px top;
background-position:fixed;
width: 999px; text-align: left;}
Can someone explains why it has this behaviour? I am trying to
think maybe it has a dependency and inheritance, when, for instance,
a relative position is declared somewhere. Hmmm, if I don't get an
answer to feed my curoisty from you gurus, I will need to run more
tests to find the answer myself.
Thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG]shorthand doesn't work for bg position (was auto-hiding bottom part of bg image when resizing fontsize
Hi Philipe, I forgot to mention, in the below page, if you make the screen shorter show that it shows vertical srollbar, and try scroll the page, you can see there 'writing, coaching...' headline image being moved. Here is the test page: http://project.lotusseedsdesign.com/wandahennig/index2.html In this page, http://project.lotusseedsdesign.com/wandahennig/ where I removed 'fixed' in the background property, and have it replaced in 'background-position', the headline image doesn't move. Am I missing something obvious? tee But don't forget that 'fixed' means fixed to the viewport. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG]shorthand doesn't work for bg position (was auto-hiding bottom part of bg image when resizing fontsize
On Jun 20, 2007, at 12:46 AM, Tee G. Peng wrote: In this page, http://project.lotusseedsdesign.com/wandahennig/ where I removed 'fixed' in the background property, and have it replaced in 'background-position', the headline image doesn't move. Am I missing something obvious? OK, I think I found the answer, because 'fixed' is not a background- position value so browsers simply ingored it, and 'fixed' was not needed at all for background property in this case. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] site check please
Hi Jermayn, I notice the left and right columns white background colors (or image) are overlapping the 'g-background.jpg'. You either need to may transparent color for left/right column or if background images are used, use nee to make them narrower or maybe add z-index properties. Small detail that doesn't interfer with website's function but IMHO this is what differential good and best web deisgners :). Also, the two columns collapse with two fontsize enlarge - this one really put me off because I always need to enlarge at least two time of fontsize for many sites I visit. tee On Jun 18, 2007, at 7:21 PM, Jermayn Parker wrote: Hi folks, just wondering if people can have a quick look at the following website for any major errors, suggestions etc The one thing that has given me major trouble is aligning the columns the same over browsers (I am sure I have a few gray hairs from that), so unless its horriable wrong, I am not going to worry about it, unless someone knows a fix. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
Hi Jamie, Rob and Thierry Have you tryed giving your #wrapper a height or min-height: should i say. Yeah! min-height works better and I needed to move the photo to the #container I would have a poper look but remove that stupid password because every time i try and use firebug to edit the CSS its asking me for the password every few seconds. Sorry about this. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
On Jun 18, 2007, at 9:39 AM, Robert O'Rourke wrote: Hi Tee, nice looking page! It doesn't get a vertical scroll bar though (firefox 2 latest)... could you attach the background image to the bottom of the main content area as opposed to a fixed position on the body? that way it would move up if the text size was reduced. Thanks Rob. I think for notebook users, vertical sroll bar will show . Moving photo to the container creates a small problem, with vertical scrolling, the tagline image jumps. I need to work out a precise calculation in pixel or change that big image to alpha PNG. One other thing I noticed was when you hover the large links they change height slightly, looks nice but when you hover just on the edge you get some mad flickering. You could maintain the height by replacing the padding with a transparent border. Ah yah! I was thinking to have a pseudo javascript transition effect :). Thanks for the tips! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
On Jun 18, 2007, at 11:49 AM, Thierry Koblentz wrote:
I may be wrong, but I'm not sure ie6 does transparent border (if I
recall,
it turns them black).
Yeah, it doesn't. I actually not sure how to write the rule.
I had {border-top: 5px transaprent},
{border-top: 5px; border-color: transaprent}
It doesn't work in Firefox and Safari, then I realized even if I got
it correct it probably won't won't in IE.
So I used {border-top: 5px solid wheat } /* wheat the same color as
the h2 background */
By the way, I have a question regarding fixed background position
it doesn't work in this way in Safari and Firefox either.
#container {background: url(image.jpg) fixed no-repeat}
so I changed to
#container {background-position: fixed}
But I am certain this works
body {background: url(image.jpg) fixed no-repeat}
why?
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] why is this text not resizable,?
On Jun 16, 2007, at 8:05 PM, Thierry Koblentz wrote: I believe it is sIFR (Flash) http://www.mikeindustries.com/sifr/ --- Regards, Thierry | www.TJKDesign.com Thank you Thierry, David and others who response and provided extra link for other method. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] why is this text not resizable,?
I was at Media Temple reading mySQL stuff, and one thing caught my eyes. First I saw the h3 text seems to have shadow effect so I tried to select it to see if it's graphic. It's not and then I notice the font isn't enlarged when I resize the fontsize. http://www.mediatemple.net/webhosting/gs/mysql-pool.htm Look for blue heading under the 'Notable features'. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] I need to ask a non-web design question from Aussie
Hello Australians , I am so so so sorry I have to post this to ask you kindly write me offlist so that I can ask the question - (without 'but') this is the only list I know full of Aussie that can give me the information I needed. It is a non-web web standards no web design question so I will refrain myself from asking publicly. Thank you and very truly sorry for the OT! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Firefox bug with legend tag
Hi, I am working on a form layout that utilize fieldset and legend and I need to take care of presentation as well as screen reader needs. The legend tag has a rounded corners background image, Safari and Opera have no issue with positioning and width but I am finding Firefox (all Gecko browsers actually) doesn't recognizing width element (haven't check on IE yet but I figure it's buggy too). Did a google search on Firefox bugs and found this: http://marc.baffl.co.uk/bugs.php Here is the screen shot of the result from above mentioned browsers. http://project.lotusseedsdesign.com/legend.gif The background image has to stay, I guess my last option will be removing the legend, and use p tag instead, but this is really not desirable because the page has two forms, one for newsletter, the other for personal info submission. Consider I need to take care of screen reader's users, the legend should stay too. Or am I still able to make the form accessible without legend? I am inclined to sacrifice the presentation needs however it's not my call. Client hasn't see the layout, but I know he wants to keep both. Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Firefox bug with legend tag
On Jun 1, 2007, at 5:36 AM, John Faulds wrote:
Hi Tee,
I wrote something about styling legends a while ago which might
help: http://www.tyssendesign.com.au/articles/css/legends-of-style/
Hi John, Thanks for the article. After reading it, I went visit one
of the site I did last year that the form was styled with fieldset
because I remember I didn't have trouble getting Firefox to work (IE
doesn't look nice though), and the legend has background color.
Looking at the fieldset and legend elements in the form style sheet,
I can't however remember whether it's my code though because it's
just too weird I would have coded it this way (repeating fieldset). I
have little reason to believe the in house designer who took over the
website after the template is done, messing with my CSS because last
time I talked to him, he hadn't been able to make a simple CSS page.
fieldset {
padding: 15px 10px;
margin: 20px 0;
border: 5px solid #eee;
background-color: #fff;
overflow: auto;
}
fieldset fieldset {
border: 1px solid #ccc;
background-color:#424242;
}
legend {background: #369;
padding: 10px;
color: #fff;
border: 1px double #ddd;
font-weight: bold;letter-spacing: 1px;
}
fieldset fieldset legend {
font-size: 95%;
}
and here is the link
http://decorsit.com.my/enquiry.html
The problem I am having is the background image (as oppose to
background color) doesn't work for Firefox and IE ( the bugger maybe
able to tame using conditional comments?!), I see that the 'width'
and height are not recognized by Firefox. If I make padding top and
right values larger than the actual background image dimension, it
seems to compensate the problem Firefox has issue with. However IE
still not playing nice.
Can't post the actual page but the code:
#f-left fieldset legend {
padding:5px 20px 44px 10px;
font-size:0.9em;
font-weight:bold;
color:#C09;
width:205px;
height:39px; background:url(../images/paper_catalog.gif) no-repeat
left top;
text-transform:uppercase;}
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Firefox bug with legend tag
Hi Thierry, http://www.tjkdesign.com/articles/ how_to_position_the_legend_element.asp Definitely will take a look and pass it to client. Many thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Need help with CSS breadcrumbs and navigation
On Mar 30, 2007, at 12:53 AM, Stuart Foulstone wrote:
Hi,
I would suggest you use a line-height greater than 2pt in #breadcrumb.
Stuart
Hi Chris,
Stuart's suggestion is good, however I do think there are more
underlying problem in your code that needs to fix.
To begin with, you may want to add this rule in your CSS.
* {margin:0; padding:0}
Because headings and other html tags have their default top/bottom
margins and paddings, by using an universal declaration, you are
removing the default margins/paddings. You then adding your desired
paddings/margins in the id and classes selectors directly.
Be aware that the universal declaration is a double-edged sword,
somewhere down the road when you are more comfortable doing CSS and
code for more complex CSS layout, you may find it not so good but
getting into your way all the time, but for now... I think it's good
for your layout.
Your breadcrumb declaration is a bit heavy and some are unnecessary:
#breadcrumb {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FF;
background-color: #00;
width: 100%;
height: auto;
position: relative;
list-style: none;
float: left;
line-height: 2pt;
}
#breadcrumb ul {
list-style-type: none;
}
#breadcrumb li {
float: left;
margin-right: 1em;
padding-bottom: 10px;
}
I will slim it down to this:
#breadcrumb {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FF;
background-color: #00;
width: 100%;
}
You don't need the last 5 declarations in the #breadcrumb. Only
declare 'list-style' in the 'ul' and 'ol', as for float, there is no
point for it when you have only one column of content to go in a
block. 'position' here will require 10 pages of A4 paper for me to
explain, even if I bother to do so, you will end up more confusing,
so I will skip it :) Declare line-height in the 'li' instead.
#breadcrumb ul {
list-style-type: none;
margin:0; padding:0 /* if you don't want universal declaration, then
you must zero out paddings and margins here */
}
#breadcrumb li {
display: inline; /* here you can choose to use display: inline or
float: left - personally I favor inline because the breadcrumb is
just a run-in text to me */
padding: 0 20px; /* note that when display:inline is used, the top
and bottom padding won't work because now your breadcrumb is inline
element. Our list dad Russ wrote an excellent article about it:
http://maxdesign.com.au/presentation/inline */
line-height: 30px /* 30px pleases my eyes, but it's fine with me if
you want something higher or lower */
}
Also, the position of your drop-down navigation behaves erracticlly:
in Safari. It shifted to the left, about 80px nears the menu before
it, for example, I hover on 'Hospital Services, the zero position of
the X axis of drop-down starst somewhere between Home and Emergency;
in Firefox, it starts from the 'p' word in 'HosPital'.
Another thing, you may like to pick up CSS shorthand to slim down
your style sheet, the obvious example is you can use this in the
#breadcrumb
#breadcrumb {
font: 10pt Arial, Helvetica, sans-serif;
color: #FF;
background-color: #00;
width: 100%;
}
Hope this helps a bit
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Markup for Poetry?
On Mar 29, 2007, at 5:24 PM, Christian Montoya wrote: On 3/29/07, Jeremy Boggs [EMAIL PROTECTED] wrote: Hello, I'm working on a website that contains a number of poems. Are there any discussions or examples on strategies for marking up and styling poetry? I haven't started doing markup yet, but if it would help folks on the list, I could that and post the links. If the visual formatting of the poem is important to you (say, visual poems that have extra whitespace a the beginning or middle of lines) then you will probably need to use the pre tag. Hi Jeremy, I was going to ask this question last week :), but decided to do a google search first... and ended in this article by Molly E. Holzschlag. http://www.molly.com/2005/04/29/p-vs-pre/ No conclusive answer there however I decided to go with one of the comment left. divbr/ br/ /div Thanks for asking the question! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] link problem with absolute position
Good weekend everyone, In this page: http://lotusseeds.com/index.php Two elements are set to absolute position, one is 'skip to content' which uses background image with text link, another one is 'top' button that uses inline image . In Safari and PC IE 7 (standalone), both links are working. 'Top' is not working in Mac and PC: Opera, all Gecko based browsers; in IE 6, it's the other way around, the top' link work but not 'skip to content'. I have done quite a number of sites that us similar position (usually one of them link without image), and didn't encounter such problem. I am really running out of idea why this time it doesn't work, and why it works for Safari and IE 7 yet not the other advanced browsers? Which browsers render correctly? I have a feeling Opera and Gecko browsers are correct as I don't trust safari as much as I used to be. Apart from the answer, a tip for the fix is greatly appreciated. Regards, tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] link problem with absolute position
On Mar 3, 2007, at 2:33 PM, Gunlaug Sørtun wrote: You should make it a little easier for yourself - and the browsers :-) You have IDs in that page, so you may as well use them as targets. Use... a href=#contentdarr; Skip to content/a ...and... a href=#wrapimg... alt=go top ... //a ...and all the mentioned browsers will agree on what to do. Wow, Georg, I honestly, ignorantly have no idea I coud do this. A friend just told me I missed the .a name=top./a on the top, so I added it, immediately it works for Opera and Gecko broswers, but the 'skip to content' still didn't work in IE 6. Your method solved them all. Without a name=top/a Safari and IE 7 still works...hummm... these two browsers are more lenient? I always check Safari first, so when eveything works as expected, I forgot to check the markup for clue. Got to get rid of this habit. Thanks again! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
