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.ownsth...a/al_home4.html
Here is the link to the web design I am using to try to correct the resolution issues: http://rambro.ownsth...b/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.