Screen resolution issue

[Simona]

I have designed a page for a client who has purchased a template, so I only
had to make minor changes to the text and layout.
I have published the site in FrontPage using page size 989 x 501. My screen
resolution is 1024 x 768 and the page looks fine. When the client opens the
page with a different screen resolution, the page is distorted.
I know that tables set to a fixed width solve this problem, but how can I
change that if I am using a template and had no input in the initial design?
Is there a way to modify it now?

Thanks a lot
Simona

 

[Murray]

Is there a way to modify it now?

Yes, but it may be much more than you want to tackle. And by the way,
screen resolution tells you nothing about the size of the browser viewport
that's open on that computer, and it's the latter value that is causing you
grief. For example, Mac users never use full-screen browsers.

To fix the page you'd have to do the following -

1. Select a minimum browser viewport size that you want to support
2. Go through the template's code to find any page elements that will be
wider than this
3. Adjust the HTML and the graphics so that they fit within your selected
width

This would be quite a task for someone who is not well comfortable with HTML
(and perhaps CSS).

 

[Simona]

Thanks for that. I am not that comfortable with HTML so I wouldn't attempt
anything. How can I find out the browser viewport that my client is using?
I have set my page size in FrontPage to 989 x 501. What is the standard I
should be using? Would that make any difference?

Thanks again
Simona

 

[Murray]

How can I find out the browser viewport that my client is using?

What about your client's friend, or customer 1, or customer 2, etc.?

The point is, you cannot assume any particular viewport width. You must
select a minimum width, and design/layout the page(s) to fit that width.
They will be presentable in all wider viewports, and may only look strange
in narrower ones. However, if you make your page have a fixed (not
flexible) width, then the only thing that will happen in narrower viewports
is that you will get a horizontal scrollbar.

Read this -

http://www.thepattysite.com/window_sizes1.cfm

I have set my page size in FrontPage to 989 x 501.

I don't think that this does anything other than change the way the design
view appears on your screen. In other words, this setting adds no markup to
the page.

What is the standard I should be using?

Most of the sites I build are fixed width, centering pages. I usually
choose ~760px for that fixed width. Sometimes I go wider, depending on the
demographic I expect to be using/visiting the site. An example of such a
page would be here -

http://www.neapco.com/n_why-neapco.php

a page where I have relaxed that 760 width a bit (a tiny bit) is here -

http://www.madisonconcrete.com

or here -

http://www.agexonline.com

Show us your template and perhaps the job will be easier than I have
imagined.

 

[Simona]

I'll have a look at the pages you recommended. The address of the site is
www.interviewskills.ie/test_site. Take a look at it and see what you think.

Tks
Simona

 

[Murray]

I think you have a problem with absolutely positioned elements remaining
static on the screen while your tables center.

This is but one of the reasons why using layers as a layout method is a bad
idea. Who built this melange of Dreamweaver, Microsoft Word, and FP?

 

[Simona]

The template was purchased by TemplateMonster.com by my client. I made some
changes to it because I couldn't use the template as it was.
What should I do? I haven't had this issue with any of the other pages I
built.
Would it be easier to just scrap the template and re-create the page from
the beginning?

Thanks
Simona

 

[Murray]

Would it be easier to just scrap the template and re-create the page from

the beginning?

I would have never bought from Template Monster in the first place. All of
their stuff is low-order stuff. None of it validates, and many of its
templates contain illegally used stock images, according to a recently filed
flurry of suits against it and its spawn.

Certainly it would be easier for me to rebuild it from scratch - I don't
know about you. But you can try this -

Change this -

</head>

to this -

<style type="text/css">
<!--
body { text-align:center; }
#wrapper { text-align:left; width:760px; margin:0 auto;position:relative; }
/* 760px will display on an 800px screen maximized browser window without */
/* horizontal scrollbars. */
-->
</style>
</head>

change this -

<body ...>

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -

<!-- /wrapper -->
</div>
</body>

and see if that helps.

 

[Simona]

Thanks a million for all your help. You have been brilliant!

Simona

 

[Simona]

Thanks a million for all your help. You have been brilliant!

Simona

 

[Murray]

I take that to equate to "IT WORKED!".... 8)

 

[Simona]

Haven't tried it yet, but you've been so helpful! I'll let you know if it
works......

Simona

 

[Simona]

Bad news..... that code moves the logo + name and all the menus on the right
but it doesn't fix the issue.....

 

[Simona]

Bad news..... The code moves the logo + name and all the menus on the right,
but it doesn't fix the issue....

 

[Simona]

Bad news....it didn't work. The code moves the logo + name and the menus to
the right of the page. Any other ideas?

Tks
Simona

 

[Murray]

It is possible you didn't implement it correctly - it should work. Can you
post a link to your page with the changes?

 

[Simona]

Try this link: http://www.interviewskills.ie/test_site/index_html.html - I
may have done something wrong in the body part.

Thanks again,

Simona

 

[Murray]

You layout is substantially complicated by the ancestry of this page -
coming from Word with its WordArt is a problem. For example, <span> tags
are used as if they were block tags - they are not. While this is not a
tragic event, it is a fundamental mistake in the layout design of the page.
And it results in elements that cannot be seen in browsers other than IE.
Take a look at your page in FF, for example....

To really fix this for you, I'd have to start with valid HTML - sadly we are
a long way from that yet.

 

[Simona]

Don't worry about it, I think I will just build the page again. It shouldn't
take me that long.
You've been very helpful, thanks a lot

Simona

 

[Murray]

For what it's worth, adjusting the width of the #wrapper div to correspond
to the width of the inner content (704px) gives a nicely centered page.