Website Sizing with Percentages

Hello All, I am new to css and have managed to design my first webpage but am now finding out that many issues can occur as there are many browsers and different screen sizes out there. My website is not compatible size wise and I was possibly looking for some tips. I had heard that percentages were the way to go because they will allow the site to re-size according to the browser/screen size but when I tried this method it looked fine in ie 7 but was nearly a totally different site in firefox 2.0. How should percentages be used (if I should even use this method)? Are there any specific methods I should use?

My website can be found at http://www.rooftrusssupply.com . I only updated the home page with all percentages on the images but still it looks a little awkward in places especially in firefox and the images look a little distorted. Any help would be great thanks so much.


Trev

width="50%" height="40%" is how you use percentages.

Firefox needs extra bits of coding for it to look like it does in IE, as far as i know.

Id stick to witdh="30px" for example as it keeps it the same size for everyone, and can be hard work to design with %'s

Good luck

~Dean

Hey,
Your site doesn't really have to be "fit to screen". There are many times and many places where % are important, but in your case I'd leave the site as fixed. Site's like webforumz where using percentages that make the text boxes longer so people don't have to scroll so much is very nice. But a site like yours, it wouldn't really benefit your user much at all.

If you would like to learn how to do the percentage thing then I suggest going for it. But I don't think its something you must learn now for that site.

HTH

Best to use CSS if you can.

Code: Select all

#itemid {
width: 50%;
}

__________________