[whatshakin]

I have a few divs that are acting funny but I don't know CSS well enough to know what I'm doing wrong.

Here's what it looks like in Firefox:


Here's what it looks like in IE7:


The HTML:

<div class="topHeader">
			<div class="logo">
				<a href="#"><img src="images/logo.png" alt="Home" /></a>
			</div><!--end logo-->
			<div class="topMember">
				<ul id="links">
					<li><a href="#">Sign Up</a></li>
					<li><a href="#">Login</a></li>
				</ul>
				
			</div><!--end topMember-->
		</div><!--end topHeader-->
		
		<div class="introHeader">
			<h2 class="introTitle">Get Support Today!</h2>
			<div class="introText">
					<p>One of the greatest discouraging factors in a person's journey to reach a target weight is that they usually go it alone.  Follow Me Down is dedicated to helping people get support and building an accountability structure that will help people stay committed to their plan of action.
					</p>
			<div class="introLink">
				<a href="#" alt="Sign Up" id="introSignUp">Click to Sign Up Today!</a>
			</div><!--end introLink-->		
					
			</div><!--end introText-->
		
		</div><!--end introHeader-->

The CSS:

body, html {
		margin:0; 
		padding:0; 
		border:0;
		font-family: Gill, Helvetica, sans-serif
}

.container {
	padding:0 0 15px 0;
	text-align:center;
	width:1052px;
	background-image:url(images/containerBg.png);
	margin:0px auto;

}

.main {
	width:962px;
	margin:0px auto;
}

/* -------------------HEADER-----------------*/

.header {
	margin:0px;

	
}
.topHeader{
	background:#444141;
	height:90px;
	width:962px;
	margin:0px auto;
	padding:0px;
}
.logo{
	float:left;
	margin-top:10px;
	margin-left:50px;
}
.logo img{
	border:none;
	
}
.topMember{

	float:right;
	margin-right:50px;
	margin-top:20px;
}

.topMember ul li{
	display:inline;
	margin-right:35px;
}
#links a{
	color:#e3dfdf;
	font-weight:bold;
	font-size:11pt;
	text-decoration:none;
}
#links a:hover{
	color:#fff;
	border-bottom:1px dotted #fff;
}
/*----------------intro Header----------------*/

.introHeader{
	margin:0px;
}
.introTitle{
	position:relative;
	color:#454142;
	left:-300px;
}
.introText{
	background-image:url(images/introBg.png);
	background-repeat:no-repeat;
	height:274px;
}
.introText p{
	float:left;
	width:350px;
	text-align:left;
	margin-left:50px;
	padding-right:610px;
	color:#fff;
	font-weight:bold;
	font-size:11pt;
}
.introLink{
	text-align:left;
	padding-top:185px;
	padding-left:175px;
	
}
#introSignUp{
	color:#444141;
	font-style:italic;	
	font-size:11pt;
	text-decoration:none;
	font-weight:bold;
}
#introSignUp:hover{
	color:#838383;
	font-style:italic;	
	text-decoration:none;
	font-size:11pt;
	font-weight:bold;
}

I know it's alot to look at but I'm trying to learn how to do this properly, if anyone can give me some solid pointers I would greatly appreciate it.

Thanks in advance

Troy

[whatshakin]

Ok nevermind I found the problem... I started using relative positioning for a few of the divs that needed to be moved around rather than just using padding and margins to position everything.

I think that ie and ff read margins and padding very differently

Ouch.