Hi all,

Here is my problem, I have designed a website where my measurements are in pixels and are at fixed lengths. The website works good except if a person viewing the website on their monitors with a different resolution.

I am trying to convert this website design into percentages, so as to prevent this resolution problem, so any user with a particular monitor (with a particular resolution) can view the web page on his/her screen without having to scroll through the entire page. The fixed pixels I used in my original design will not cut it (I tried getting away with it, but found this a problem when trying to project the web page via an s-video cable to a television screen that has a lower resolution (i.e. 800x600 resolution).

In my design I a have a combination of tables and div statements.
The browsers I am using is Firefox and Internet Explorer 6.0 .

I set about making the conversion to percentages for the elements in my web design. When viewing the changes in Firefox they look fine, however while viewing the changes in Internet Explorer 6, they seem to expand the percentage to more then the are, for example if I give a table a width of 100% it changes the width to more than 100%. In other words, the widths in "Internet Explorer" browser are not cooperating. How can I fix this problem.

Here is the link to the web design that works but has resolution issues: http://rambro.ownstheinter.net/al_project/5a/al_home4.html

Here is the link to the web design I am using to try to correct the resolution issues: http://rambro.ownstheinter.net/al_project/5b/al_home4.html

Another, issue is after looking at the second design, do you think I should abandon this design, and go with designing the site sans tables and go strictly with css and div statements?

Can the second design be saved or is it a lost cause?

The problem is how can I avoid these "width" problems with "Internet Explorer"?

Is their a fix I can apply, so that IE6 behaves correctly?

(Note: to see what I am trying to get at here with the resolution problem, try resizing the "home page" in both designs, in the first design the text and and image remain fixed while resizing the page, but in the second design, the text and images move while the resizing the page (try this in Firefox, the second design has problems in IE6, where I am looking for a fix).

Hope you can help me out on this.

rambro

Might try fixing the following coding errors before you try to correct IE's problems as it may be your coding and not IE. Firefox is definitely the browser to use for designing as it is the closest browser to CSS2.1 standards. BTW, do not make links with spaces in them. Some browsers will give you problems with whitespace in a link. Especially if it is an image tag.

CSS Coding Errors

HTML Coding Errors

These are for your page at http://rambro.ownstheinter.net/al_project/5b/al_home4.html

I would dump the tables as they were never meant for page layouts. Just tabular data. Trying to meet all resolutions/window sizes is an exercise in futility. It can be done, but it is a lot of work. Just design for 800x600 or so, use percents to make your page fluid and you should be good to go. If you absolutely want to go for different screen res, then you will have to use JavaScript (which may be off) to sniff out people's stats and load the correct CSS.

Ron

Hi Major Payne,

I instituted some of your previous comments. The links in my design are not spaces they are underscores. I came up with a design that using a fixed menu and a liquid content area using percentages and I designed it so it works at the screen resolution of 800 x 600. I got rid of most the tables except in the calender portion of my website. My website layout is of the following:

|<----topleft --->|<---topright------------------------>|

|<----Menu----->|<---content area------------------>|

|<----- Bottom------------------------------------------>|

Basically a two column layout.

The column layout is basically this, (99% total width):

|<--2-->|<--200px(static)-->|<--2%-->|<--2%-->|<--70%(fluid)-->|<--2%-->|

I didn't want to make my navbar/menu fluid, because that would mess up my menu items if I resized my browser window. I also converted my font-sizes from pxs to ems.

Now, I also validated my web pages (and this was a good suggestion) but my central problem was coming up with a different design to solve my problem.

The one of the problems that is bugging me is that I did not specify a width for the content area of my website. I specified the margins for the content area but I did not specify a width. When a do specify a width for the content area, my browsers don't render my web pages correctly. Could this be a problem?

Here is the design I am working off of: http://www.maxdesign.com.au/presentation/l...d/example02.htm

Here is my new web site design: http://rambro.ownstheinter.net/al_project/5c/al_home5.php

Thanks for your time

rambro


This post has been edited by rambro: Oct 9 2008, 10:11 AM

THE FIRST TEMPLATE:

You might want to make sure PHP is installed correctly, because I can see PHP within the source.

Also, it seems like you incorrectly closed a <tr> element within two instances:

Line 16, Column 5: </tr> <!-- row 1, end -->
Line 92, Column 5: </tr> <!-- row 3, end -->

This post has been edited by lem.rar: Oct 9 2008, 05:38 PM