Re: [WSG] page break when printing
Jack Pivac wrote: on 10/03/06 13:56 Lachlan Hunt said the following: I have a page with about 20-30 div's each about 200-300px height. With that many, you may be overusing/abusing the div element. [...] You should probably try and find more semantic elements. So in this case http://temp.delphinus.co.nz/tab/test.html In that case, the div class=office look acceptable, the rest don't. Although besides the divs, there are some other things I'd be more concerned about. Firstly, the page doesn't have a DOCTYPE so it doesn't validate. Using the DOCTYPE override on the validator, it will validate as HTML 4.01 Strict, but it's not really conformant and there are other issues. From the source of that page: div class=office strongAlex11223/strongbr That should probably be an h2. Lose the br. div class=right 12345677 - Officebr 01234567 - RSO Dialbr /div right is a presentational class name, perhaps phone-numbers (or whatever they are) would be a better alternative. It also looks like it's a list of phone numbers, so mark it up as a list. ul class=phone-numbers li12345677 - Office/li li01234567 - RSO Dial/li /ul div class=pm style=background: orange Last PM in August 2005br /div What's the extra br for? This div would probably be better replaced with a p element and lose the style attribute, since it's presentational. p class=pmLast PM in Augus 2005/p br Joe Blogsbr br 7-13 House stbr / XHTML syntax in HTML document. It will validate but its meaning in HTML is different from that in XHTML, although browsers don't support it. Alexandrabrbr This whole address would be better marked up with a p element, perhaps given an appropriate class attribute, and remove the 2 extraneous br elements from the end. (use of address would be wrong) p class=address Joe Blogsbr 7-13 House stbr Alexandra/p DDI - 1/11br LN/Group - 3111/1br UGEN# - 1br Office ID - omgofcbr This looks like a list (ul) or maybe a definition list. table border According to the spec and the HTML 4 DTD, that border attribute is shorthand for frame=border. However, browsers will incorrectly treat it as border=1. That is why the page validates, but it doesn't mean what you thought. Both are also presentational attributes and would be best replaced with CSS. tr tdTerminal1/tdtdTerminal2/tdtdOFC/tdtdPrinter/td/tr This could be marked up within a thead element and the tds replaced with th. tr tdCM0111/tdtdCM0111/tdtdCM0111/tdtdCM0111/td /tr /table The rest of this table looks fine. Rarely Used Spares - 211br Not Used Spares - 0br Looks like another list; or at the very least a p. -- Lachlan Hunt http://lachy.id.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling of input type=file
Soeren, on Thursday, March 9, 2006 at 18:42 wsg@webstandardsgroup.org wrote: for an input type=file we like to design the button and, if possible, the background-color for focus. Does anybody know how to do that? The link in the fieldset 'Upload a file to the W3C Validator.': http://www.webnauts.net/redesign/check.html You could do it by using some JavaScript and a technique by PPK: http://www.quirksmode.org/dom/inputfile.html But do consider if it's worth to do so, or if you better stick with the default controls for usability reasons. regards Martin ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling of input type=file
Hi soeren,
well this is one way
style type=text/css
!--
input {font-size: 11px; font-family: Verdana, Geneva, Arial, Helvetica,
sans-serif; background-color: #F0F0F0; color: #00AEEF; border: 1px solid
#FF; padding:0 3px 0 3px; margin-bottom:3px;}
select {font-size: 10px; font-family: Verdana, Geneva, Arial, Helvetica,
sans-serif; background-color: #00; color: #EF9702; border: 1px solid
#B1B1B1; padding:0 3px 0 3px; margin-bottom:3px;}
textarea {font-size: 10px; font-family: Verdana, Geneva, Arial, Helvetica,
sans-serif; background-color: #00; color: #EF9702; border: 1px solid
#B1B1B1; padding:0 3px 0 3px; margin-bottom:3px;}
--
/style
hope this is what you want, but just play with it.
Cheers tiaan :-)
- Original Message -
From: Martin Heiden [EMAIL PROTECTED]
To: Soeren Mordhorst wsg@webstandardsgroup.org
Sent: Friday, March 10, 2006 11:37 AM
Subject: Re: [WSG] Styling of input type=file
Soeren,
on Thursday, March 9, 2006 at 18:42 wsg@webstandardsgroup.org wrote:
for an input type=file we like to design the button and, if
possible, the background-color for focus.
Does anybody know how to do that?
The link in the fieldset 'Upload a file to the W3C Validator.':
http://www.webnauts.net/redesign/check.html
You could do it by using some JavaScript and a technique by PPK:
http://www.quirksmode.org/dom/inputfile.html
But do consider if it's worth to do so, or if you better stick with
the default controls for usability reasons.
regards
Martin
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
__
Email disclaimer and confidentiality note
Please refer to : http://www.inxcom.com/email.html
for Inxcom's email disclaimer and usage policy.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Styling of input type=file
Thanks Martin, thanks Andrew ! I decided to leave it like it is. I understood that a satisfied styling of an input type=file - Element with CSS is not possible and Javascript in our website not acceptable. So we have to live with it like it is now. All the best, Soeren The link was: http://www.webnauts.net/redesign/check.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] CSS not playing nice in Gecko browsers (PC Mac)
Hi, can you please help me look at this page in Firefox, or other Gecko browsers. This is the first time I run into such problem with Gecko browsers and not quite sure what to make of it. The page has no validation error. http://avanimedia.com/onlinemedia/datormagazinse_profile.html Under the Specifications, the data is don in table and it shifts to the right outside the #wrapper. However, the table stays where it should be in IE, Safari and Opera. I don't understand. Thanks in advance! tee ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling of input type=file
Thank you Tiaan!
I think, this is a good appendage, but not fullfill everything, cause we
want to have something like input:focus and, for all things, style the
button with a background-image.
Greetings,
Soeren :)
Tiaan Vorster schrieb:
Hi soeren,
well this is one way
style type=text/css
!--
input {font-size: 11px; font-family: Verdana, Geneva, Arial, Helvetica,
sans-serif; background-color: #F0F0F0; color: #00AEEF; border: 1px solid
#FF; padding:0 3px 0 3px; margin-bottom:3px;}
select {font-size: 10px; font-family: Verdana, Geneva, Arial, Helvetica,
sans-serif; background-color: #00; color: #EF9702; border: 1px solid
#B1B1B1; padding:0 3px 0 3px; margin-bottom:3px;}
textarea {font-size: 10px; font-family: Verdana, Geneva, Arial, Helvetica,
sans-serif; background-color: #00; color: #EF9702; border: 1px solid
#B1B1B1; padding:0 3px 0 3px; margin-bottom:3px;}
--
/style
hope this is what you want, but just play with it.
Cheers tiaan :-)
- Original Message -
From: Martin Heiden [EMAIL PROTECTED]
To: Soeren Mordhorst wsg@webstandardsgroup.org
Sent: Friday, March 10, 2006 11:37 AM
Subject: Re: [WSG] Styling of input type=file
Soeren,
on Thursday, March 9, 2006 at 18:42 wsg@webstandardsgroup.org wrote:
for an input type=file we like to design the button and, if
possible, the background-color for focus.
Does anybody know how to do that?
The link in the fieldset 'Upload a file to the W3C Validator.':
http://www.webnauts.net/redesign/check.html
You could do it by using some JavaScript and a technique by PPK:
http://www.quirksmode.org/dom/inputfile.html
But do consider if it's worth to do so, or if you better stick with
the default controls for usability reasons.
regards
Martin
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
__
Email disclaimer and confidentiality note
Please refer to : http://www.inxcom.com/email.html
for Inxcom's email disclaimer and usage policy.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] CSS not playing nice in Gecko browsers (PC Mac)
G'day
http://avanimedia.com/onlinemedia/datormagazinse_profile.html
Under the Specifications, the data is don in table and it shifts to
the right outside the #wrapper. However, the table stays where it
should be in IE, Safari and Opera. I don't understand.
I'd say it is a clearing issue because of the floated
definitions. Try adding this to the style sheet:
#ProfileRightCol table { clear:left; }
I know you didn't ask for this, but in my opinion the page
suffers from a few varieties of itis. For example, the table
could be re-done without all those repeating classes (or at least
fewer of them) if you use th elements for your row and column
headings (which would make it more accessible too).
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] page break when printing
on 10/03/06 21:46 Lachlan Hunt said the following: In that case, the div class=office look acceptable, the rest don't. Although besides the divs, there are some other things I'd be more concerned about. yes that is terribly sloppy, I agree 100%. still very much a work in progress. Copying and pasting from various other files. But thankyou very much for your comments. Will fix those things up. Kind Regards, Jack ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] RE: div width: 100% with a div width 800px inside should always be
Hello, sorry to say this, but in AOL 9.0 running on IE6 with a res.of 1024 x 768, there is no border at all. I don't have time to play around and try to work out what is wrong, but thought I'd warn ya.Josh. To help you stay safe and secure online, we've developed the all new Yahoo! Security Centre.
[WSG] linked list alternative to nested menus
I'm contemplating an alternative to the usual nested-list nav menu structure and solicit your opinions. First, here's a standard nested menu. Opinions vary as to whether it's kosher to include all the sub-menus nested inside the parent and conceal the inactive sub-menus from visual users. I've included all the sub-menus in this markup for the sake of illustration: h3Navigation/h3 ul lia href=home.phpHome/a/li lia href=products.phpProducts/a ul lia href=widgets.phpWidgets/a lia href=whatsits.phpWhatsits/a lia href=thingummies.phpThingummies/a /ul /li lia href=philosophies.phpPhilosophies/a ul lia href=tao.phpTao/a lia href=zen.phpZen/a /ul /li /ul This makes semantic sense but could wear on your patience if you're hearing the page through a screen-reader. If you activate a link in the parent menu and bring up a new page that again contains the navigation menu, how do you know that a sub-menu exists inside the parent item? Do you have to listen through all the menu options you've already heard in order to discover and hear the new sub-menu? As an alternative, I'm considering a series of linked lists instead of one complex nested list. In the following example, the Products and Philosophies sub-menus appear after, not nested inside, the top-level menu. The Products and Philosophies items in the top-level menu now contain URI fragment identifiers (same-page anchors) linking to their sub-menus farther down the page. If you've navigated to the Products home page, I'd also add a skip link to the Products sub-menu so you wouldn't be forced to hear the top-level nav menu again: pa href=#productsSkip to Products/a/p h3Navigation/h3 ul lia href=home.phpHome/a/li lia href=#productsProducts/a/li lia href=#philosophiesPhilosophies/a/li /ul div id=products h3Products/h3 ul lia href=widgets.phpWidgets/a lia href=whatsits.phpWhatsits/a lia href=thingummies.phpThingummies/a /ul /div div id=philosophies h3Philosophies/h3 ul lia href=tao.phpTao/a lia href=zen.phpZen/a /ul /div Advantages: 1) faster easier for non-visual users to navigate (I hope). 2) lends itself easily to visual layouts in which the sub-menu lies in a column or row adjacent to the parent menu. 3) sub-menus can be displayed or concealed for visual users in the same ways as nested sub-menus are. Disadvantages: 1) The semantic relationship of parent menu item to sub-menu is obscured if not lost. 2) Because the sub-menu is not structurally nested within the parent item, some visual layouts of the menu will be difficult or impossible, such as the nested folder metaphor. Your comments? Paul ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] linked list alternative to nested menus
Paul, I like your solution. 1) The semantic relationship of parent menu item to sub-menu is obscured if not lost. Provide a structural label for top-level navigation, this will make the relationship far more explicit. Using the labels from you main navigation device as headings for the sub-menus will also serve to strengthen the relationship. 2) Because the sub-menu is not structurally nested within the parent item, some visual layouts of the menu will be difficult or impossible, such as the nested folder metaphor. You can enhance the layout with a little javascript to achieve any layout you can imagine, you just need to account for the non-javascript design. kind regards Terrence Wood. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Announcing GrayBit v0.5 Beta
Hello All, I made all of the suggested changes to the GrayBit [1] page/application -- downgrading to XHTML 1.0 Strict and correcting the font-size issue for IE (bugs passed along and added to the bug list) and I thank you for this. However, since I didn't hear from that many of you, I figured I'd continue this on one more time to solicit responses. Does an anyone have any additional feedback, good, bad, or otherwise? Thank you. Sincerely, Mike Cherim http://green-beast.com/ http://accessites.org/ http://graybit.com/ [1] PS. To anyone that missed my original posting, I have included it below: - Original Message - [...] We just created a new tool and launched the beta interface [1]. It's a contrast accessibility tool of sorts, but different. It does some neat stuff. The best way to understand it is to just try it. Being it's in beta, we're keen on feedback. You can respond here or use our form [2]. We do know that it doesn't handle PNG transparencies as well as it could (in IE), and it will disable some site's javascripts (but still seems to serve its purpose all the same). It works on sites using CSS (hex code colors, color names, or RGB) but won't work well on older sites using tags'n'tables. But then again the people who make sites like that probably wouldn't have much interest in this anyway. The interface is new for me in a couple of ways. It's my first fluid site (I usually make fixed-width sites or jump right past fluid to elastic). It's also the first site I made to the XHTML 1.1 DTD. I'm sending it as application/xhtml+xml, but the browser is still processing the code as text/html (give me comments on this, please). It's also my first PHP-only site. I usually make PHP sites, but they have some PHP and some static mark-up. These pages are pure PHP, dynamic. First thing on the page is ?php and the last thing is ?. Nary a break in between. You should find it very accessible and very usable. I took three days on this interface crossing my ts and dotting my is. [...] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] linked list alternative to nested menus
At 01:40 PM 3/10/2006, Terrence Wood wrote: 1) The semantic relationship of parent menu item to sub-menu is obscured if not lost. Provide a structural label for top-level navigation, this will make the relationship far more explicit. Using the labels from you main navigation device as headings for the sub-menus will also serve to strengthen the relationship. True. And you've helped me fill in a gap: One difference between nesting and linking lists is the way in which parents children are linked bidirectionally. Their relationship is always clear in a nested list purely from the structural position of the child inside the parent. To get from the child to the parent you simply go up or outward one level. With linked lists, the connection from parent to child is explicit through the parent item's anchor to the child, and the headline of each child menu can be hyperlinked back to the parent item. So what I proposed as a singly-linked list easiliy becomes doubly-linked. Regards, Paul ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Announcing GrayBit v0.5 Beta
On 11/03/2006, at 8:41 AM, Mike at Green-Beast.com wrote: Hello All, I made all of the suggested changes to the GrayBit [1] page/ application -- downgrading to XHTML 1.0 Strict and correcting the font-size issue for IE (bugs passed along and added to the bug list) and I thank you for this. However, since I didn't hear from that many of you, I figured I'd continue this on one more time to solicit responses. Does an anyone have any additional feedback, good, bad, or otherwise? Thank you. Sincerely, Mike Cherim http://green-beast.com/ http://accessites.org/ http://graybit.com/ [1] PS. To anyone that missed my original posting, I have included it below: - Original Message - [...] We just created a new tool and launched the beta interface [1]. It's a contrast accessibility tool of sorts, but different. It does some neat stuff. The best way to understand it is to just try it. Being it's in beta, we're keen on feedback. You can respond here or use our form [2]. We do know that it doesn't handle PNG transparencies as well as it could (in IE), and it will disable some site's javascripts (but still seems to serve its purpose all the same). It works on sites using CSS (hex code colors, color names, or RGB) but won't work well on older sites using tags'n'tables. But then again the people who make sites like that probably wouldn't have much interest in this anyway. The interface is new for me in a couple of ways. It's my first fluid site (I usually make fixed-width sites or jump right past fluid to elastic). It's also the first site I made to the XHTML 1.1 DTD. I'm sending it as application/xhtml+xml, but the browser is still processing the code as text/html (give me comments on this, please). It's also my first PHP-only site. I usually make PHP sites, but they have some PHP and some static mark-up. These pages are pure PHP, dynamic. First thing on the page is ?php and the last thing is ?. Nary a break in between. You should find it very accessible and very usable. I took three days on this interface crossing my ts and dotting my is. [...] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** Is the submission form supposed to work? On both Firefox 1.5.0.1 and Safari 2.0.3 on Mac OS X 10.4.5 I end up with a blank screen when submitting my web site (dynamic using phpWebSite). The graybit.com page presented equally well in both Firefox and Safari - no differences or errors I could detect. Steve Olive Bathurst Computer Solutions e-mail: [EMAIL PROTECTED] Mobile: 0407 224 251 Web: www.bathurstcomputers.com.au _ ... (0) ... / /\ .. / / .) .. V_/_ Linux Powered! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Announcing GrayBit v0.5 Beta
Is the submission form supposed to work? On both Firefox 1.5.0.1 and Safari 2.0.3 on Mac OS X 10.4.5 I end up with a blank screen when submitting my web site (dynamic using phpWebSite). Try adding http://; in front of the web address before submitting. If the web address doesn't contain the http://; then it returns a blank screen - at least for me. Tip of the day: trim your replies! Saves people reading screens of text and helps the environment (or so I have been told). Russ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS not playing nice in Gecko browsers (PC Mac)
On Mar 10, 2006, at 3:26 AM, Bert Doorn wrote:
I'd say it is a clearing issue because of the floated definitions.
Try adding this to the style sheet:
#ProfileRightCol table { clear:left; }
Bert, thank you! It's working nicely now. Curious, does this a bug in
Gecko Browser? Did a quick search on google and found this: http://
www.positioniseverything.net/gecko.html
I must say I am very surprised to learn CSS bugs occur in Gecko Browser.
I know you didn't ask for this, but in my opinion the page suffers
from a few varieties of itis. For example, the table could be re-
done without all those repeating classes (or at least fewer of
them) if you use th elements for your row and column headings
(which would make it more accessible too).
Comment noted :) I'd be more careful next time I promise!. This
website project has dragged way too lng and I am getting very
sick of it. That being said, I don't feel like going into m y css
file to clean up something that isn't affect overall website
performance.
Sincerely,
tee
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
