Can anyone please explain why my elements are not positioned correctly in older browsers?

It's just that I don't really know enough about XHTML, CSS, or Javascript and I'm trying to learn. I know what to do in order to get things to work or look the way I want them to but I'm guessing my methods are not the standard best way to get the results I desire; obviously not because it's not working across all browsers.

I am hoping for someone who is willing to spend a little bit of time with me to go over the code, make recommendations and explain why what I have is not standard for coding. I have some validation 开发者_开发百科errors but they mostly are all in the javascript, which I didn't even write so I honestly have no idea if they are causing trouble or how to fix them if they are.

So my website is pretty simple. I just want to have a professional page where potential employers can see my resume and contact information. When I look at my website in firefox 4 or Safari 5.0.5 everything is perfect. The image of my name and the "contact" tab images both line up with the edge of the main container div. Also the text with the arrow picture line up about 50 pixels to the right so the arrow does not overlap with my resume picture. I use absolute positioning because when I try to use anything else, it gets all messy.

The Problem I am Having: My name logo, contact image tab and "please indulge with..." arrow picture seem to be about 65 pixels off to the left when I view my website in IE8 and Firefox 3.

My website is: nicholasdexter.me

Once again, I'm sorry that this question is geared towards me but I know you all are experts and I don't know where else to go for help. Thank you for reading!

Here is my style sheet: http://nicholasdexter.me/style.css

There's a lot of bugs in older browsers (particularly Internet Explorer 6 & 7). Also, some things just aren't supported in older browsers.

The trick is either to: - Use something called Graceful Degradation/Progressive Enhancement, in which newer techniques are used, but are used in a way that it won't matter if there's support or not for those things. For example, shadows, if no-one can see them, who cares? If they do, great. The trick is balancing that out. - Avoid those "new" techniques altogether.

This is nothing new here, and is even a pain for professionals. Microsoft evens hates IE6 now. http://www.ie6countdown.com/ So don't beat yourself up for it. :)

There are alot of resources out there that may help you find the right solution(s) to your problems. Here's one:

• http://www.quirksmode.org/css/contents.html

Oh, and feel free to ask questions again. Front-End Development (coding web stuff) is a real challenge some days! :)