CSS - Please Help! Ie Not Playing Nice With Css

I have a floated div that contains a h1, img, and then a p. For some reason, IE is putting extra space between the h1 and img, and between the img and p. Here is the xhtml:

Code:

<div id="row_b_left">
	<h1>Header</h1>
	<img src="images/row_b_divider.png" alt="" />
	<p>Hello!  This is where the text goes.</p>
</div>

and here is the relevant css:

Code:

#row_b_left h1 {
	color: #0b819e;
	font: bold 1em Tahoma, arial, sans;
	margin-bottom: 0px;
}

#row_b_left p{
	color: #060606;
	font: .8em/1.3em arial, sans;
	text-align: justify;
	margin: 0px 15px 0px 0;
}

I have no idea what is causing IE to add extra space between these elements. It works perfectly in Firefox and Opera.

Any help would be appreciated. Thanks in advance.

Hi guys
I'm having a little trouble working with CSS
While doing the website in IE, i didn't notice that CSS is not working good in Firefox.

PLEASE SEE THIS IMAGE FIRST SO U CAN SEE DIFFERENCES BETWEEN 2 BROWSERS:

http://www.appinformatica.com/firefoxie.jpg

and here is the CSS code i used.
in IE it looks good, but not in Firefox..

Code:

BODY {
SCROLLBAR-FACE-COLOR: #D3F0EC; SCROLLBAR-HIGHLIGHT-COLOR: #32AAA1; SCROLLBAR-SHADOW-COLOR: #35AAA4; SCROLLBAR-3DLIGHT-COLOR: #BAEDE8; SCROLLBAR-ARROW-COLOR:  #32AAA1; SCROLLBAR-TRACK-COLOR: #EFEFEF; SCROLLBAR-DARKSHADOW-COLOR: #35AAA4; 
}

.verde-com-big {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: 0EB7B2;
	font-weight: bold;
}

select {
	background-color: #FFFFFF;
	color: 4B4B4A;
	font-size: 11px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px inset #003300;
}

form {
	margin: 0px;
	padding: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: inset;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: inset;
	border-top-color: #A7D8C2;
	border-right-color: #A7D8C2;
	border-bottom-color: #A7D8C2;
	border-left-color: #A7D8C2;
}

input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF6600;

textarea {
	color: #015953;
	border-top: 1px inset #003300;
	border-right: 1px inset #003300;
	border-bottom: 1px inset #003300;
	border-left: 1px inset #003300;
	background-color: #FFF0B9;
	border: 1px solid #A5D9C2;
}

textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #FFF0B9;
	color: #FF6600;
	border: 1px solid #A5D9C2;
}

Any ideas about how to make look good in Firefox too ?
thanks ALOT in advance. Henry.

I am new to design but really doing my best to keep up with the big boys. I am trying to tweak my site on Wordpress to have a oversized, and fluid footer.

Long story short I want my site (sac247[dot]sacobserver[dot]com) to have a footer that looks like venturebeat[dot]com or mashable[dot]com. Can someone help me get started on how to break my colors out of the widget box?

Ok, I am building a site for a model and I have a stripped background for the left navigation. IE7 wont display it, but of course all the other browsers do. I cant post a link cause im a newbie to this forum, but I can post my code! any help would be great:

Css Code
Code:

.container {
	width: 1000px;
	margin: 0px auto;
}
.header {
	background: url(../images/headerbg.jpg);
	height: 200px;
	width: 995px;
	margin-right: auto;
	margin-left: auto;
}
.background {
	background: url(../images/backgroud.jpg) repeat-x;
	width: 14px;
}
.leftnav {
	background: url(../images/stripes.jpg) repeat;
	float: left;
	width: 150px;
	color: #FFFFFF;
	visibility: visible;
	margin-right: auto;
	margin-left: auto;
}

.maincontent {
	background: #FFFFFF;
	width: 487px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 5px;
	padding-left: 5px;
	text-align: left;
	float: left;
}
.rightside {
	background: url(../images/body.jpg);
	float: right;
	height: 461px;
	width: 351px;
	margin-right: 2px;
}
.border1 {
	background: url(../images/border1.gif) repeat-x;
	height: 14px;
}

XHTML Code
Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
body {
	background: url(../images/temp_slices_03.jpg) repeat-x;
	width: 1px;
	margin-top: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>

<body>
<div align="center">
  <div class="container">
  
    <div class="header">Content for  class "header" Goes Here</div>
    
    <div class="leftnav">Content for  class "leftnav" Goes Here</div>
    
    <div class="maincontent">Content for  class "maincontent" Goes Here</div>
    
    <div class="rightside">Content for  class "rightside" Goes Here</div>
    
  </div>
 </div>
</body>
</html>

Hello,

I'm trying to build a form (without tables) where the user can choose between images using radiobuttons, like this:

URL

http://www.karmaweb.it/varie/example-form.png

(img bbcode does not seem to work, so I just inserted the link to the example image)

I've tried to insert each element (radio button, image, and label or text) in a separate div with float:left and then wrap these 3 divs in an outer div, like this:

Code:

.input-row
{
clear: both;
margin-bottom: 20px;
}

.input-radio
{
float: left;
width: 20px;
height: 100px;
}

.input-thumbnail
{
float: left;
width: 220px;
}

.input-label
{
float: left;
width: 200px;
}

and the html:

Code:

<div class="input-row">

<div class="input-radio">
<input type="radio" name="" value="" id="1" checked />
</div>

<div class="input-thumbnail">
<img src="image.png" alt=""></a><br />
</div>

<div class="input-label">
<label for="1">Some text</label>
</div>

</div>
<br style="clear:both" />

but I cannot find a way to vertically center the radiobutton (image height is not fixed), besides the clear:both on the outer div doesn't seem to work (why? I had to add a br style="clear:both" after each line), and does not look very good in older browsers.

Any idea how to do this? I'd appreciate any help you could offer.

Thank you,
Fibi