CSS cross-resolution cross-browser problems

Hi,
I am having lots of cross-resolution (and also cross-browser) problems.
I would like to know what is the most recommended solution for this
type of issue:
* Should I use different CSS for different resolutions? I don't like
this solution because than I will have to maintain 2 large CSS files.
* Should I just query the resolution each time there's a problematic
div, and than add the relevant div accordingly? E.g.:
if (screen.width == 800)
{
document.write ('<div id=header-details-800-600>')
}
else
{
document.write ('<div id=header-details>')
}

This is also not such a "hot" solution.
It is also not validated by "w3c css validator".

Can anyone give me the main point of this problem's solution?
Is there a good tutorial/reference I can do?

Thanks,
Gabi

Gabriella wrote:

Hi,
I am having lots of cross-resolution (and also cross-browser) problems.
I would like to know what is the most recommended solution for this
type of issue:
* Should I use different CSS for different resolutions? I don't like
this solution because than I will have to maintain 2 large CSS files.

No, you need to have one CSS file that allows for flexible width. Let
the browser's window width define the width of your pages.

* Should I just query the resolution each time there's a problematic

Nope, see above.

Can anyone give me the main point of this problem's solution?
Is there a good tutorial/reference I can do?

http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Blue Oyster Cult - Don't Fear The Reaper (live)