Hey everyone

Although I have been making websites for nearly 8 years, I've only just started doing them for business and so they need to be more professional as more people will be viewing them and their effectiveness will reflect upon the reputation of the company I am working for.

For the project I am working on at the moment, I want to ensure that the website looks good in all resolutions. I know that with tables, if you use percentages, your layout will adjust itself to fit the resolution it's being viewed in. However, what can you do about graphics? For example, I want to have a graphic banner going all the way across the top of the screen. If for example, I designed my site in 1024x768 as it's the resolution used by most people, people viewing it in 800x600 would have to scroll horizontally to see the whole image, yes? So I thought I would design the site in 800x600, but then there is too much extra space when the site is viewed in 1024x768 or above, in my opinion. Does anyone have any advice?

Also, regarding browsers and operating systems, are there any things I should avoid using that are for example not compatible with Macs, or come out strangely in Firefox etc.? I use IE7 so optimise my site designs for that, but I would like it to look perfect for everyone! I would prefer not to have to download all the other browsers to test how my site looks, but I will probably end up doing that anyway. But if anyone knows of any aspects of html or webdesign that generally come up differently in browers other than IE, I would be very grateful!

Thanks a lot,

Annie

However, what can you do about graphics?

Not much. You cannot scale graphics in a web page.

So I thought I would design the site in 800x600, but then there is too much extra space when the site is viewed in 1024x768 or above, in my opinion. Does anyone have any advice?

There are a few options, none of which entail trying to stretch a graphic. You can set it up so that the banner is no wider than 800px and make up the difference with a solid color. If you center the layout, then you could have a solid color or gradient (or patterned) fill in on either side. Anyone with a wider resolution will see the full graphic centered.

I use IE7 so optimise my site designs for that, but I would like it to look perfect for everyone!

If only ! Unfortunately, that is never going to happen, not perfection anyway. You can come darn close, but there are just too many variances between browsers, but mostly between IE and all the rest to get "perfect" in all of them.

I would prefer not to have to download all the other browsers to test how my site looks, but I will probably end up doing that anyway.

You don't have to, but you should at LEAST have Firefox loaded. IE7 is better than it's predecessors, but it's still IE and it still has some things MS does THEIR way against the standards. If you have at least FF, you'll be 99% for all the other standards-compliant browsers. Then there are sites like Browsershots where you can get a screenshot of your site as it looks in all browsers. Check the stickies in the HTML forum for a list of these compatibility checkers.

Originally Posted by LadynRed

You can set it up so that the banner is no wider than 800px and make up the difference with a solid color. If you center the layout, then you could have a solid color or gradient (or patterned) fill in on either side. Anyone with a wider resolution will see the full graphic centered.

That's what I thought to do, as well.

Thanks so much for your help!