Mac compatibility

[Mark Rae]

Hi,

I realise that this post isn't ABSOLUTELY to do with ASP.NET, but can anyone
please confirm whether pixels are different on Windows and Macs?

Reason I ask is that one of my current clients is a heavy Mac user, and the
website I'm developing for them looks very different on their Macs from the
way it looks on Windows browsers. The common denominator seems to be
specifying table dimensions in pixels.

Specifically, their corporate layout specifies a logo banner centered at the
top of each page, and the content underneath should align with the outer
edges of the logo, which is 650 pixels wide.

<div align=center>
<img src=../images/logobanner.jpg>
</div>
<br>
<table border=1 width=650px align=center>
<tr>
<td align=left>Some text</td>
<td align=right>Some other text</td>
</tr>
</table>

On all Windows browsers, the above HTML correctly aligns the two tablecells
with the left and right edges of the logo. However, on Mac browsers, the
table is considerably wider than the image. I've done a View Source on both
systems, and the HTML is identical.

I'll be looking at other ways of specifying absolute dimensions in a day or
so, but I'm interested to know whether anyone else has encountered this
cross-platform phenomenon, and whether I'm correct about pixels.

Any assistance gratefully received.

Mark

 

[darrel]

I realise that this post isn't ABSOLUTELY to do with ASP.NET, but can
anyone
please confirm whether pixels are different on Windows and Macs?

Pixels are pixels.

Reason I ask is that one of my current clients is a heavy Mac user, and
the website I'm developing for them looks very different on their Macs
from the way it looks on Windows browsers. The common denominator seems to
be specifying table dimensions in pixels.

It's likely not an OS issue, but rather a browser issue. Do you know which
specific browser the problem is showping up in?

On all Windows browsers, the above HTML correctly aligns the two
tablecells with the left and right edges of the logo. However, on Mac
browsers, the table is considerably wider than the image. I've done a View
Source on both systems, and the HTML is identical.

have a link for us to look at?

-Darrel

 

[Mark Rae]

Pixels are pixels.

OK - so it's not that, then...

It's likely not an OS issue, but rather a browser issue. Do you know which
specific browser the problem is showping up in?

On every browser I can get to install on their Macs - Safari, FireFox,
Mozilla, Netscape, Opera, even an old copy of MSIE5 on MacOS 9...

However, MSIE, Netscape, FireFox, Mozilla etc all display correctly on
Windows.

have a link for us to look at?

http://www.kcityradio.co.uk/
Click Enter to access the Home page.
And, after you've picked yourself up off the floor, let me assure you that
I'm not responsible for the "design"...

 

[darrel]

On every browser I can get to install on their Macs - Safari, FireFox,

Mozilla, Netscape, Opera, even an old copy of MSIE5 on MacOS 9...

However, MSIE, Netscape, FireFox, Mozilla etc all display correctly on
Windows.

Firefox is pretty much firefox regardless of the OS. So...that's odd.

http://www.kcityradio.co.uk/
Click Enter to access the Home page.
And, after you've picked yourself up off the floor, let me assure you that
I'm not responsible for the "design"...

Whoa. yea, that's kind of, well, 'colorful'.

In firefox on both windows and osx, it looks fine as you intended.

In Safari, I do see that the area below the upper table is wider.

The problem is you have a bad/overly complex table. At least one row of a
table has to account for every column. One option is to put in a one-pixel
high row at the top with 3 TDs and use that row to set the width of each TD.

Alternatively, you could use nested tables, or split it into two tables (one
with 3TDs, the one below with 2. Or just get rid of the table altogether.

-Darrel

 

[Bruce Barker]

no, pixels are the same, but font sizes are different. fonts are measured in
points (~72 points an inch). so to display a font, the software need to know
how many pixels there to a point. this actually depends on the individual
monitor, so O/S guess. Microsoft defaults to 96ppi (points per inch), while
apple will depend on the monitor. most O/S's will allow the the user to
adjust this (see large fonts option in windows - which probably will also
break your design).

you could specify fonts in pixels, but it may end up unreadable. try
switching to large fonts on your pc, and adjust your site to display
actually.


-- bruce (sqlwork.com)

 

[darrel]

no, pixels are the same, but font sizes are different. fonts are measured
in
points (~72 points an inch). so to display a font, the software need to
know how many pixels there to a point. this actually depends on the
individual monitor, so O/S guess. Microsoft defaults to 96ppi (points per
inch), while apple will depend on the monitor.

This is a browser issue, not related to a specific monitor.

Most browsers (even on the Mac) will now translate fonts sized in point
measurements using the 96ppi factor.

-Darrel

 

[Mark Rae]

In firefox on both windows and osx, it looks fine as you intended.

Not quite. Have a look at it on Windows - one of the <td> elements has a
background image with the word JINGLE on it - completely missing on all the
Mac browsers...

In Safari, I do see that the area below the upper table is wider.

The problem is you have a bad/overly complex table.

Er...I have to disagree - all the Windows browsers have no problem with
it...

At least one row of a table has to account for every column. One option is
to put in a one-pixel high row at the top with 3 TDs and use that row to
set the width of each TD.

I've never heard that before, but will give it a go...

or split it into two tables (one with 3TDs, the one below with 2.

That sounds like a good solution - thanks for your help.