safari and less used browsers

[cate]

Hi,
I was wondering if anyone has a Mac that runs Safari, or runs any less popular browsers: I am creating a site for a client which uses drop down menus. The menus are transparent to show the image behind, so that the submenus look like they are dropping down from the image, but with Opera the transparency doesn't work. (I have successfully tested on IE, Netscape, Mozilla, Firefox and AOL)
I have no access to Macs and would be very grateful if someone could check it out on Safari

http://dialspace.dial.pipex.com/town/pipexdsl/s/asbq19/test/

also, any comments on site are welcome (<noscript> content to be added before going live)
cheers,
Cate :)

[Vladdy]

Since you decided to post it in Accessibility forum, my advice would be to either use pdf format or delete that atrocity you got now, learn HTML, CSS and the principles of accessible web design and start over.

[PeOfEo]

gosh, I forgot you were more blunt then vladdy charles lol.

Adding on to what charles said, your layout consists of image maps and tables, that is going to eat it on a non graphical browser. Infact I am going to take a screen shot of your site from lynx. Ok, look at my lynx ss, it appears that none of your content is accessible. Also even worse, the navigation is java script dependent. When I turn java script off in my browser I cannot navigate your site at all, this is excruciating because according to last years stats on www.thecounter.com 13% of the internet did not support java script. Keep java script to aeshetics and not to essentials like the navigation.

[PeOfEo]

woops I didnt upload the ss

[David Harrison]

Originally posted by cate
with Opera the transparency doesn't work.filters as MS specific, -moz-opacity is gecko specific. There is no W3C way to create a transparency effect, therefore Opera doesn't support any transparency rules.Originally posted by PeOfEo
gosh, I forgot you were more blunt then vladdy charles lol.What did Chrles say? Where did his post go? Why did his post go? Where is Charles now?Originally posted by PeOfEo
according to last years stats on www.thecounter.com 13% of the internet did not support java script.Why are you still using last years stats? Use last months (http://www.thecounter.com/stats/2004/May/javas.php), 5% don't have JavaScript. However that doesn't mean that it's OK for your menu to be JavaScript dependant cate.

[fredmv]

Originally posted by lavalamp
There is no W3C way to create a transparency effectThere is: <http://www.w3.org/TR/css3-color/#transparency>, however, as of now only Mozilla 1.7b and later builds support it.

[David Harrison]

Cool, I did not know about that.

I was reading through all of the CSS selectors a short while ago but I did not see an [onclick] selector even though I have seen it used, is it Moz proprietary or is it valid but omitted from the specs?

[steelersfan88]

Originally posted by Vladdy
Since you decided to post it in Accessibility forum, my advice would be to either use pdf format or delete that atrocity you got now, learn HTML, CSS and the principles of accessible web design and start over. Ditto. Please note CSS is in caps because it is accepted that way, although either way, vladdy would have capped it because you definately need to learn it. And the site would look pretty good, both the code and the appearace.

[fredmv]

Originally posted by lavalamp
I was reading through all of the CSS selectors a short while ago but I did not see an [onclick] selector even though I have seen it used, is it Moz proprietary or is it valid but omitted from the specs? Well, if used in the context of something like:div[onclick] {
/* ... */
}Completely valid CSS2. It'll match any <div> element in which has an onclick attribute present.

[David Harrison]

Just testing you...

<.<
>.>

:o

I was confused, I was under the impression that it was a bit like a psuedo-class. I guess I should pay more attention in future.

[fredmv]

No problem. It's a CSS2 attribute selector, if you're curious: <http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors>.

[David Harrison]

Here's another list (http://www.w3.org/TR/css3-selectors/) that I use complete with CSS version numbers.

[PeOfEo]

Originally posted by lavalamp
What did Chrles say? Where did his post go? Why did his post go? Where is Charles now? woops read vladdy as charles, it was vladdys post. I had a brain fart.

[cate]

okay - thanks for all the replies guys!! a little shell shocked but all good to know... where do I start?? this is meant to go live this week!! I don't have a good enough knowledge of Javascript to write a menu myself, and thats what the client wants. help!!

[cate]

Could I redirect Lynx users to a text based site? And have <noscript> content for the 5% that would need it?

[David Harrison]

All you need to do is have the links in nested lists in your page, then apply the JavaScript to the lists along with some styles. Which is exactly what the UDM4 (http://www.udm4.com/) does.

[Vladdy]

As I said, start with learning HTML, CSS and modern web design principles.
The lynx SS posted above shows how search engines see your site - they will see nothing. What is the point of putting your site on the web if nobody can find it :rolleyes:

[PeOfEo]

Basically learn css and use that for layout. If you use that for layout, browsers that do not support css will get an unstyled text based form of your site, no need to do a redirect. A good place to start learning css is www.w3schools.com

[Ben Rogers]

Sidenote: Firefox 0.9 also understands the opacity rule.

[cate]

okay - am working on changes - what do you guys think so far? (have converted content into text - working on nav bar)

http://dialspace.dial.pipex.com/town/pipexdsl/s/asbq19/test/index.htm

Cate:)

[David Harrison]

Well your layout breaks when the text is resized, which made me think, perhaps you didn't mean for the text to be resized.
One look at your styles and I see font-sizes specified in px. This is not good, if someone is partially sighted they may need bigger text, therefore you should not try and fix the font-size to your preference but instead rely on the users default setting.

You also still have no fewer than two image maps, and you are using tables for layout purposes.

You also seem to be using semi-XHTML markup. You have <br/> but you use <img>, you also have an HTML 4.01 DTD.

And of course, there's this (http://validator.w3.org/check?uri=http%3A%2F%2Fdialspace.dial.pipex.com%2Ftown%2Fpipexdsl%2Fs%2Fasbq19%2Ftest%2Findex.htm).

[cate]

fair points. I don't know enough about CSS to do everything in divs. To be honest, I don't understand what's so bad about tables. But anyhow, thank you for your points, I will try and incorporate them once I've had some sleep!:)

[cate]

can I ask quickly though, what do you mean by the text being resized? do you mean when you select the size of the text in your browser options ? large, larger etc? when I do this nothing changes...
Cate

[David Harrison]

I never said anything about div's, using all div tags would be almost as bad as using all tables. Use semantic markup, eg. an unordered list for a list of links in your menu bar.

I can resize the text because I have a good browser. I use Mozilla Firefox (http://www.mozilla.org/products/firefox/).

[PeOfEo]

The reason tables are bad for layout is because unless done very cautiously they will fail to linearize for non graphical browsers, and will get all crapped up for audio braille browsers. When a table linearizes incorrectly all the text gets jammed together and is no longer forming coherent sentences. Tables were not designed with layout in mind. I have made tables accessible, http://quasi-ke.servebeer.com/hybrid2.html for example, but css is still a better way to lay out your site then a table/css hybrid like this 99% of the time, using tables like this is like using one big css box model hack.

[David Harrison]

Originally posted by PeOfEo
I have made tables accessibleNo you haven't, in an audio browser it will say "here is a table, here is some tabular data" but that would be wrong, you've put non-tabluar data in there.

To make tables accessible, you need to use them for what they're for ... tabular data. You also need table headings and you shouldn't nest tables.

[PeOfEo]

Originally posted by lavalamp
No you haven't, in an audio browser it will say "here is a table, here is some tabular data" but that would be wrong, you've put non-tabluar data in there.

To make tables accessible, you need to use them for what they're for ... tabular data. You also need table headings and you shouldn't nest tables. Even if it is in the table, the audio braille browser will still read off the content. It is just not as user friendly to a blind person, but they should still be able to get the content. It linearizes beautifully in lynx, which will not display a table at all, so I do not know what more you can do with a table.

Where did I nest a table? <th> would seem to be semantically incorrect in this instance because the table is not being used correctly to begin with, and if you put a <th> on it, it would make it more confusing. If it were a data table yes, because <th> is designed for a table being used correctly, but since the table is already being used wrong, I dont know it just seems like that would make it all confusing for people on non graphical and audio braille browsers.

[David Harrison]

Well that last paragraph wasn't actually aimed at you, I was just speaking about what makes tables accessible.
Of course, you did violate the first rule by not using tables properly. ;)

[PeOfEo]

yes, but like I said, when you make a hybrid layout like the one I made, it is like one big css hack... its a last resort kind of thing, 99.9% of the time you would not need to do this.