need help with css alignment issue

Hello all,

I am having some css positioning issues. I have a cite that is using css and my issue is that content does not seem to lineup correctly in firefox and IE on all sized monitors/resolutions.

I think it is because I used "position: absolute;" instead of position: fixed;
in my css but when I change the absolute to fixed everything gets misaligned. I am wondering if someone can take a look at

www.xpconline.com in a few different browser sizes and tell me where I am going wrong

Thanks

Hmm, it's hard to fix properly when your whole code is so messy. You should seriously consider a total overhaul of your entire site. A good first step is to make sure it validates, I found a total of 130 errors on your site when validating it...

The specific problem you asked about though is easily tracked down. You run your computer at a screen resolution of 1280 pixels wide and you check your design using a maximized window. This means that when you set the DIV to be 230 pixels to the left it looks good only if the viewport of your browser is as wide as your own. Changing the width, by using another resolution or simply resizing the window, will disturb the layout.

I suggest you recode your site and use proper markup instead of the mess you use now, that's pretty much your only option if you want your site to look good in all major browsers.

OK

But when I setup the css should I be setting my resolution really small and base the positioning on a small sized screen or ?? it does not answer my question just to say my code is messy. The answer I was looking for is when your using css and of course you want the content to look the same in all browsers and resolutions should the positioning of the div's be "fixed" or absolute?
Thanks

Originally Posted by Sessionmedia OK But when I setup the css should I be setting my resolution really small and base the positioning on a small sized screen or ?? it does not answer my question just to say my code is messy. The answer I was looking for is when your using css and of course you want the content to look the same in all browsers and resolutions should the positioning of the div's be "fixed" or absolute? Thanks

The answer is: It depends.

The difference between the two is that the "fixed" value means that the element will stay fixed when the page scrolls.

When you design you should test the page in many different browsers and resolutions to make sure it looks the same everywhere. If it doesn't, you'll have to figure out what the problem is and fix it. In your case, the problem is based in the messy coding which makes it hard for you to position stuff in an easy way. The solution is to rewrite the code, making sure that it's semantic and that it validates. From there, a new CSS can be written.

And yes, this means a lot of really hard work of both coding and studying HTML and CSS, but there are no shortcuts to good websites.

thanks Szander for the comments

:-)