Why is my web page viewed differently on different computers

[Jamie Sue]

Why is the web page that I designed (in FP 2003) viewed differently on
different computers? Some computers view it like I designed it, but others
(mainly older computers) view it with the text and pictures overlapping each
other and the layers out of position. I don't have a lot of experience
designing web sites, but I have used FP before and never had a problem like
this. I designed the web site on my computer, published it, burned it onto a
CD and uploaded it onto the Internet on another computer. Someone said that
I designed it on a computer with a different resolution than the one that it
was uploaded on and that this was the problem. I think that it has something
to do with resolution, but I am not sure how to fix it. I am redesigning it
on the computer that it is uploaded on to see if this really is the problem,
but I would like some advice if anyone is willing to offer any.

 

[Murray]

1. Browser type and version (IE6 would render differently than IE5.5 or
Netscape7)
2. Browser Font View Size (what you would get with VIEW | Text Size in IE6)
3. Platform (Mac IE vs PC IE, for example)
4. Just plain bad usages on the page

The best way to start an analysis of which of these is responsible would be
to post a link to the page. Can you do that?

 

[Mike Mueller]

Without the URL, it is hard to know exactly why.

Browser (portal) size is usually the issue. And that is
directly related to the resolution, but different. The
difference is that even though my resolution is set to
1024x768, my browser may not be maximized.

The usual way to fix it is to place your webpage into a 1x1
table whose width is a percentage of the screen. The table
will then resize to the portal dimensions


Jamie Sue wrote:
: Why is the web page that I designed (in FP 2003) viewed
: differently on different computers? Some computers view
: it like I designed it, but others (mainly older
: computers) view it with the text and pictures overlapping
: each other and the layers out of position. I don't have
: a lot of experience designing web sites, but I have used
: FP before and never had a problem like this. I designed
: the web site on my computer, published it, burned it onto
: a CD and uploaded it onto the Internet on another
: computer. Someone said that I designed it on a computer
: with a different resolution than the one that it was
: uploaded on and that this was the problem. I think that
: it has something to do with resolution, but I am not sure
: how to fix it. I am redesigning it on the computer that
: it is uploaded on to see if this really is the problem,
: but I would like some advice if anyone is willing to
: offer any.

 

[Murray]

If you are using 'layers', however, this will only cause other problems....

 

[Jamie Sue]

Here is the link information: www.bodyfirm.info
Thanks, Jamie

 

[Jamie Sue]

Here is the web page link: www.bodyfirm.info

Thanks, Jamie

 

[Jamie Sue]

Is it possible to lock a layer into a certain position without having to
rearrange code? I am not really sure of the correct way to position layers.
I have read that a layer should not be placed in a cell table, but that
doesn't mean anything to me. It seems like it should be simple, but I
realize that it isn't. I know, I know.... I should learn html, but why when
I have the software that writes it for me. Isn't that what this software is
for?

Thanks,
Jamie

 

[Murray]

One of the reasons why you so often see the advice not to use layers and
absolute positioning here is that it's an area that is really easy to get
into trouble with - especially if you are not an experienced web developer.

I have tried to be comprehensive regarding these issues on a page on my
site, but it's a bit pithy and if you are not interested in learning HTML or
becoming a developer, will likely put you right to sleep -

http://www.great-web-sights.com/g_layerlaws.asp

Anyhow, these are the errors of comission I see on your site -

1. You have nested inline layers and that's not usually a grand idea for
cross-browser/platform rendering -

<div style="position: absolute; width: 364px; height: 201px; z-index: 1;
left: 37px; top: 40px" id="layer1">
<div style="position: absolute; width: 444px; height: 26px; z-index: 1;
left: 439px; top: 456px" id="layer5">

I can see no real reason for these two layers to be nested, honestly.

2. You have used the font tag with point sizes (points are a print metric
and are not really suitable for use on the web) -

<font face="Comic Sans MS" size="2" color="#000099">

3. You are combining elements that are absolutely positioned on the screen
(layer1, above, will always be positioned 37 pixels from the left margin of
the browser viewport (the document window in the browser) regardless of how
wide that window is) with elements that are flexible -

<table border="1" width="100%"

This will cause parts of your page to move (what is in that table, for
example) with respect to other parts of your page (the layer1 which sticks
like glue at 37px left).

4. You are using a non-websafe font on your page -

<font face="Bernie" color="#000099">

This means that unless I have that font installed on my system, I will see
that content rendered in my browser's default font.

I know why you have used layers - it's very easy to position things on the
page when you do. But the price you have paid for that ease of positioning
may be too heavy a price.

See what I mean?

 

[Murray]

Jamie:

Layers, by definition, are locked.

FP writes HTML. If you tell FP to do something unwise, it will do it. Just
the same as if you tell your car to drive into a tree.

Read my other post, and let's see where you want to go with this....

 

[Jamie Sue]

What other post?

Jamie:

Layers, by definition, are locked.

FP writes HTML. If you tell FP to do something unwise, it will do it. Just
the same as if you tell your car to drive into a tree.

Read my other post, and let's see where you want to go with this....

 

[Murray]

The one where I offered you specific problems I saw on your page - or did
you already see that one?

 

[Jamie Sue]

No, I didn't see the one where you told me about the specific problems on my
page. Would you mind sending it again?

Thanks,
Jamie

 

[Murray]

I posted this on 2/3 at 12:57 -

One of the reasons why you so often see the advice not to use layers and
absolute positioning here is that it's an area that is really easy to get
into trouble with - especially if you are not an experienced web developer.

I have tried to be comprehensive regarding these issues on a page on my
site, but it's a bit pithy and if you are not interested in learning HTML or
becoming a developer, will likely put you right to sleep -

http://www.great-web-sights.com/g_layerlaws.asp

Anyhow, these are the errors of comission I see on your site -

1. You have nested inline layers and that's not usually a grand idea for
cross-browser/platform rendering -

<div style="position: absolute; width: 364px; height: 201px; z-index: 1;
left: 37px; top: 40px" id="layer1">
<div style="position: absolute; width: 444px; height: 26px; z-index: 1;
left: 439px; top: 456px" id="layer5">

I can see no real reason for these two layers to be nested, honestly.

2. You have used the font tag with point sizes (points are a print metric
and are not really suitable for use on the web) -

<font face="Comic Sans MS" size="2" color="#000099">

3. You are combining elements that are absolutely positioned on the screen
(layer1, above, will always be positioned 37 pixels from the left margin of
the browser viewport (the document window in the browser) regardless of how
wide that window is) with elements that are flexible -

<table border="1" width="100%"

This will cause parts of your page to move (what is in that table, for
example) with respect to other parts of your page (the layer1 which sticks
like glue at 37px left).

4. You are using a non-websafe font on your page -

<font face="Bernie" color="#000099">

This means that unless I have that font installed on my system, I will see
that content rendered in my browser's default font.

I know why you have used layers - it's very easy to position things on the
page when you do. But the price you have paid for that ease of positioning
may be too heavy a price.

See what I mean?
====================

I posted this the same day at 1:12PM -

Jamie:

Layers, by definition, are locked.

FP writes HTML. If you tell FP to do something unwise, it will do it. Just
the same as if you tell your car to drive into a tree.

Read my other post, and let's see where you want to go with this....

 

[Jamie Sue]

Thank you very much for you advice. It gives me some direction. I
apprecitae your help.

Jamie

 

[Murray]

You're welcome!

--
Murray

Thank you very much for you advice. It gives me some direction. I
apprecitae your help.

Jamie