Mac Compatibility

**Lasse Reichstein Nielsen** · Jul 23 '05, 12:11 PM

Re: Mac Compatibility

meteorquake@hot mail.com (Mesmeric) writes:
[color=blue]
> 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 ?[/color]

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.
[color=blue]
> You may find it easier to go to http://www.ced.ltd.uk - the code is
> for the header menu.[/color]

Indeed, it seems to work fine in Opera 7 and IE 6 on Windows (from
my guess at what it is supposed to do).
[color=blue]
> Also, will the rem-ed out "window.screen. availWidth" bit work on a mac
> ?[/color]

No idea, sorry. What is it supposed to do?
[color=blue]
> <Style>[/color]

First of all, make your HTML validate! Read this:
<URL:http://diveintomark.or g/archives/2003/05/05/why_we_wont_hel p_you>

The style tag requires the "type" attribute, so this should be
<style type="text/css">
[color=blue]
> A {font-size=14}[/color]

And validate your CSS. This should be a ":", not a "=":
a { font-size: 14; }
[color=blue]
> </Style>[/color]

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.
[color=blue]
> <Table Border=0 CellSpacing=0 CellPadding=0 Width=100%><TR>[/color]

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.
[color=blue]
> <TD>
> <Span Style=cursor:ha nd>
> <Script Language=JavaSc ript>[/color]

The script tag requres the "type" attribute. It is also sufficient,
so just use:
<script type="text/javascript">
[color=blue]
> s='<Area Shape=Rect Target=Show Coords=';l=64;w =59;h=22;img='8 00600';[/color]

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:docu ment.body.inner HTML.replace(/&/g,"&").repl ace(/</g,"<").repla ce(/\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
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Mesmeric** · Jul 23 '05, 12:12 PM

Re: Mac Compatibility

Thanks for your quick reply regarding the source for the menu bar on

Web Server's Default Page

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:aler t(window.frames (0).document.bo dy.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.a vailWidth 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=Back groundMenu.png>
<Table Border=0 CellSpacing=0 CellPadding=0 Width="100%"><T R>

<TD>
<Span Style=cursor:ha nd>
<Script Language=JavaSc ript>
s='<Area Shape=Rect Target=Show Coords=';l=64;w =59;h=22;img='8 00600';
//if (window.screen. availWidth>800) {l=84;w=77;h=22 ;img='';}
document.write(
'<Img Src=Menu'+img+' .png Border=0 Usemap=#Map><Ma p Name=Map>'
+s+(l*0)+',0,'+ (l*0+w)+','+h+' href=Products.p hp Title="Online Product
Brochure Browser, Searcher and Datasheets">'
+s+(l*1)+',0,'+ (l*1+w)+','+h+' href=SuppliesWe b.php?spwCatego ry=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.ht m Title="Contact Details
for different CED Depots">'
+s+(l*4)+',0,'+ (l*4+w)+','+h+' href=Brochure.h tm Title="Request a
Brochure in the Post">'
+s+(l*5)+',0,'+ (l*5+w)+','+h+' href=Ced.htm Title="Descript ion of CED
and its History">'
//+s+(l*6)+',0,'+ (l*6+w)+','+h+"
OnClick=self.op en('Glossary.ph p','','toolbar= 0,menubar=0,loc ation=0,resizab le=yes,width=60 0,height=300,sc rollbars=yes')
Title='Search a Glossary of Terms and Definitions'>"
//+s+(l*7)+',0,'+ (l*7+w)+','+h+' href=MenuFull.h tm Title="Help and
Expanded Menu">'
+s+(l*6)+',0,'+ (l*6+w)+','+h+' href=MenuFull.h tm Title="Help and
Expanded Menu">'
+'</Map>');
</Script>
</Span>
</TD>

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

</TR></Table>

</Body></Html>

**Lasse Reichstein Nielsen** · Jul 23 '05, 12:12 PM

Re: Mac Compatibility

meteorquake@hot mail.com (Mesmeric) writes:
[color=blue]
> I did notice a discrepancy in the capitalisation of the Map name and
> its UseMap reference - would that perhaps explain the problem?[/color]

It's a reasonable guess. I would expect names and id's to be case
esensitive.
[color=blue]
> or even that I called the Map name 'Map'.[/color]

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.
[color=blue]
> The reason for the image menu is that when the buttons are fixed, they
> can be made more stylised.[/color]

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.
[color=blue]
> Thanks for your comments about being keeping HTML valid - it's always
> a helpful reminder.[/color]

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

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Thomas 'PointedEars' Lahn** · Jul 23 '05, 12:15 PM

Re: Mac Compatibility

Lasse Reichstein Nielsen wrote:[color=blue]
> meteorquake@hot mail.com (Mesmeric) writes:
> [...][color=green]
>> <Style>[/color]
>
> First of all, make your HTML validate! Read this:
> <URL:http://diveintomark.or g/archives/2003/05/05/why_we_wont_hel p_you>
>
> The style tag requires the "type" attribute, so this should be
> <style type="text/css">[/color]

s/tag/element/
[color=blue][color=green]
>> A {font-size=14}[/color]
>
> And validate your CSS. This should be a ":", not a "=":
> a { font-size: 14; }[/color]

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.
[color=blue][color=green]
>> <Script Language=JavaSc ript>[/color]
>
> The script tag requres the "type" attribute.[/color]

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

Mac Compatibility

Mac Compatibility

Comment

Comment

Comment

Comment