Mac Compatibility

[Mesmeric]

Here's a quickie, and I would eternally grateful if one of you could
explain why the following works on browsers on windows but does not
seem to on Macs ?

You may find it easier to go to http://www.ced.ltd.uk - the code is
for the header menu.

Also, will the rem-ed out "window.screen.availWidth" bit work on a mac
?

Many thanks for any assistance !

David

<Style>
A {font-size=14}
</Style>
<Table Border=0 CellSpacing=0 CellPadding=0 Width=100%><TR>

<TD>
<Span Style=cursor:hand>
<Script Language=JavaScript>
s='<Area Shape=Rect Target=Show Coords=';l=64;w=59;h=22;img='800600';
//if (window.screen.availWidth>800) {l=84;w=77;h=22;img='';}
document.write('<Img Src=Menu'+img+'.png Border=0 Usemap=#map><Map
Name=Map>');
document.write(s+(l*0)+',0,'+(l*0+w)+','+h+' href=Products.php
Title="Online Product Brochure Browser, Searcher and Datasheets">');
document.write(s+(l*1)+',0,'+(l*1+w)+','+h+'
href=SuppliesWeb.php?spwCategory=16 Title="Online Project Exhibition
and Searcher">');
document.write(s+(l*2)+',0,'+(l*2+w)+','+h+' href=Resources.htm
Title="Useful Documents and Resources for Downloading or Printing">');
document.write(s+(l*3)+',0,'+(l*3+w)+','+h+' href=Contact.htm
Title="Contact Details for different CED Depots">');
document.write(s+(l*4)+',0,'+(l*4+w)+','+h+' href=Brochure.htm
Title="Request a Brochure in the Post">');
document.write(s+(l*5)+',0,'+(l*5+w)+','+h+' href=Ced.htm
Title="Description of CED and its History">');
//document.write(s+(l*6)+',0,'+(l*6+w)+','+h+"
OnClick=self.open('Glossary.php','','toolbar=0,menubar=0,location=0,resizable=yes,width=600,height=300,scrollbars=yes')
Title='Search a Glossary of Terms and Definitions'>");
//document.write(s+(l*7)+',0,'+(l*7+w)+','+h+' href=MenuFull.htm
Title="Help and Expanded Menu">');
document.write(s+(l*6)+',0,'+(l*6+w)+','+h+' href=MenuFull.htm
Title="Help and Expanded Menu">');
document.write('</Map>');
</Script>
</Span>
</TD>

<TD Align=Right>
<B><I><Small>CED for all your Natural Stone</Small></I></B> &nbsp;
<A HRef=Home.htm Target=Show><Img Src=Ced-Green.png Width=40 Height=40
Align=Center Border=0 Title="CED Ltd"></A>
</TD>

</TR></Table>

 

[Lasse Reichstein Nielsen]

Here's a quickie, and I would eternally grateful if one of you could
explain why the following works on browsers on windows but does not
seem to on Macs ?

Which browsers on Windows? Which browsers on Mac? Have you tried
Mozilla on both platforms? Opera 7? Or is it just IE on Windows
vs. Safari on Mac?

I don't have a Mac available, so I'll just do some educated guessing.

You may find it easier to go to http://www.ced.ltd.uk - the code is
for the header menu.

Indeed, it seems to work fine in Opera 7 and IE 6 on Windows (from
my guess at what it is supposed to do).

Also, will the rem-ed out "window.screen.availWidth" bit work on a mac
?

No idea, sorry. What is it supposed to do?

<Style>

First of all, make your HTML validate! Read this:
<URL:http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>

The style tag requires the "type" attribute, so this should be

A {font-size=14}

And validate your CSS. This should be a ":", not a "=":
a { font-size: 14; }

</Style>

Your style tag is placed inside the body of the page. That is also
illegal HTML, and reason enough for a browser to ignore it.

<Table Border=0 CellSpacing=0 CellPadding=0 Width=100%><TR>

While I suggest using CSS for styling instead of attributes like
these, it will work. However, the attribute value for Width contains a
percentage mark, and should be quoted:
width="100%"
The rules for when an attribute value needs to be quoted and when it
doesn't are hard to remember. If you quote everything, or just
everything containing a non-letter/non-digit character, then you can't
go wrong.

<TD>
<Span Style=cursor:hand>
<Script Language=JavaScript>

The script tag requres the "type" attribute. It is also sufficient,
so just use:

s='<Area Shape=Rect Target=Show Coords=';l=64;w=59;h=22;img='800600';

This is *hard* to read. I can't see any errors in it though. And as
you say, it works in some browsers.

You have not told us *how* it fails to work in you Mac browser.
Is the <map> element written at all? (You can test that by checking
the innerHTML property of the body element, e.g., using this bookmarklet:

javascript:document.body.innerHTML.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\n/g,"<br>")

(the line should *not* be broken. If it is, your news client has mangled it)
Show the menu page in the browser and enter the above in the address
bar (or make a bookmark with it). Then the actual HTML of the page should
be shown ("View Source" only shows the original source, not what happens
after the document.write's).


And why don't you just use buttons instead of an image of buttons?
/L

 

[Mesmeric]

Thanks for your quick reply regarding the source for the menu bar on
http://www.ced.ltd.uk

By it working on Windows, I mean all the browsers available on my PC,
which include
Internet Explorer 6.0, Mozilla Firefox 0.9.2, Opera 7.51, Netscape 7.1

I don't know what browsers are failing on Mac, I merely have had
feedback that many Mac users have difficulty - like yourself, I have
no Mac available !
I gather that when you click on the menu, nothing happens.

javascript:alert(window.frames(0).document.body.innerHTML)
correctly shows the Map tagging. I did notice a discrepancy in the
capitalisation of the Map name and its UseMap reference - would that
perhaps explain the problem? or even that I called the Map name 'Map'.

The reason for the image menu is that when the buttons are fixed, they
can be made more stylised.
The window.screen.availWidth was for using a larger image for screens
with a greater width in pixels. I rem-ed it out whilst studying this
problem.

Thanks for your comments about being keeping HTML valid - it's always
a helpful reminder. Much of it comes down to the fact that design is
ongoing into the site, and in quickly copying and pasting one can
inadvertently misplace a paste through too cursory a look, or it's
easier to type a short tag just to get the testing right - so I'll be
going through carefully when it is really final. The comments about
quotes was certainly useful.

Anyone of you guys out there own a Mac, who could help ?

david
------------------------------------------------------------------
Menubar Code in question (modified) :

<Html>
<Head>
<Style Type="text/css">
A {font-size:14}
</Style>
</Head>
<Body BGColor=#e0ffff VLink=#000080 ALink=#ff0000
Background=BackgroundMenu.png>
<Table Border=0 CellSpacing=0 CellPadding=0 Width="100%"><TR>

<TD>
<Span Style=cursor:hand>
<Script Language=JavaScript>
s='<Area Shape=Rect Target=Show Coords=';l=64;w=59;h=22;img='800600';
//if (window.screen.availWidth>800) {l=84;w=77;h=22;img='';}
document.write(
'<Img Src=Menu'+img+'.png Border=0 Usemap=#Map><Map Name=Map>'
+s+(l*0)+',0,'+(l*0+w)+','+h+' href=Products.php Title="Online Product
Brochure Browser, Searcher and Datasheets">'
+s+(l*1)+',0,'+(l*1+w)+','+h+' href=SuppliesWeb.php?spwCategory=16
Title="Online Project Exhibition and Searcher">'
+s+(l*2)+',0,'+(l*2+w)+','+h+' href=Resources.htm Title="Useful
Documents and Resources for Downloading or Printing">'
+s+(l*3)+',0,'+(l*3+w)+','+h+' href=Contact.htm Title="Contact Details
for different CED Depots">'
+s+(l*4)+',0,'+(l*4+w)+','+h+' href=Brochure.htm Title="Request a
Brochure in the Post">'
+s+(l*5)+',0,'+(l*5+w)+','+h+' href=Ced.htm Title="Description of CED
and its History">'
//+s+(l*6)+',0,'+(l*6+w)+','+h+"
OnClick=self.open('Glossary.php','','toolbar=0,menubar=0,location=0,resizable=yes,width=600,height=300,scrollbars=yes')
Title='Search a Glossary of Terms and Definitions'>"
//+s+(l*7)+',0,'+(l*7+w)+','+h+' href=MenuFull.htm Title="Help and
Expanded Menu">'
+s+(l*6)+',0,'+(l*6+w)+','+h+' href=MenuFull.htm Title="Help and
Expanded Menu">'
+'</Map>');
</Script>
</Span>
</TD>

<TD Align=Right>
<A HRef=MenuAlt.htm><Font Color=#000000 Size=-2>Alternative
Menu</Font></A> &nbsp; &nbsp; &nbsp;
<B><I><Small>CED for all your Natural Stone</Small></I></B> &nbsp;
<A HRef=Home.htm Target=Show><Img Src=Ced-Green.png Width=40 Height=40
Align=Center Border=0 Title="CED Ltd"></A>
</TD>

</TR></Table>

</Body></Html>

 

[Lasse Reichstein Nielsen]

I did notice a discrepancy in the capitalisation of the Map name and
its UseMap reference - would that perhaps explain the problem?

It's a reasonable guess. I would expect names and id's to be case
esensitive.

or even that I called the Map name 'Map'.

Probably not. There is no global variable named "Map" (especially with
a capital "M"), but it can't hurt to change it to something more
informative.

The reason for the image menu is that when the buttons are fixed, they
can be made more stylised.

Yes, but you are also using a solution that depends on javascript, and
where normal links could do the same and work in all browsers. That is
unnecessarily fragile.

With CSS, you can style the links to look like buttons, or in many
other fancy ways.

Thanks for your comments about being keeping HTML valid - it's always
a helpful reminder.

And remember the DOCTYPE declaration. It's required for valid HTML
at least since version 2.

/L

 

[Thomas 'PointedEars' Lahn]

First of all, make your HTML validate! Read this:
<URL:http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>

The style tag requires the "type" attribute, so this should be
<style type="text/css">
s/tag/element/


And validate your CSS. This should be a ":", not a "=":
a { font-size: 14; }

And that number *must* be followed by a unit (as it is not zero). Since
"px" was intended but that unit is not suited for the screen due to
differences in font resolution, the number should be reduced and "px"
or "em" should be used. Probably 1.2em is what the OP is looking for.

The script tag requres the "type" attribute.

Again, it is the "script" _element_ that requires that attribute.
The element consists of a _start tag_ where that attribute must
be set, its content (specified by the content model definition
in the DTD, that is, the type(s) of data this element may contain)
and the matching _end tag_.


PointedEars