Hey, for my new website I've been programing in wordpad, then viewing it in mozilla, then when I'm done it's all messed up in internet explorer, (big suprise).
I've managed to fix some problems, but some I just can't figure out and it's annoying. I was wondering if anyone could take a quick look at my code and try and fix a few problems:

• In IE the menu has too much space inbetween each link, when I change it to look better, then in Mozilla it becomes too little space.
• In IE the links when hovered upon do not show the background image
• In IE The indent of the first paragraph is twice that of the one in mozilla.
• In IE having trouble getting the first header in the body to look as though it is the first two words in the paragraph.

Thanks, I took almost two years of webdesigning so my skills are still a bit rusty. please don't spend too much time on it, I'm sure a lot of you have seen most of this before. Here is the location of my site (soon to be moved):
http://myatheism.awardspace.com/index.html
and here is the code for my style sheet:

*
{
margin: 0px;
padding: 0px;
}

/* TOP OF PAGE */

body
{
background-image: url('images/a1.gif');
background-repeat: repeat-x;
background-color: white;
font-family: verdana;
font-size: 75%
}

div#header h1
{
font-family: "trebuchet ms", helvetica, sans-serif;
font-size: 39px;
}
h1 span#blue
{
color: white;
}

div#header
{
position: absolute;
left: 10%;
top: 45px;
letter-spacing: -2px;
color: #DADADA;
text-transform: lowercase;
}

#slogan
{
position: absolute;
right: 10%;
top: 65px;
color: #DADADA;
text-transform: lowercase;
font-size: 13px;
font-family: "trebuchet ms", helvetica, sans-serif;
}

/* MIDDLE */

div#menu
{
color: #636363;
font-size: 115%;
background-color: white;
position: absolute;
left: 6%;
top: 130px;
right: 75%;
padding-bottom: 15%;
padding-top: 1.5%;
padding-left: 3%;
line-height: 200%;
}

div#body
{
background-color: white;
position: absolute;
left: 29%;
right: 5%;
top: 135px;
padding-bottom: 15%;
padding-top: 3%;
padding-left: 3%;
padding-right: 10%;
line-height: 125%;
}

/* LINKS */
#menu a
{
display: block;
padding-left: 2%;
}


A:link
{
text-decoration: none;
font-weight: bold;
color: #636363;
}
A:visited
{
text-decoration: none;
font-weight: bold;
color: #636363;
}
A:hover
{
background-image: url('images/bbg1.gif');
background-repeat: repeat-x;
}
A:active
{
color: #FFFF00
}

/* LISTS */

div#menu ul
{
list-style-type: none;
}

div#body p
{
text-indent: 5%;
}

div#intro h1
{
font-size: 200%;
padding: 0;

position: absolute;
top: 6.5%;
}

div#body div#intro p#first
{
text-indent: 26%;
margin-top: 3%;
}

div#body div#intro p
{
margin-top: 0.5%;
}

div#body h1, h2, h3, h4, h5, h6
{
font-family: "trebuchet ms", helvetica, sans-serif;
color: #50514D;
line-height: 125%;
}

div#body span#green
{
color: #85AC1E;
}



div#weekly_joke
{
background-image: url("images/a4.gif");
background-repeat: repeat-x;
margin-top: 3%;
padding-left: 1%;
padding-right: 1%;
margin-left: -2%;
border: dashed 1.5px #dadada;
}


div#weekly_joke p
{
padding: 0;
margin: 0;
}

Ok, for one thing you don't need, nor do you want, everything absolutely positioned. That means that everything is removed from the document flow. I can do your layout with no absolutes and just use the doc flow and floats.

Wrap the entire thing in a wrapper <div> and make it position: relative. Then you can position the menu and content area relative to the wrapper.

To fix the bg on hover problem, change the rule as follows:
A:hover
{
background: url(images/bbg1.gif) repeat-x;

For lists, IE uses margins, FF uses padding, so you will have to do both and adjust accordingly.

You've got id="weekly_joke" used TWICE .. can't do that. ID's are UNIQUE. If you want to use it more than once, make a class.

You might want to read about all the IE bugs here:
http://www.positioniseverything.net/ie-primer.html
http://www.positioniseverything.net/explorer.html