So, *Chris* (or anyone else that wants to help me).
I have run into another fairly simple problem..
This time however, I think I know WHY the problem occurs, and am just wondering how to fix it. Sorry in advance, for the stupid question- I am self-taught programmer, and this is how I learn :P.

So I make a site for a friend (can be found at http://www.photogrally.liophant.com) and on my browser (safari) it is all aligned, looks great, and Im happy.
Then i try access it through a windows using Internet Explorer.. It's dreadful. There is a square around my images on the index page (because they are links into the site).. and once I enter- EVERYTHING is either missing completely, or horribley mis-aligned.
So I go back to my mac, and try viewing it through Mozilla, this time DIFFERENT things are misaligned..etc.. (though better).

I diagnose this as a few things: 1) I'm guessing on my index, using CSS I need to specify no underline for all anchors. Okay, I got that..
The rest I am sure, is because I am using percentages/ numbers to align my images/text- which depending on the browser (and monitors screen size???) changes. As well as apparently web-standard is you your not supposed to use tables anymore? And I had to specify that it was ABSOLUTE positioning, to use Z-index

But if you don't use tables what do you use?!?
And if you want to align stuff, without using %'s to adjust margin.. then how do you do it?? [more specifically, if I have a table on the left, how do I put text NEXT to it, but not BELOW it]. I've experimented with Div's and Span's... all that fun stuff, but with no avail.
And on the subject of asking a trillion questions, firstly does this have anything to do with me having to specify that its positioned absolutely? and either way, is there any way to achieve the same result as changing the Z-index, without having to specify absolute positioning?

And lastly, is this just depending on the Browser? or is it screen size too? Because if it is just the browser then perhaps I can have some like javascript script to find out which browser the viewer has, and depending on browser point to a diff script?
Or maybe I'm going about this the wrong way.. what is the easiest way to get this viewable on other computers?
*sigh* I'm sorry for the trillion and one questions, but any and all help/advice would be great.
Thanks in advance!

I am taking a break at work right now and cant pull up your site, but I think I might be able to help you a little.
You sound like you are on the right track and I am glad you are trying to move away from tables. Once you get the hang of it, this will be much easier.
You should be able to put position:relative on your element with the z-index. It shouldn't have to be position:absolute. If that is the only way it is working, there is a problem somewhere else. An element using z-index DOES have to be positioned, but it can either be absolute OR relative.
You should be able to get your site looking good and fairly similar across all major browsers without having separate stylesheets for different browsers, but, if the occasion does occur, it is pretty easy to add a conditional statement to bring in a stylesheet specifically for IE.

okay, thanks a lot- but if you don't use tables... then how do align everything?
Everytime I use a margin's negative percent, I feel bad... like there must be a better/cleaner way?
thanks alot for the help
If I don't use percentages.. then how do I do it all?

1) I'm guessing on my index, using CSS I need to specify no underline for all anchors. Okay, I got that..

No, you don't want to do that, you want to leave the underlines. What you need to do is this: a img{border: none} for linked images.

But if you don't use tables what do you use?!?

Floats, margins, padding, and, in some cases, positioning, relative and absolute (which is what z-index is for).

I would stay away from negative margins as much as possible, it can be a hairy way to do a layout. There's also nothing that says you can't use percentages w/o negatives.

perhaps I can have some like javascript script to find out which browser the viewer has, and depending on browser point to a diff script?

You can, but that isn't really a great method and it's going to slow down your site in the process.

You might want to take a good look at the code behind these layouts:
http://blog.html.it/layoutgala/

The one very important thing you MUST have if you expect any semblance of cross-browser compatibility is to put a proper DOCTYPE on all of your pages. Without it, IE will render in Quirks mode - which is pretty ugly - and other browsers are 'guessing'. I would go with at least HTML 4.01 STRICT.

You also don't want to use moldy deprecated tags like <center> - read thru the stickies here for how to center your site.

I would also highly recommend this book: http://www.sitepoint.com/books/css2/

Thanks a lot.
But, how can you, for example, bring text "up" without adjusting the margin negatively?

And if I align with pixels, won't the alignment mess up depending on the browser/window?

But thanks A LOT!

how can you, for example, bring text "up" without adjusting the margin negatively?

Depends on the layout and I'd have to see the code in order to accurately answer that question.

On different browsers, results are also different.

The major different in mozilla and IE is google PR. in both you can't see same result always

The major different in mozilla and IE is google PR

Utter nonsense.

1. Sounds like you should take a look at http://css.maxdesign.com.au/floatutorial/
That will help you get a handle on floats.

2. I was having a nightmare trying table-free layouts until I started using a CSS reset such as here http://meyerweb.com/eric/tools/css/reset/

3. Once you "reset", you are kind of establishing a starting point. If you don't use a reset, it's kind of like a race where one person has to carry a weight, another has his feet tied, and another gets to start 40 feet ahead of everyone else. The "reset" sort of puts everyone on the starting line equal.

4. When you are start learning pure CSS layout, you may want to try using brightly/oddly colored backgrounds for each div while laying out. You will really "see" how padding and margins are working together.

5. This is just my opinion, but if you're on Safari, I would be checking in Firefox all along. Once it looks right in Firefox(or Google Chrome), I would move on to the other browsers.

6. I find the using % for everything can be tough. Mainly if you ever have to slice up a PSD layout into a web page. But I am a design guy, so div placement is very important to me. You can accurately place things with margins once you get the hang of it.

7. Don't be too afraid of negative margins. There will be some navigation bar tricks, css sprites, etc. etc that may rely on that setting. Your site will validate still.

Lastly, I am SO happy to have switched to all table-free layouts and don't need any non-validating hacks in my CSS for anything. Perhaps a conditional statement for IE6 with one or two margin fixes every now and then, but other than that, not many problems.

Good luck!

I had a similar problem. I already thanked one person, but would like to thank LadynRed for the following comment made above...

"The one very important thing you MUST have if you expect any semblance of cross-browser compatibility is to put a proper DOCTYPE on all of your pages. Without it, IE will render in Quirks mode - which is pretty ugly - and other browsers are 'guessing'. I would go with at least HTML 4.01 STRICT".

I had already put a DOCTYPE back in on my index page, but neglected to get the actual one from the original template and put it at the top of all of my pages. Once I did, my website is now cross-browser compatible.

Thanks for the help, I appreciate it...

Javascript is not going to solve Zoltar's problems and it's ridiculous to suggest it will!

For all the MAC users out there, here’s a link to a site that shows you what your website will look like in the dreaded Internet Explorer --

http://ipinfo.info/netrenderer/

A few versions of IE are included, to see the differences in each.