CSS working in IE but not FF/Chrome

Question

I feel like this is a very basic CSS question:

There seems to be a hidden "margin-top" in my CSS, which shows up in FF and Chrome, but not IE. This is the page: adambailin.com/projects

I want the project title to line up with the image. Each project is in a #project div (thin white border-top). The css for the image is

#project_image
{

 float: left;
 width: 150px;
 height: auto;
 padding: 2px;
 border: solid 1px #7E8AA2;
}

And the css for the description part is

#project_desc
{
 float: right;
 width:425px;
}

Any ideas are greatly appreciated!

Answer 1

You're using an H4 tag which has it's own margin.

#project_desc h4 { margin-top:0 }

Answer 2

#project_desc h4
{
margin-top:0;
}

might help, try installing firebug in firefox, its a web-devs best friend.

Answer 3

just use this in css

h4 {margin-top:0;}

Answer 4

Best plan... use a css reset stylesheet to solve this problem... every browser starts with different base styles.

See this link

Answer 5

Awesome guys, thanks. The h4: margin-top:0 worked perfectly.