[WSG] Font-size issue on Mac
I'm trying to convert a site ( laid out with tables and using points and pixels for font-sizing )into full Web Standards. The oldhome page is at http://www.weedsbluemountains.org.au/index.htm This uses tables and absolute font sizes. The rebuilt home page is at http://www.weedsbluemountains.org.au/default.htm This uses CSS for layout and relative font sizes. I'm very pleased with the conversion which displays perfectly in IE6, Firefox 0.8and Opera 7.23 on Windows as well as (reportedly)in both Safari and Internet Explorer on a Mac.Picture my horror, though, when the site's author reported not being able to read the main navigation menu, a side menu on another upgraded page and image captions on that other upgraded page, all because the font-size was far too small. I'd set the general style sheet's body font-size to 76% and used variousrelative font-sizes to style individual text. Why does it work on every browser I can find except the author's ??? Now I've had to reinstate the old non-standards home page soits author can read the main menu. Under the new design, she had to re-set her IE browser on an Emac to 120% before she could read it !! Seeking an answer I found on The Noodle Incident the following exposition of browsers delivering various font-size settings. I guess it's familiar to CSS gurus: http://www.thenoodleincident.com/tutorials/box_lesson/font/browser.html I simply cound not find any solution there to satisfy the need to set a suitable font-size for the main menu that would display adequately on the author's Emac. I've been reading the transcripts of Web Essentials 04 and after going through Bruce Maguire's presentation, I'm even more desperate to get the site to W3C accessibility level 1 - it MUST use relative not absolute font-sizing, right ?!! Now to the crunch line - I happened to use the Australian Business Register web site this morning http://www.abr.gov.auand thought I'd check out its stylesheet - no stylesheet on the home page, but a _javascript_ browser sniffer. Then I went to the help page http://www.help.abr.gov.au/default.asp?usertype=BCand looked for its stylesheet http://www.help.abr.gov.au/css/ABRHelp.csswhere every size is absolute - either points or pixels- and tables for layout. I thought Australian Government sites were supposed to observe Web Accessibility standards - or have I got it all wrong? I'm still trying to find a way to re-code my upgraded page http://www.weedsbluemountains.org.au/default.htmto display adequately in its author's browser. Looks like we'll have to truncate the main navigation menu to do it. Perhaps someone out there has a solution to this font-sizing hell I've entered by "upgrading" the site. The author also reports the same problem on a Macromedia site she visited. The author is using an appropriate IE for her Emac. Thanks to the many on this list whose experience has proved invaluable to me in the past 12 months. Best regards John Penlington
[WSG] Re: Font-size issue on Mac
Many thanks for the help. Problem is now solved. The site's authorresponded greatly relieved (as is the coder!): But yes! You have identified the problem! It's the font size, which I hadreduced to 12. For your info, the author was using the following: Verdana? yesIE: 5.1.7OS: 9.2.2 I hope this little incident helps others. This discussion list is invaluable. Best regards John Penlington
[WSG] Footer Positioning Problem in Mozilla Firefox and Opera
I'm rebuilding a gardening magazine site to web standards and assessibility - and I've almost got it working as I wish ... HTML is at: http://www.bluemountainsgardener.info/index-try.htm CSS is at: http://www.bluemountainsgardener.info/style-accessible.css No skip nav yet, but the layout doesn't break in IE6 at largest text size. So I'm progressing !! It works exactly as I wish in IE6 ... problems lie with Opera 7.23 and Mozilla Firefox 0.8 as follow The text line in the footer lies just below the black footer, not within it. I cannot work out why. In Mozilla Firefox, there's a positioning problem with the horizontal menu in the header. It's meant to line up with everything on the left hand side of the page, but it's indented in Firefox for some reason that I cannot fathom. It's fine in IE6 and Opera 7.23 !! Finally, in the right column, I'd like to know a way of reducing the gap below the headers in the infoboxes - one that will display the same *in all browsers* !! I'd really appreciate any help you can offer. This Discussion List is like life-support to me - thanks again, folks. John Penlington * 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] Footer Positioning Problem in Mozilla Firefox and Opera
Many thanks, Owen, With your suggestions, all three problems fixed. You'll see the results at http://www.bluemountainsgardener.info/index-try.htm Your prompt response will help me sleep tonight (in Australia). Cheers, John Penlington - Original Message - From: Owen Gregory [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Thursday, July 22, 2004 9:21 PM Subject: RE: [WSG] Footer Positioning Problem in Mozilla Firefox and Opera John Penlington wrote: The text line in the footer lies just below the black footer, not within it. There's a positioning problem with the horizontal menu in the header. I'd like to know a way of reducing the gap below the headers in the infoboxes On the #footer p, try margin : 0; On the #topnav ul try padding-left : 0; However, this may affect the layout in other browsers. Firefox (and Mozilla generally) uses padding to layout lists On the #walks p etc, you could try a negative margin-top, though this will no doubt mess up IE. Hope that's a start. Owen -Original Message- From: John Penlington [mailto:[EMAIL PROTECTED] Sent: 22 July 2004 11:53 To: [EMAIL PROTECTED] Subject: [WSG] Footer Positioning Problem in Mozilla Firefox and Opera I'm rebuilding a gardening magazine site to web standards and assessibility - and I've almost got it working as I wish ... HTML is at: http://www.bluemountainsgardener.info/index-try.htm CSS is at: http://www.bluemountainsgardener.info/style-accessible.css No skip nav yet, but the layout doesn't break in IE6 at largest text size. So I'm progressing !! It works exactly as I wish in IE6 ... problems lie with Opera 7.23 and Mozilla Firefox 0.8 as follow The text line in the footer lies just below the black footer, not within it. I cannot work out why. In Mozilla Firefox, there's a positioning problem with the horizontal menu in the header. It's meant to line up with everything on the left hand side of the page, but it's indented in Firefox for some reason that I cannot fathom. It's fine in IE6 and Opera 7.23 !! Finally, in the right column, I'd like to know a way of reducing the gap below the headers in the infoboxes - one that will display the same *in all browsers* !! I'd really appreciate any help you can offer. This Discussion List is like life-support to me - thanks again, folks. John Penlington * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * __ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email __ This email has been scanned for all viruses by the MessageLabs SkyScan service. For more information on a proactive anti-virus service working around the clock, around the globe, visit http://www.messagelabs.com CONFIDENTIALITY NOTICE The information contained in this communication is confidential and may be legally privileged. It is intended solely for the use of the individual or entity to whom it is addressed and others authorised to receive it. If you are not the intended recipient you should not disclose, copy, distribute or take action on the contents of this information, except for the purpose of delivery to the addressee. Any unauthorised use is strictly prohibited and may be unlawful. If you have received this email in error please notify the sender by email immediately and delete the message from your computer. ECOTEC Research Consulting Limited Registered in England No. 1650169 Registered Office: Priestley House, 28-34 Albert Street, Birmingham, B4 7UD, UK Tel: +44 (0)121 616 3600 http://www.ecotec.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * 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] Pocket PC emulator
Ted said onFriday, July 02, 2004 3:08 AMMicrosoft has a pocket pc emulater on their site. I can't tell you where it is, it wasn't easy to find the first time. I believe it is a part of their pocket pc programmer kit. This may help. http://www.microsoft.com/downloads/details.aspx?FamilyId=F663BF48-31EE-4CBE-AAC5-0AFFD5FB27DDdisplaylang=en Good luck John
[WSG] Problem with floated divs in gallery site
Hi all, I'm making good progress with web standards and accessibility, but I'm stuck on a problem with floated divs for displaying thumbnails on an art gallery site. No problem getting the thumbnail-caption combinations to display using left floated divs - thanks to Russ Weakley's float tutorials. But I just cannot find the way to get these thumbnail-caption combinations to align at the *bottom* - rather than the top where they are now. It's all explained on the test page at: http://www.bluemountainsgardener.info/fgtest/max_miller.asp I've shown the floated divs and the tables layout on the same page for comparison. By the way, the experience of displaying the thumbnails with CSS rather than a table convinced me yet again of the advantages of using web standards. Loads of code was trimmed away and it was much easier to code the ASP to create the gallery with three (or whatever) images to a line. Just need a bit of help over the final alignment hump. Many thanks to all who have helped me in the past. Cheers, John Penlington
Re:[WSG] Problem with floated divs in gallery site
Hi all,
Thanks for those suggestions. Unfortunately, my client requires the
thumbnail galleries to align exactly as I've shown with the table layout -
caption under image.
The test page is at:
http://www.bluemountainsgardener.info/fgtest/max_miller.asp
I cannot control either the height or width of the thumbnails - they vary,
but fit within an imaginary box 100 x 100 pixels.
There are well over 200 thumbnails for a variety of artists.
I just cannot find a CSS way to emulate the table cell attribute
*valign='bottom'*. If I can do that, I can solve the problem.
In the embedded CSS I've used a class table.gallery{vertical-align: bottom;
...} and it works with the table, but it won't work when added to the
.thumbnail class div.
The only other way I could achieve the effect, I think, is write program
code to calculate the amount of padding I would need at the top of *each*
thumbnail and then putting an extra inline style attribute for the img tag -
eg: img class='thumbnail' style='padding-top: (the calculated number)px'
alt=' ' etc ... I can code for that, but I'd rather solve the problem with
CSS.
I think I'm probably getting offlist when I enter program code territory,
though.
I'm wondering whether Russ Weakley has a thought on all this. His tutorial
on floating divs was a tremendous help to me in getting as far as I did.
If we can sort out this problem, I think it could be useful to a lot of
people.
Thanks,
John Penlington
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
RE: [WSG] Problem with floated divs in gallery site
Hi all again! RE: My problem with floated divs in gallery site - and trying to get those thumbnail images to align at the bottom. I've solved the problem - in two ways - and thanks for those suggestions. You'll find the result at: http://www.bluemountainsgardener.info/fgtest/max_miller_solved.asp It shows both solutions - the first using divs and the second using a CSS table. Both are on the same page with CSS embedded. The results look exactly the same in IE6, Mozilla 1.5 and Opera 7.23 I'm keeping my fingers crossed for Apple Mac browsers !! For the div version, I used program code (ASP) to subtract each thumbnail's height from 100 (the maximum height of any thumbnail) and made that the value for *padding-top* as an inline style for the img tag. As each thumbnail is a live link to a bigger image on a different page, I ended up having to add a*border='0'* attribute to the image tag to get rid of the link-induced border around the image plus the padding. This was sloppy coding, I know, but it was so late at night!! You can see the interim solution with that strange effect at: http://localhost/fgtest/max_miller_partly_solved.asp Finally, Nick ... About those non-breaking spaces in the floated divs ... just junk from a much earlier version. I've removed them in the final version. Thanks, everyone for your help. I've really enjoyed this exercise. Only been doing full CSS web standards for the past six months - but very glad I persevered. Cheers, John Penlington * 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] Request check - redesign to accessibility standards
Hi all, I'm in the process of rebuilding a site to comply with Australian legal requirements for accessibility. After much hard work, I've got a reconstructed Home Page working in Mozilla Firefox 0.8, IE 6 and Opera 7.23 on Win XP Pro - except that the unordered list in the main text area only displays its squares (list-style-type) in IE6. Any tips as to how I can get them to show in the others? The new page (CSS embedded) is at: http://www.weedsbluemountains.org.au/default-new.htm Also I've got a problem with showing labels in the search form. Not sure why I'm not complying there. This is my first attempt at a totally tableless layout. Any help or comments will be greatly appreciated. Does it pass for accessibility? John Penlington web developer * 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] Somewhat frustrated
Forgive my frustration, but after a couple of months with this Discussion List I've formed the opinion no browser will display web standards - every one of them requires hacks of some kind. I test on Win XP Pro with IE6 and Firefox - as well as on a new eMac with Safari and IE5(Mac). All my earlier web sites with tables rather than CSS 2 display quite well on all four browsers. When I try to code for Web Standards, I get a medley of results. Hence my opinion that no browser complies completely. Now the crunch: I'm building a site for a photographer who wants pixel-precision layout on all browsers. At least weachieved it on IE6 with no tables, just CSS styling. I'm aware that I shouldn't have done that, but please read on. After two weeks of frustration trying to get it to work precisely on the other browsers, I've finally resorted to tables and yes, wicked me, even a spacer gif. The home page (with inactive links)is at: www.bluemountainsgardener.info/hobbs/index.asp and the CSS is at: www.bluemountainsgardener.info/hobbs/dhpg_style_tables.css The display my client wants is exactly what you'll see with IE6. What he doesn't want is what you'll seeon Safari, Firefox and IE5(Mac). The page validates for both XHTML 1.0 Transitional and CSS. Even the Unordered List menu breaks on IE5(Mac). Can anyone tell me whymy valid (XHTML and CSS) pagedisplays so differently in those four browsers - two of which are supposed to follow Web Standards closely (Firefox and Safari)? Where is my code sub-standard if it validates for both XHTML and CSS? What do I need to do to get it to display roughly the same on all four browsers? Please don't tell me to use CSS 2 - I tried that and it simply didn't work !! The variations were unacceptable despiteall the hacks I could find. I know I'll be shot down in flames for raising this, but I really want to code for Web Standards and the frustration for me and my client isvery real!! I'm sure I'm not alone, but I'm keen to persevere. Thanks to you all for such a helpful List. John Penlington web developer
[WSG] Overflow scrollbars
This is my first post. I'm pleasantly surprised with the use of overflow: scroll because it seems to be the W3C's answer to frames pages. Would I be right there? Also I've noticed the vertical scrollbar is active, but the horizontal scrollbar is greyed out unless it has work to do. Is there any way of getting rid of the greyed-out horizontal scrollbar? It's not too intrusive, but it would be nicer not to see it at all. Thanks for such a useful forum.
